zoukankan      html  css  js  c++  java
  • 小程序实现简单分页功能(下拉加载更多)

    1、先建一个List页面

    2、在json文件里写好小程序的分页配置

    {
      "navigationBarTitleText": "管理记录",
      "enablePullDownRefresh": true,
      "enableReachBottom": true,
      "usingComponents": {}
    }

    如图:

    3、TestList.wxml页面写页面内容,如下:

    <!--pages/timecard/overwork/Testlist/Testlist.wxml-->
    <view class="main">
      <view class="div_center">
    
        <view wx:for="{{list}}" hidden="{{box2_hidden}}" style=" background-color:white;">
    
            <view class="weui-cells weui-cells_after-title">
                <view class="weui-cell">
                    <view class="weui-cell__bd" >
                      <checkbox>{{item.staff_name}}</checkbox>
                    </view>
                    <view class="weui-cell__ft">{{item.dept_name}}</view>
                </view>
            </view>
            </view>
      </view>
    
    
    </view>

    4、最后js文件代码:三个地方撸代码:1、data里初始化变量,2、写一个获取数据的方法,3、分别在下拉,上拉监听函数里加载获取数据的方法

      41、data里面变量初始化:

    /**
       * 页面的初始数据
       */
      data: {
    
          list: [],   //会员列表
          total: 0,    //分页总数
          page: 1,    //分页记录数
          pagesize: 10,   //分页大小
         onRefresh: true,
    
    
    
      },

      4.2、写一个方法,去后台取到list分页数据:我写的是getList方法

    /**
       * 请求后台获取数据
       */ 
      getList: function () {
        var that=this;
    
        var onRefresh = that.data.onRefresh;//false为重新刷新数据,true为分页累加数据
    
    
        //请求后台数据
        var usr = wx.getStorageSync('xxx');//url请求地址前缀,自己的后台
        wx.request({
          url: app.globalData.im_host + '/im_app/queryPersonList.action',
          data: {
            'login_user': usr,
            'page': that.data.page,
            'pagesize': that.data.pagesize,
          },
          method: 'get',
          success: function (res) {
            var datas = res.data.data;
            // console.log(12233);
            // console.log(datas);
            
            if(datas != null && datas.staff_list.length > 0){
              if(onRefresh){//false为重新刷新数据,true为分页累加数据
                that.setData({
                  // total: 5,
                  list: that.data.list.concat(datas.staff_list), //累加list,
                  page: that.data.page + 1
                });
              }else{
                that.setData({
                  // total: 5,
                  list: datas.staff_list, //重新覆盖list,
                  page: that.data.page + 1
                });
              }
              
            }else{
              wx.showToast({
                title:'没有更多数据了',
                icon:'none'
              })
              that.setData({
                  isloading:true
              })
    
              }
          },
          complete : function(res){
            wx.hideLoading();
          },
          fail: function (res) {
            console.log('load fail');
            
          }
        })
    
    
        
      },
      

      4.3、别忘了在生命周期函数onLoad,加载此getList()方法

      /**
       * 生命周期函数--监听页面加载
       */
      onLoad: function (options) {
        this.getList();
      },

      4.4、最后分别在生命周期函数onPullDownRefresh,监听用户下拉动作和生命周期onReachBottom,加载获取数据的方法getList(),如下:

    /**
       * 页面相关事件处理函数--监听用户下拉动作
       */
      onPullDownRefresh: function () {
        console.log('fresh')
    
        var that = this;
        that.setData({
          page:1,
          pagesize:10,
          onRefresh: false //重新加载数据
        });
      //调用刷新时将执行的方法
        //0.5s加载显示,如果不加会一直显示加载中,造成不好的用户体验
        // var that = this
        wx.showNavigationBarLoading() //在标题栏中显示加载
        setTimeout(function() {
          wx.showLoading({
            title: '加载中',//加载转圈显示
          });
          that.getList();
          wx.hideNavigationBarLoading() //完成停止加载
          wx.stopPullDownRefresh() //停止下拉刷新
        }, 500);
        
      },
    
      /**
       * 页面上拉触底事件的处理函数
       */
      onReachBottom: function () {
        console.log('bottom');
    
        
        wx.showLoading({
          title: '加载中',//加载转圈显示
        });
        
        var that = this;
          that.setData({
            onRefresh: true //累加数据
        });
        this.getList();
      },

    5、上效果图:上滑,下拉都会触发请求到后台,拿到分页数据(懒得做动态图了,将就看吧)

     

    。。。

  • 相关阅读:
    To select the file to upload we can use the standard HTML input control of type
    Cascading Menu Script using Javascript Explained
    网站首页head区代码规范
    轻松掌握 Java 泛型
    JDK 5.0 中的泛型类型学习
    如何在firefox下获取下列框选中option的text
    是同步方法还是 synchronized 代码? 详解多线程同步规则
    javascript select option对象总结
    Select的动态取值(Text,value),添加,删除。兼容IE,FireFox
    javascript在ie和firefox下的一些差异
  • 原文地址:https://www.cnblogs.com/spll/p/13877637.html
Copyright © 2011-2022 走看看