微信小程序下拉刷新和上拉加载

Posted 2020-10-09 叶长种-C#软件工程师

1.上拉加载和下拉刷新

 

Wxml文件

<scroll-view scroll-top="{{scrollTop}}" scroll-y="true" style="height:{{scrollHeight}}px;" bindscrolltolower="bindDownLoad" bindscroll="scroll">
    <block wx:for="{{goodsList}}" wx:key="item" >
            <view>
                <image src="{{item.goods_img}}" ></image>
            </view>
            <view>{{item.name}}</view>
            <view><text>￥<text>{{item.price}}</text></text><text>￥{{item.oldprice}}</text></view>
   </block>
</scroll-view>

 

根据官方文档得知，scroll-view就是里面内容有各种滑动触发事件的DIV容器，比如滚动条滚动、触底、触顶着三个事件。

其中的三个属性  scroll-top：设置滚动条的位置

，scroll-y：是否允许竖向滑动，height:是组件的高度

Bindscrolltolower是绑定触底触发的事件

Bindscroll  是滚动触发的时间

Bindscrolltoupper  触顶触发的事件,由于是触顶触发事件，所以不合适用来当做下拉刷新

一般来说  对于组件的属性，都是通过JS来动态控制的。

js

//获取应用实例
var app = getApp()
//首页上拉加载功能函数
var page = 0;
var url = ‘https:www.shop.com/home/index/index

‘;
var GetList = function(that){
  wx.request({
    url: url,
    data: {
        page:page,
    },
    success: function(res){
      var goodsList = that.data.goodsList;
      for(var i = 0;i<res.data.info.length;i++){
          goodsList.push(res.data.info[i]);
      }
      that.setData({
          goodsList:goodsList
      });
      page ++;
      that.setData({
          hidden:true
      });
    }
  });
}
Page({
    data: {
        goodsList:[],
        scrollTop : 0,
        scrollHeight:0,
    },
    //下拉刷新
    onPullDownRefresh:function(){
        this.onLoad()
    },
    onLoad: function () {
         var that = this;
            wx.getSystemInfo({
                success:function(res){
                    that.setData({
                        scrollHeight:res.windowHeight
                    });
                }
            });
        //首页商品
        wx.request({
          url: ‘https:www.shop.com/home/product/search‘,
          data: {},
          method: ‘GET‘,
          success: function(res){
                that.setData({
                goodsList: res.data.info,
            })
          },
        })

},

    //   该方法绑定了页面滑动到底部的事件
    bindDownLoad:function(){
        var that = this;
        GetList(that);
    },
    //   该方法绑定了页面滚动时的事件
    scroll:function(event){
        this.setData({
            scrollTop : event.detail.scrollTop
        });
    },
})

 

当初次加载页面的时候，执行onLoad函数，

onLoad: function () {
    var that = this;
    wx.getSystemInfo({
        success:function(res){
            that.setData({
                scrollHeight:res.windowHeight
            });
        }
    });

    //首页商品
        wx.request({
          url: ‘https:www.shop.com/home/product/search‘,
          data: {},
          method: ‘GET‘,
          success: function(res){
                that.setData({
                goodsList: res.data.info,
            })
          },
        })
}

这里的onLoad有两个功能

一、获取设备接口用户手机屏幕高度  

二、向服务器发送请求，获取数据

其中，wx.getSystemInfo接口可以获取到手机型号、设备像素比、窗口宽度和高度、设备语言、操作系统版本号和客户端平台，最常用的就是获取设备窗口的宽度和高度。

Wx.request()是发送请求，为了保持良好习惯，需要把请求的数据（GET、POST）都要放在data{}中

小程序封装了一个下拉刷新的API，onPullDownRefresh监听下拉事件，所以

onPullDownRefresh:function(){
    this.onLoad()
},

当下拉事件触发的时候，重新执行onLoad（）就可以实现刷新效果了

上拉加载

var page = 0;
var url = app.globalData.domain+‘/index.php‘;
var GetList = function(that){
  that.setData({
      hidden : false
  });
  wx.request({
    url: url,
    data: {
        page:page,
    },
    success: function(res){
      var goodsList = that.data.goodsList;
      for(var i = 0;i<res.data.info.length;i++){
          goodsList.push(res.data.info[i]);
      }
      that.setData({
          goodsList:goodsList
      });
      page ++;
      that.setData({
          hidden:true
      });
    }
  });  
}
//   该方法绑定了页面滑动到底部的事件
bindDownLoad:function(){
    var that = this;
    GetList(that);
},
//   该方法绑定了页面滚动时的事件
scroll:function(event){
    this.setData({
        scrollTop : event.detail.scrollTop
    });
},

bindDownLoad:每次触底都会触发GetList，去获取数据

Scroll:每次滚动的时候，都重新设置滚动条的位置

重点是看这个函数，我也是第一次用到调用函数来处理

var page = 0; 设置当前所请求的页数，这里我请求的方式类似于分别请求

url 请求的url

var GetList = function(){}; 是JS中设置函数的一种方式，先设置一个匿名函数，然后将这个匿名函数赋值给GetList这个变量，相当于这个变量代表了这个函数

wx.request() 发送请求

success 请求成功以后，对数据进行操作

var goodsList = that.data.goodsList; that是调用函数的时候，传递过来的，是this，代表当前页面Page()的实例化对象

that.data.goodsList 就是获取当前goodsList的值

每次执行这个函数的时候，都会page++，然后根据这个page的值去服务器获取数据，将新得到的数据，通过循环push，添加到这个goodsList，然后再通过that.setData覆盖掉原来的goodsList,这样Page中的goodsList就是最新的数据，可以展现在前端页面了。

下拉刷新:1.触底，触发时间   2.调用函数，获取数据    3.将数据添加到所在页面js中

后端PHP代码：

public function index(){
    $page = I(‘get.page‘)?I(‘get.page‘):0;
    $goods_list = D(‘Goods‘)->where(array(‘status‘=>1))->limit($page*10,‘10‘)->order(‘id desc‘)->select();
    $this->success($goods_list,‘‘,true);
}

需要更多小程序源代码的请联系作者，微信号：18217688158