前言：
下拉刷新和上拉加载是业务上一个很常见的需求，在微信小程序里，提供了下拉刷新的方法onPullDownRefresh() 上拉加载触底onReachBottom()也可以scroll-view进行布局，这个就要个人喜好，比如滚动条滚动、触底、触顶着三个事件，中的三个属性scroll-top：设置滚动条的位置，scroll-y：是否允许竖向滑动，height:是组件的高度Bindscrolltolower是绑定触底触发的事件Bindscroll 是滚动触发的时间Bindscrolltoupper 触顶触发的事件,由于是触顶触发事件，所以不合适用来当做下拉刷新下拉刷新
首先把页面结构以及样式布置好 让列表数据溢出滚动
<Tabs tabs="{{tabs}}" bindtabsItemChange="handleTabsItemChange" ><block wx:if="{{tabs[0].isActive}}"><view class="first_tab"><navigator class="goods_item"wx:for="{{goodsList}}"wx:key="goods_id"url="/pages/goods_detail/detail?goods_id={{item.goods_id}}"><!-- 左侧 图片容器 --><view class="goods_img_wrap"><image mode="widthFix" src="{{item.goods_small_logo?item.goods_small_logo:'/large/007rAy9hgy1g24by9t530j30i20i2glm.jpg'}}"></image></view><!-- 右侧 商品容器 --><view class="goods_info_wrap"><view class="goods_name">{{item.goods_name}}</view><view class="goods_price">￥{{item.goods_price}}</view></view></navigator></view></block><block wx:elif="{{tabs[1].isActive}}">1</block><block wx:elif="{{tabs[2].isActive}}">2</block></Tabs>
第二步 现在data中创建空数组 用来接收数据以及tab栏选项卡切换数据，接口参数，总页数
data: {tabs: [{id: 0,value: "综合",isActive: true},{id: 1,value: "销量",isActive: false},{id: 2,value: "价格",isActive: false}],goodsList:[]},// 接口要的参数QueryParams:{query:"",cid:"",pagenum:1,pagesize:10},// 总页数totalPages:1,/*** 生命周期函数--监听页面加载*/onLoad: function (options) {this.QueryParams.cid=options.cid||"";this.QueryParams.query=options.query||"";this.getGoodsList();},// 标题点击事件 从子组件传递过来handleTabsItemChange(e){// 1 获取被点击的标题索引const {index}=e.detail;// 2 修改原数组let {tabs}=this.data;tabs.forEach((v,i)=>i===index?v.isActive=true:v.isActive=false);// 3 赋值到data中this.setData({tabs})},
第三步 同步操作 获取商品列表数据 在这时要写一个关闭下拉刷新的窗口 渲染完数据就关闭下拉刷新（完成下拉刷新事件后写进去）
// 获取商品列表数据async getGoodsList(){const res=await request({url:"/goods/search",data:this.QueryParams});// 获取 总条数const total=res.total;// 计算总页数this.totalPages=Math.ceil(total/this.QueryParams.pagesize);// console.log(this.totalPages);this.setData({// 拼接了数组goodsList:[...this.data.goodsList,...res.goods]})// 关闭下拉刷新的窗口 如果没有调用下拉刷新的窗口 直接关闭也不会报错 第二步wx.stopPullDownRefresh();},// 下拉刷新事件 第一步onPullDownRefresh(){// 1 重置数组this.setData({goodsList:[]})// 2 重置页码this.QueryParams.pagenum=1;// 3 发送请求this.getGoodsList();}
上拉加载
具体思路：上拉触底 先判断有没有下一页 看看获取的页数是否大于等于总页数 小于的话就会继续下一页 大于的话滚动到底部就不用再发起请求了 提示没有下一页数据
// 页面上滑 滚动条触底事件onReachBottom(){// 1 判断还有没有下一页数据if(this.QueryParams.pagenum>=this.totalPages){// 没有下一页数据// console.log('%c'+"没有下一页数据","color:red;font-size:100px;background-image:linear-gradient(to right,#0094ff,pink)");wx.showToast({ title: '没有下一页数据' });}else{// 还有下一页数据// console.log('%c'+"有下一页数据","color:red;font-size:100px;background-image:linear-gradient(to right,#0094ff,pink)");this.QueryParams.pagenum++;this.getGoodsList();}},
总结：具体讲解见代码注释
