❤微信小程序项目(二)❤

6. 商品列表⻚⾯

6.1. 效果

6.2. 逻辑代码

接⼝:商品列表请求接口

1. 加载商品列表数据
   代码如下:
   这是父组件的代码,里面包含着子组件(serachInput)和(tabs),设置好组件之后使用接口获取到数据,遍历渲染到页面上

<!--pages/goods_list/goods_list.wxml-->
<SearchInput/>
<tabs tabs="{{tabs}}" bindtabsItemChange="handeleItemChange"> 
    <view class="first_tab"
        wx:for="{{goods_list}}"
        wx:key="goods_id"
    >
        <navigator class="goods_items" target="" url="" hover-class="navigator-hover" open-type="navigate">
            <!-- 左侧图片容器 -->
            <view class="goods_img">
                <image class="" src="{{item.goods_small_logo?item.goods_small_logo:'http://image4.suning.cn/uimg/b2c/newcatentries/0000000000-000000000606013705_1_400x400.jpg'}}" mode="widthFix"/>
            </view>
            <!-- 右侧文字描述 -->
            <view class="goods_info">
                <view class="goods_name">{{item.goods_name}}</view>
                <view class="goods_price">￥ {{item.goods_price}}</view>
            </view>
                
        </navigator>
          
    </view>
    
</tabs>

如何请求数据代码如下:

queryParams: {
    query: "",
    cid:'',
    pagenum:1,
    pagesize:10
  },
// 请求商品列表的数据
  async getgoodsList() {
    const res = await request({
    	//这里博主使用的是封装了一个小插件,主要是为了后期方便更改
    	url:"/goods/search",
   		data:this.queryParams
    })
    // console.log(res)
    this.setData({
      //将琼请求来的数据放到data中的goods_list空数组中
      goods_list:res.data.message.goods
    })
  },

3. 启⽤下拉⻚⾯功能
   代码:
   与上面渲染遍历页面的代码发生了些变化,这里直接使用数组拼接的方法将当前页面有的数据 与 后续下拉刷新页面请求来的数据使用解构赋值的方法添加到一起,如果不这样写,后面请求来的数据就会覆盖前面的

async getgoodsList() {
    const res = await request({
   	 	url:"/goods/search",
    	data:this.queryParams
    })
    
    // 获取总条数
    const total = res.data.message.total

    // 计算总页数
    this.totalPages=Math.ceil(total / this.queryParams.pagesize)
    // console.log(...this.data.goods_list)
    this.setData({
      // goods_list:res.data.message.goods
      // 拼接了数组
      goods_list:[ ...this.data.goods_list,...res.data.message.goods]
    })
    
	/**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {
    // console.log("111")
    if(this.queryParams.pagenum>=this.totalPages){
      console.log("meioyou")
    }else{
      this.queryParams.pagenum++;
      this.getgoodsList()
    }
  },
	

5. ⻚⾯的json⽂件中开启设置
   让页面一打开就展现这个组件
6. 启⽤上拉⻚⾯功能 onReachBottom ⻚⾯触底事件 加载下一⻚

6.4. 关键技术

⼩程序配置⽂件中 启⽤上拉 和下拉功能
搜索框和tab栏是⼩程序的⾃定义组件(有组件事件和参数交互)

onReachBottom()
监听用户上拉触底事件。

可以在app.json的window选项中或页面配置中设置触发距离onReachBottomDistance。
在触发距离内滑动期间，本事件只会被触发一次

onPullDownRefresh()
监听用户下拉刷新事件。

需要在app.json的window选项中或页面配置中开启enablePullDownRefresh。
可以通过wx.startPullDownRefresh触发下拉刷新，调用后触发下拉刷新动画，效果与用户手动下拉刷新一致。
当处理完数据刷新后，wx.stopPullDownRefresh可以停止当前页面的下拉刷新。

总结:

几天把商品列表的样式布局,数据渲染到了页面中,添加了上拉加载下一页数据的功能,具体的样式用的是flex容器布局,大家可以自己试一试,具体的代码写在上面了,感谢您的观看