微信小程序实现滚动分页加载更多-前端-阿习进阶博客
Java
MySQL
大数据
Python
前端
黑科技
    首页 >> 互联网 >> 前端

微信小程序实现滚动分页加载更多

[导读]:wxml: view class=myScroll style=float:left; scroll-view scroll-y=true style=height:{{height}}px bindscrolltolower=lower !--分类 下部分 图文列表 -- view class=appointment view class=app-moduler navigator url=/pages/detail/detail?id={{item.id}} wx:for={{imageList}} ...
wxml:

           
               
                           
                             
                               
                                 
                                 
                                   
                                 
                                 
                                    {{item.title}}   
                                 
                                 
                                   
                                     
                                   
                                   {{item.description}}
                                 
                               
                                
                             
                           
           
             
   
js:

data: { 
    imageList: [ ],
    ids:[0,0,0,0,0],
    inputValue: '', //搜索的内容
    height:0
  }
,
onLoad(){
 // 初始化所有图片的图片列表
            wx.request({
              url: '数据接口',
              data: {
                pagenumber: 1,
                pagesize: 6,
              },
              method: 'POST',
              header: {
                'content-type': 'application/x-www-form-urlencoded' // 默认值
              },
              success(res) {
                // var myOldData=that.data.imageList;
                var mydata = res.data.data;
                that.setData({
                  imageList: mydata
                })
                
              }
            })
            // 初始化图片列表  结束
    // 初始化 高度   
    wx.getSystemInfo({
      success: (res) => {
         
        that.setData({
          height: res.windowHeight
        })
      }
    })
  },
,
  lower() {
    var that = this;
    var result = that.data.imageList;
    var pagenumber=result.length/6+1;
    // 加载图片列表
    if (pagenumber < 2) {
      return false;
    } else {
    wx.request({
      url: '数据接口',
      data: {
        pagenumber: pagenumber,
        pagesize: 6,
        ids:that.data.ids,
        title: that.data.inputValue
      },
      method: 'POST',
      header: {
        'content-type': 'application/x-www-form-urlencoded' // 默认值
      },
      success(res) {
        // var myOldData=that.data.imageList;
        var mydata = res.data.data;
        var cont = result.concat(mydata);
        if (mydata.length==0){
          wx.showToast({ //如果全部加载完成了也弹一个框
            title: '没有数据了',
            image:"/images/warn.png",
            duration: 300
          });
          return false;
         }
        if (cont.length >= 100) {
          wx.showToast({ //如果全部加载完成了也弹一个框
            title: '加载的太多了',
            icon: 'success',
            duration: 300
          });
          return false;
        } else {
          wx.showLoading({ //期间为了显示效果可以添加一个过度的弹出框提示“加载中” 
            title: '加载中',
            icon: 'loading',
          });
          setTimeout(() => {
            that.setData({
              imageList: cont
            });
            wx.hideLoading();
          }, 1500)
        }
      }
    })
加载图片列表 结束 <br> }

本文来自阿习进阶博客,如若转载,请注明出处:https://yanxias.com

留言区

联系人:
手   机:
内   容:
验证码:

历史留言

联系人:阿习

手机号:156****7890

留言内容:欢迎大家一起讨论文章,有喜欢发帖的可以私聊我给你开权限,发文章

留言时间:2022-05-09 17:46:15

回复内容:互联网阿习

回复时间:2022-05-09 17:46:15

用户IP:220.***.***.232

用户操作系统:Windows 10

欢迎加Easy的QQ