随笔分类 - 小兔鲜儿
摘要:分页加载 触底: 这一步作完成之后滚动触底就会继续追加下一页 分页条件(加载停下来的条件,后端的商品有限) 下面我们来测试一下 为了方便测试我们改一下开始页数 或者: 下面就可以自己上微信开发者工具看一下效果了,到这里只是轻提示,下面我i们要设置结束标志了 看一下效果:
阅读全文
摘要:1 // src/pages/my/my.vue <script setup lang="ts"> // 获取屏幕边界到安全区域距离 const { safeAreaInsets } = uni.getSystemInfoSync() // 订单选项 const orderTypes = [ { t
阅读全文
摘要:滚动容器调用滚动触底再 进行父调子,模板ref(父)-》组件实例类型 暴露方法(子) 我们先测试下效果 在触底的时候我们要调用<XTxGuess />内部中的方法 这里ref是不安全的我们要进行类型定义 最后进行方法暴露和调用 现在开始分页加载了 通用分页参数类型如下,存放到 `src/types/
阅读全文
摘要:静态结构 // src/pages/login/login.vue <script setup lang="ts"> // </script> <template> <view class="viewport"> <view class="logo"> <image src="https://pca
阅读全文
摘要:轮播图变化-》更新下标 点击图片-》大图预览 轮播图: 纠正一下上面的图片 大图预览: 下面开始写弹出层 这里我们参考uniapp官网 https://uniapp.dcloud.net.cn/component/uniui/uni-popup.html 现在我们简单完成了弹窗,后面我们开始具体完善
阅读全文
摘要:新建页面-》静态结构-》页面参数处理-》封装API接口-》初始化调用 1.新建页面 2.静态结构 // src/pages/goods/goods.vue <script setup lang="ts"> // 获取屏幕边界到安全区域距离 const { safeAreaInsets } = uni
阅读全文
摘要:1 静态结构: <script setup lang="ts"> // </script> <template> <view class="viewport"> <!-- 搜索框 --> <view class="search"> <view class="input"> <text class="
阅读全文
摘要:热门推荐-获取热门推荐数据 封装通用接口-》初始化调用 我们看接口文档 我们发现这个参数的格式都是一样的,同样的返回值,只有路径不同,因此我们做了如下的封装操作 这里的分页是调用的这里 从后台获取数据 下面开始类型的定义 这个可以 观察一下,发现 // src/types/global.d.ts /
阅读全文
摘要:就是点击这个部分会再进入不同页面 1.新建页面-》静态结构-》跳转页面传参-》获取页面参数-》动态设置不同标题 我们先来准备动态设置标题,先新建页面,这里为了生成同名文件夹像下面这么设置 选择新建uiapp页面 下面开始静态结构的书写,代码如下 // /src/pages/hot/hot.vue <
阅读全文
摘要:首先我们先生成骨架屏幕,生成的时候选iphone14或者其他大屏的 我们把这些变成vue 样式的 把多余的删了除了滚动容器里的都是多余的 完成之后我们要调用 我们看的效果是这样的,骨架图和加载后的同时出现,这样是不行的我们下面来改善一下: 改善: 到这里我们就完全实现了。
阅读全文
摘要:自定义下拉刷新 效果: 重新加载页面数据 关闭动画 不过咱们上面这个方案一个等一个执行完再执行的效率很慢,我们下面来进行优化一下 猜你喜欢下拉刷新数据获取
阅读全文
摘要:1.封装获取猜你喜欢数据API 2.组件挂载完毕调用API 这个是接口文档: 下面: 组件内部获取数据,我们其他的都是在index.vue里面获取的: 我们来看一下数据,可以看到数据很多(items商品信息): 定义数据类型: 这里的分页我们其他地方也会用到,因此我们把他定义成一个通用的类型,知识列
阅读全文
摘要:1.准备组件(通用组件) 2.定义组件类型 3.准备scroll-view滚动容器 4.设置page 和scroll-view样式 猜你喜欢静态结构:猜你喜欢是一个通用组件 XtxGuess,多个页面会用到该组件,存放到 src/components 目录中。 <script setup lang=
阅读全文
摘要:1.准备组件(只有首页用到) 2.导入并使用组件 热门推荐布局为独立的组件 `HotPanel`,属于首页的业务组件,存放到首页的 `components` 目录中。 静态: <script setup lang="ts"> // </script> <template> <!-- 推荐专区 -->
阅读全文
摘要:1.封装获取前来分类数据API 接口文档 把这个接口写入程序 接下来主页调用 验证是否获取数据成功 1.下面定义前来分类数据类型 2.指定类型并传值给子组件 3.渲染前台分类数据 前台数据类型: /** 首页-前台类目数据类型 */ export type CategoryItem = { /**
阅读全文
摘要:准备工作 准备组件,只有首页使用 导入并使用组件(手动) 设置首页底色为 #F7F7F7 静态结构 前台类目布局为独立的组件 CategoryPanel属于首页的业务组件,存放到首页的 components 目录中。 <script setup lang="ts"> // </script> <te
阅读全文
摘要:1.封装获取轮播图数据API 2.页面初始化调用API 下面根据接口文档写代码 1.定义轮播图数据类型 2.指定类型并传值给子组件 3.渲染轮播图数据 根据接口文档 类型声明: 存放路径:`src/types/home.d.ts` ```ts/** 首页-广告区域数据类型 */export type
阅读全文
摘要:轮播图指示点随着图片滑动高亮 先来观察默认的知识点,和高亮有关的地方 操作如下 验证一下是否成功 下面我们想只打印图片的下标 成功后如图所示 实验都没问题了我们就要把修改高亮的值变成可动的
阅读全文
摘要:首页--通用轮播组件 轮播图组件需要在首页和分类页使用,需要封装成通用组件。 1.准备组件 2.自动导入组件 3.添加组件类型声明 静态结构:src/components/XtxSwiper.vue <script setup lang="ts"> import { ref } from 'vue'
阅读全文
摘要:我们不同手机的导航栏不一样,这是为了确保我们每个手机都能看到我们导航栏的全部信息 不会被遮挡,给不同机型进行样式适配 准备组件静态结构 修改页面配置,隐藏默认导航栏,修改文字颜色 样式适配 -> 安全区域 <script setup lang="ts"> // </script> <template
阅读全文