微信小程序> 微信小程序上拉加载更多

微信小程序上拉加载更多

浏览量:1648 时间: 来源:weixin_41355373

微信小程序上拉加载更多

注意问题:
1.当网速比较慢时候,可能会发生重复请求数据,所以需加一个开关的控制
2.窗口必须设置高度,否则无法触发事件
page.wxml

scroll-view scroll-y style="height: {{windowHeight}}px;" bindscrolltolower="loadMore"     view class='list'      view class='item' wx:for="{{list}}"        {{item.title}}      /view     /view  /scroll-view

page.js

// pages/news/news.jsPage({  /**   * 页面的初始数据   */  data: {    list:[],//数据列表    windowHeight:'400',//窗口高度    page:1,//页码    flag:true  //开关 true表示可以请求数据  },  /**   * 生命周期函数--监听页面加载   */  onLoad: function (options) {    this.requestData();    //获取屏幕高度    var that=this;    wx.getSystemInfo({      success: function (res) {        that.setData({          windowHeight: res.windowHeight        })            }    })  },  requestData(){          this.setData({        flag:false      })      var that=this;      var api = 'http://www.phonegap100.com/appapi.php';      wx.request({        url: api,         data: {          a: 'getPortalList',          catid: '20',          page: that.data.page        },        header: {          'content-type': 'application/json' // 默认值        },        success: function (res) {          if (res.data.result.length20){//请求到的数据length20时候,表示已经是最后一页,关掉开关            var f=false;          }else{            var f=true;          }          var list = that.data.list.concat(res.data.result)          var page = ++that.data.page;          that.setData({            list: list,            page: page,            flag: f          })        }      })  },  loadMore(){//出发加载更多    if (this.data.flag){      this.requestData();    }  }})

版权声明

即速应用倡导尊重与保护知识产权。如发现本站文章存在版权问题,烦请提供版权疑问、身份证明、版权证明、联系方式等发邮件至197452366@qq.com ,我们将及时处理。本站文章仅作分享交流用途,作者观点不等同于即速应用观点。用户与作者的任何交易与本站无关,请知悉。

产品经理

手机 : 13312967497

擅长 : 小程序流量变现

扫码领取礼包

最新资讯

热门模板

  • 头条
  • 搜狐
  • 微博
  • 百家
  • 一点资讯
  • 知乎