优购案例-分类
01.页面分析
- 入口: 点击底部tab分类时显示分类页面
- 主要模块
- 左侧一级分类
- 右侧展示二级分类和三级分类
- 其他说明
- 左右两侧分别滚动
- 点击左侧一级分类时,显示对应的二级和三级分类
02.静态页面-练习
-
抽取首页搜索链接为组件
- 原因:首页和分类的搜索链接是一样的
- 步骤
- 新建components/Search.vue
- copy原来首页属性搜索链接的结构和样式
- 使用
- 首页引入,注册,把组件名当标签使用
- 同理分类也可以一样使用
-
主体部分
-
左侧
-
一级选中和未选中的样式
-
点击一级分类时,选中
- data属性表示当前选中的一级分类的下标
activeIndex
- 点击时@click: activeIndex=index
- 一级分类是否添加active样式,由activeIndex===index
- data属性表示当前选中的一级分类的下标
-
左侧单独滚动
-
左侧高度固定,左侧占满屏幕剩下高度
-
方案
- 让左侧的父盒占满屏幕剩下高度,.content
position: absolute; top:100rpx; left:0; bottom:0; right: 0;
- 设置.left overflow:scroll
-
-
-
-
右侧
- 二级分类包括三级分类
- 右侧单独滚动 overflow:scroll
-
03.获取数据&渲染数据
- 尽早发请求
- onLoad
- 请求方法getCategoryList
- 渲染页面
- 请求返回的数据作为data属性
categoryList
- 渲染一级分类 v-for
- 如何渲染二级分类???
- 右侧数据来自
categoryList[一级分类选中的下标].children
- 右侧数据来自
- 渲染三级分类
- v-for
- 请求返回的数据作为data属性
04.页面报错
- 运行内置浏览器时发现错误
原因?
某对象的.children
, 其实说的是某对象是undefinedcategoryList[activeIndex].children
的 categoryList[activeIndex]==undefined- 请求之前,就是undefined
解决方案?
- 请求回来之前,不渲染页面
- v-show/v-if
- v-show不适用,依然会渲染,只不过隐藏了
<view class="content" v-if="categoryList[activeIndex]">
注意点:
- js代码里面
@
表示项目根目录 - uniapp注册事件不要在行内写逻辑,直接声明为方法即可
- 滚动的条件
- 内容大于盒子
- 盒子高度要固定
- 盒子overflow:auto/scroll
- 内容大于盒子
- 什么时候只能使用v-if不能使用v-show???
- 如果数据没有回来前,不渲染页面
- 实际工作中,分类页面, 接口应该是这样的
- 一级分类一个接口
- 点击一级分类时请求对应右侧数据
- this.$nextTick的应用场景,改变数据,对应的dom渲染完了,这个时机在nextTick
- this.$set,data属性是一个对象,给对象新增属性时
style要不要加scoped
-
scoped可以把样式限定在组件内,如何做到的?
- scoped会在结构上添加一个class,class名是唯一的
-
scoped在样式里面,对应的class名上添加唯一class
- 由于
data-v-xxx
每个组件上是唯一,也就不会影响到其他组件
- 由于
-
**uniapp页面style要不要加scoped? ** 不用加
- uniapp里面页面是独立
-
**uniapp组件的style要不要加scoped?**需要加
- 不加会影响引入它的页面的样式
下拉刷新
概念:在分页场景里面,下拉时顶部出现下拉动画,一般重新加载第一页数据
如何使用?
-
开启下拉刷新和下拉动画
- 在页面配置里面配置即可
{ "enablePullDownRefresh":true, #开启下拉刷新 "backgroundColor":"#ccc", #窗口的颜色,下拉后背后窗口的颜色 "backgroundTextStyle":"dark" #loading的颜色 }
-
下拉刷新会触发方法
onPullDownRefresh
- 一般在这个方法里面,重新加载第一页数据
上拉加载更多
概念:在分页场景,用户上拉,加载下一页数据,拼接在后面
如何使用?
-
在页面配置中配置
{ //内容底部距离-页面底部=50就会触发 "onReachBottomDistance":50 }
-
上拉时就会触发方法
onReachBottom
- 一般在这个方法里面加载下一页数据
注意点:
- 至少页面有滚动时才会触发到。
优购案例-搜索列表
01.页面分析
- 入口:分类页面点击三级分类跳转搜索列表页
- 主要模块
- 搜索框,过滤栏,商品列表
- 其他说明
- 分类页面点击三级分类跳转搜索列表页,带上三级分类名称,搜索框里面值为名称,同时商品列表为按名称搜索的结果列表
- 输入框输入,触发搜索
- 过滤栏接口不支持,不做
- 商品列表点击每一个时,跳转商品详情
02.静态页面
copy+pages.json添加路径
03.请求数据&渲染数据
- 过滤栏菜单切换选中
- 声明一个数组,v-for渲染
- activeIndex记录当前选中的下标
- 点击时候改变下标activeIndex=index
- 下标是否添加active样式,决定于activeIndex===index
- 接口分析
- url /api/public/v1/goods/search
- 方法get
- 参数
- query 关键字
- pagenum 页码从1开始的
- pagesize 页容量,一般作为常量
- 分类页面点击三级分类跳转搜索列表页,带上三级分类名称,搜索框里面值为名称,同时商品列表为按名称搜索的结果列表
- 点击三级分类跳转搜索列表页
- 点击@click:toSearchList
- 逻辑 uni.navigateTo
- 跳转传递三级分类的名称
- uni.navigateTo的url传参上"?catName="
- 在模拟器页面传参检查是否传参成功
- 在编译模式里面,添加启动参数
catName=曲面电视
- 搜索列表页获取参数
- onLoad
- 搜索框的值为三级分类的名称
- data属性keyword
- onLoad获取到参数,赋值给keyword
- 同时keyword和input用v-demo绑定
- 同时商品列表为按名称搜索的结果列表
- 发请求的时机?获取keyword后
- 请求给个名称 queryGoodsList
- 注意,可能在公共的请求方法request里面,没有透传data,确认
- 把请求的数据作为data属性,渲染v-for
- 点击三级分类跳转搜索列表页
注意点:
- 在静态页面目录里面App.vue声明了一些公共的样式,也需要copy过来
04.下拉刷新
-
页面配置
{ "enablePullDownRefresh":true, #开启下拉刷新 "backgroundColor":"#ccc", #窗口的颜色,下拉后背后窗口的颜色 "backgroundTextStyle":"dark" #loading的颜色 }
-
在
onPullDownRefresh
重新加载第一页数据- 发请求 queryGoodslist
05.上拉加载更多
-
页面配置
"onReachBottomDistance":50
-
监听用户上拉动作
onReachBottom
,加载下一页的数据-
pageNum+1
-
发请求queryGoodsList
-
请求到的数据应该追加
this.goodsList = [...this.goodsList,...data.goods]
-
注意点:
- 下拉刷新
- 页码为1
- 请求前清空goodsList