商品列表页

由分类页面 跳转过来，携带商品cid 在生命周期onlaod中option参数中访问拿到

<navigator
            v-for="good in item.children" 
            :key="good.cat_id"
            :url="`/pages/goods_list/goods_list?cid = ${good.cat_id}`"
            >

<template>
  <view>
    列表页
  </view>
</template>

<script>
export default {
  onLoad(option) {
    console.log(option);
  }
}
</script>

<style>

</style>

布局

顶部导航栏使用 uview中的tabs标签
change事件的回调中可以获得当前的下标
主体内容就通过下标来判断渲染

<template>
  <view>
    <!-- 搜索框 -->
    <Search></Search>
    <!-- tabs组件 -->
    <u-tabs 
      :list="list" 
      :is-scroll="false" 
      :current="current" 
      @change="change"
      active-color="#eb4450"
    ></u-tabs>
    <!-- 3 内容结构  根据current 条件显示 -->
    <view v-if="current===0">综合</view>
    <view v-if="current===1">销量</view>
    <view v-if="current===2">价格</view>
  </view>

</template>

<script>
export default {
  onLoad(option) {
    console.log(option);
  },
  data() {
    return {
      list: [{
                    name: '待收货'
                }, {
                    name: '待付款'
                }, {
                    name: '待评价',
                }],
                current: 0
    }
  },
  methods: {
            change(index) {
                this.current = index;
            }
        }
}
</script>

<style>

</style>

主体内容

封装接口参数，直接this.xx 定义好接口需要的数据对象 全局变量

export default {
  onLoad (option) {
    console.log(option)
    this.parms = {
      // 否    string    关键字
      query: '',
      // 否    string    分类id
      cid: option.cid || 6,
      // 否    number    页码
      pagenum: 1,
      // 否    number    页容量
      pagesize: 10
    }
    this.getGoodsSearchList()
  },
  methods: {
    async getGoodsSearchList () {
      const res = await this.$u.get('/goods/search',this.parms)
      console.log(res);
    }
  }
}

商品

将商品元素封装成一个组件，方便复用

注：这是页面组件，不能使用 easycom 模式注册

<template>
<view>
  <!-- 3 内容结构  根据current 条件显示 -->
  <view v-if="current === 0">
    <GoodsItem 
               v-for="item in goodsList" 
               :key="item.goods_id"
               :info="item"
               ></GoodsItem>
  </view>
  <view v-if="current === 1">销量</view>
  <view v-if="current === 2">价格</view>
  </view>
</template>

<script>
  import GoodsItem from './components/goods_item/goods_item.vue'
  export default {
    components: {
      GoodsItem,
    }
  }
</script>

<style>
</style>

<template>
<view class="goods-item">
  <view class="goods-item-img">
    <u-image width="100%" mode="widthFix" :src="info.goods_small_logo"></u-image>
  </view>
  <view class="goods-item-info">
    <!-- 第二行出现 省略号 u-line-2 -->
    <view class="goods-name u-line-2">{{info.goods_name}}</view>
    <view class="goods-price">￥{{info.goods_price}}</view>
  </view>
  </view>
</template>

<script>
  export default {
    props:['info']
  }
</script>

<style lang="scss">
  .goods-item{
    display: flex;
    padding: 10rpx;
    .goods-item-img{
      flex: 1;
      padding: 0 15rpx;
    }
    .goods-item-info{
      flex: 3;
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      .goods-price{
        color: #eb4450;
      }
    }
  }
</style>

操作

上拉

滚动条触底

• 页面级别
  • 整个页面滚动可以使用onReachBottom()生命周期，
  • 到达底部会触发触底事件

• 容器级别

  • overfkow:autocss属性 没有滚动事件

  • 使用 uview<scroll-view> 做上下滚动

    • 上下滚动需要添加scroll-y
    • 拥有滚动条触底事件@scrolltolower="" ```vue scroll-view v-if="current===0" class="main" scroll-y @scrolltolower="handleScrollBottom" <GoodsItem v-for=”item in goodsList” :key=”item.goods_id” :info=”item”

  触底获取数据
  
  - 判断有没有下一页
     - 拿数据的条数与总条数做对比 `数据条数>总条数`没有下一页
  - 对接口参数页码修改
     - `pagenum++`自增，每次触发获取下一页数据
  - 发送新的数据请求
     - 用新的参数来获取数据
  - 获取新数据后
     - 新旧数据合并
     - `[...旧数据，...新数据]`
  
  弹窗 `uni.showToast({title:"没有更多数据了",icon:"none"})`
  > icon 默认值为success
  
  ```vue
  <script>
  export default {
    methods: {
      change (index) {
        this.current = index;
      },
      async getGoodsSearch () {
        const res = await this.$u.get('/goods/search',this.parms)
        console.log(res);
        // 新旧数组合并
        this.goodsList = [...this.goodsList,...res.message.goods]
        // 获取总条数
        this.total = res.message.total;
      },
      // scroll-view 触底事件
      handleScrollBottom() {
        if (this.goodsList.length < this.total) {
          // 页码自增
          this.parms.pagenum++
          // 获取新数据
          this.getGoodsSearch()
        } else {
          uni.showToast({
            title: "没有更多数据",
            icon: "none", // 默认值 success
          })
        }
      }
    }
  }
  </script>
  

  下拉

  • 页面级别
    • 页面配置中 开启设置 允许页面下拉
      • "enadlePullDownRefresh":"ture"
    • 监听页面下拉事件
      • onPullDownRefresh()
  • 容器级别
    • <scroll-view>
      • 设置属性refresher-enabled
      • 监听下拉事件@refresherrefresh=""

  下拉触发

  清空数组，页码重置，重新获取数据，请求完成后关闭下拉提示

  关闭:refresher-triggered="show" 绑定一个Boolean值

  关闭后需要再次开启 直接关闭后在开启 代码内部会优化就会少一步

  <scroll-view
          v-if="current===0"
          class="main"
          scroll-y
          @scrolltolower="handleScrollBottom"
          refresher-enabled
          @refresherrefresh="handlerefresherrefresh"
          :refresher-triggered="show"
        >
  
  // 下拉刷新触发
  async handlerefresherrefresh() {
    this.show = true
    this.goodsList = []
    this.parms.pagenum = 1
    await this.getGoodsSearch()
    this.show = false
  }