07-小程序(优购分类,搜索列表,上拉下拉列表)

优购案例-分类

01.页面分析

入口: 点击底部tab分类时显示分类页面主要模块 左侧一级分类右侧展示二级分类和三级分类 其他说明 左右两侧分别滚动点击左侧一级分类时，显示对应的二级和三级分类

02.静态页面-练习

抽取首页搜索链接为组件

原因：首页和分类的搜索链接是一样的步骤 新建components/Search.vuecopy原来首页属性搜索链接的结构和样式使用 首页引入，注册，把组件名当标签使用同理分类也可以一样使用

主体部分

左侧

一级选中和未选中的样式

点击一级分类时，选中

data属性表示当前选中的一级分类的下标activeIndex点击时@click: activeIndex=index一级分类是否添加active样式，由activeIndex===index

左侧单独滚动

左侧高度固定，左侧占满屏幕剩下高度

方案

让左侧的父盒占满屏幕剩下高度，.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

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渲染完了，这个时机在nextTickthis.$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属性keywordonLoad获取到参数，赋值给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