• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

微信小程序 无限加载 上拉加载更多

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

加载更多,其实就是再次向接口发送请求,把返回的数据,追加到渲染页面的数组里的过程,具体实现实例如下:

demo.js

// pages/project/project.js
const app = getApp()
Page({

  /**
   * 页面的初始数据
   */
  data: {
  
    //每页显示的行数:
    pagesize: 7,
    //页码(从1开始):
    p: 1,

    //排序方式:
    paixu: \'viewcount\',
    //升序或降序:
    order: \'desc\',
    
//用于标识是否还有更多的状态
    state: 1,

//用于渲染页面的数组
    arrayProject:[],

//用于数组的追加和暂存
    allProject:[],
  },


  /**
 * 生命周期函数--监听页面加载
 */
  onLoad: function (options) {
    var mythis = this;
    getproinfo( this.data.pagesize, this.data.p,mythis)
  },


/**
   * 点击加载更多时触发
   */
loadMore:function(){
  var mythis = this;
  wx.showLoading({
    title: \'玩命加载中...\',
  });
  mythis.data.p = mythis.data.p + 1;
  getproinfo(this.data.pagesize, this.data.p,mythis);
  wx.hideLoading();
},


  /**
   * 页面上拉触底事件的处理函数,与点击加载更多做同样的操作
   */
  onReachBottom: function () {
    var mythis = this;
    wx.showLoading({
      title: \'玩命加载中...\',
    });
    mythis.data.p = mythis.data.p + 1;
    getproinfo(this.data.pagesize, this.data.p,mythis);
  wx.hideLoading();

  },

 
})

/**
 * 获取项目列表
 */
function getproinfo(pagesize, p,  mythis){
 
  wx.request({
    url: app.globalData.host + \'index.php/Ho/getproinfo\',
    method: \'post\',
    data: {
      pagesize: pagesize,
      p:p
    },
    header: {
      \'content-type\': \'application/x-www-form-urlencoded\' 
    },

    success: function (res) {
//如果搜出来的结果<1 就说明后面已经没数据可加载了,所以将state设为0
if (res.data.rows.length<1) mythis.setData({ state: 0 }); else{ var state1 = 1;
//如果有数据,但小于每次期望加载的数据量(pagesize),将state设为0,表示后面已没有数据可加载
if (res.data.rows.length < mythis.data.pagesize) var state1 = 0; //循环将结果集追加到数组后面 for (var i = 0; i < res.data.rows.length; i++) { mythis.data.allProject.push(res.data.rows[i]); } mythis.setData({ arrayProject: mythis.data.allProject, state: state1 }); } console.log(mythis.data.arrayProject) }, fail: function (res) { console.log(res); } }); }

 

demo.html

 <view class=\'projectlist\' >
    <view class=\'project\'  wx:for="{{arrayProject}}"  wx:for-item="itemProjec" wx:key="id" data-datas="{{itemProjec}}" bindtap=\'projectDetail\'>
      <view class=\'projectText\'> {{itemProjec.gongchengmingcheng}} </view>
      <view class=\'projectleibie label\'> {{arrayCategory[itemProjec.leixing].name}} </view>
      <view class=\'projectjiesuan label\'> {{arraySchedule[itemProjec.jieduan].name}} </view>
      <view class=\'projectTime\'> {{itemProjec.faburiqi}} </view>
    </view>
<!--
实现点击“加载更多”时进行加载
<view class=\'remind\' bindtap=\'loadMore\' wx:if="{{state==0}}"><view><<加载更多<<</view></view>
<view class=\'remind\' wx:elif="{{state==0}}"><view>没有更多了</view></view>
-->

//实现屏幕上拉加载更多 <view class=\'remind\' wx:if="{{state==0}}"><view>没有更多了</view></view> </view>

 


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
微信小程序开发(六)-常⻅组件发布时间:2022-07-18
下一篇:
微信小程序open-data缓存发布时间:2022-07-18
热门推荐
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap