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

优购案例-分类

01.页面分析

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

02.静态页面-练习

1. 抽取首页搜索链接为组件

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

2. 主体部分

   1. 左侧

      1. 一级选中和未选中的样式

      2. 点击一级分类时，选中

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

      3. 左侧单独滚动

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

            1. 方案

               1. 让左侧的父盒占满屏幕剩下高度，.content

               	position: absolute;
               	top:100rpx;
               	left:0;
               	bottom:0;
               	right: 0;
               

               1. 设置.left overflow:scroll

   2. 右侧

      1. 二级分类包括三级分类
      2. 右侧单独滚动 overflow:scroll

03.获取数据&渲染数据

1. 尽早发请求
   1. onLoad
   2. 请求方法getCategoryList
2. 渲染页面
   1. 请求返回的数据作为data属性 categoryList
   2. 渲染一级分类 v-for
   3. 如何渲染二级分类？？？
      1. 右侧数据来自categoryList[一级分类选中的下标].children
   4. 渲染三级分类
      1. v-for

04.页面报错

1. 运行内置浏览器时发现错误

原因?

1. 某对象的.children, 其实说的是某对象是undefined
2. categoryList[activeIndex].children的 categoryList[activeIndex]==undefined
3. 请求之前，就是undefined

解决方案?

1. 请求回来之前，不渲染页面
2. v-show/v-if
   1. v-show不适用，依然会渲染，只不过隐藏了

<view class="content" v-if="categoryList[activeIndex]">

注意点：

1. js代码里面@表示项目根目录
2. uniapp注册事件不要在行内写逻辑，直接声明为方法即可
3. 滚动的条件
   1. 内容大于盒子
      1. 盒子高度要固定
   2. 盒子overflow:auto/scroll
4. 什么时候只能使用v-if不能使用v-show???
   1. 如果数据没有回来前，不渲染页面
5. 实际工作中，分类页面， 接口应该是这样的
   1. 一级分类一个接口
   2. 点击一级分类时请求对应右侧数据
6. this.$nextTick的应用场景，改变数据，对应的dom渲染完了，这个时机在nextTick
7. this.$set，data属性是一个对象，给对象新增属性时

style要不要加scoped

1. scoped可以把样式限定在组件内，如何做到的？

   1. scoped会在结构上添加一个class，class名是唯一的

2. scoped在样式里面，对应的class名上添加唯一class

   1. 由于data-v-xxx每个组件上是唯一，也就不会影响到其他组件

2. **uniapp页面style要不要加scoped? ** 不用加

   1. uniapp里面页面是独立

3. **uniapp组件的style要不要加scoped？**需要加

   1. 不加会影响引入它的页面的样式

下拉刷新

传送门

概念：在分页场景里面，下拉时顶部出现下拉动画，一般重新加载第一页数据

如何使用？

1. 开启下拉刷新和下拉动画

   1. 在页面配置里面配置即可

   {
     "enablePullDownRefresh":true, #开启下拉刷新
     "backgroundColor":"#ccc", #窗口的颜色，下拉后背后窗口的颜色
     "backgroundTextStyle":"dark" #loading的颜色
   }
   

2. 下拉刷新会触发方法onPullDownRefresh

   1. 一般在这个方法里面，重新加载第一页数据

上拉加载更多

传送门

概念：在分页场景，用户上拉，加载下一页数据，拼接在后面

如何使用？

1. 在页面配置中配置

   {
     //内容底部距离－页面底部＝50就会触发
   "onReachBottomDistance":50
   }
   

2. 上拉时就会触发方法onReachBottom

   1. 一般在这个方法里面加载下一页数据

注意点：

1. 至少页面有滚动时才会触发到。

优购案例-搜索列表

01.页面分析

1. 入口：分类页面点击三级分类跳转搜索列表页
2. 主要模块
   1. 搜索框，过滤栏，商品列表
3. 其他说明
   1. 分类页面点击三级分类跳转搜索列表页，带上三级分类名称，搜索框里面值为名称，同时商品列表为按名称搜索的结果列表
   2. 输入框输入，触发搜索
   3. 过滤栏接口不支持，不做
   4. 商品列表点击每一个时，跳转商品详情

02.静态页面

​ copy+pages.json添加路径

03.请求数据&渲染数据

1. 过滤栏菜单切换选中
   1. 声明一个数组，v-for渲染
   2. activeIndex记录当前选中的下标
   3. 点击时候改变下标activeIndex=index
   4. 下标是否添加active样式，决定于activeIndex===index
2. 接口分析
   1. url /api/public/v1/goods/search
   2. 方法get
   3. 参数
      1. query 关键字
      2. pagenum 页码从1开始的
      3. pagesize 页容量，一般作为常量
3. 分类页面点击三级分类跳转搜索列表页，带上三级分类名称，搜索框里面值为名称，同时商品列表为按名称搜索的结果列表
   1. 点击三级分类跳转搜索列表页
      1. 点击@click:toSearchList
      2. 逻辑 uni.navigateTo
   2. 跳转传递三级分类的名称
      1. uni.navigateTo的url传参上"?catName="
      2. 在模拟器页面传参检查是否传参成功
      3. 在编译模式里面，添加启动参数catName=曲面电视
      4. 搜索列表页获取参数
         1. onLoad
   3. 搜索框的值为三级分类的名称
      1. data属性keyword
      2. onLoad获取到参数，赋值给keyword
      3. 同时keyword和input用v-demo绑定
   4. 同时商品列表为按名称搜索的结果列表
      1. 发请求的时机？获取keyword后
      2. 请求给个名称 queryGoodsList
         1. 注意，可能在公共的请求方法request里面，没有透传data，确认
      3. 把请求的数据作为data属性，渲染v-for

注意点：

1. 在静态页面目录里面App.vue声明了一些公共的样式，也需要copy过来

04.下拉刷新

1. 页面配置

   {
     "enablePullDownRefresh":true, #开启下拉刷新
     "backgroundColor":"#ccc", #窗口的颜色，下拉后背后窗口的颜色
     "backgroundTextStyle":"dark" #loading的颜色
   }
   

2. 在onPullDownRefresh重新加载第一页数据

   1. 发请求 queryGoodslist

05.上拉加载更多

1. 页面配置

   "onReachBottomDistance":50
   

2. 监听用户上拉动作onReachBottom,加载下一页的数据

   1. pageNum+1

   2. 发请求queryGoodsList

   3. 请求到的数据应该追加

      this.goodsList = [...this.goodsList,...data.goods]
      

注意点：

1. 下拉刷新
   1. 页码为1
   2. 请求前清空goodsList