精华内容
下载资源
问答
  • 整理文档,搜刮出一个微信小程序分页加载的代码,稍微整理精简一下做下分享。 分页加载功能大家遇到的应该会经常遇到,应用场景也很多,例如微博,QQ,微信朋友圈以及新闻类应用,都会有分页加载的功能,这不仅节省...
  • 原生小程序和Taro框架小程序分页加载。为了避免随着分页数越多,更新的数组也会越大,最终超过限制。所以,避免了一次设置数据量过大,小程序setData大小限制在了1M。每次只更新数组中一项就好,不用更新全部。
  • 微信小程序分页加载

    2021-03-29 18:06:18
    那么今天的这篇文章就是介绍微信小程序中如何实现分页加载的功能。照例先上源码及效果图。 源码传送门   (此图片来源于网络,如有侵权,请联系删除! ) music.gif   要实现这样的功能,一般需要在请求数据时加入...
  • 来自授权地址上拉加载(分页加载)当用户打开一个页面时,假设后台数据量庞大时,一次性地返回所有数据给客户端,页面的打开速度就会有所下降,而且用户只看上面的内容而不需要看后面的内容时 ...       加载更多...
  • 小程序分页加载

    2019-02-13 14:53:52
    * 生命周期函数--监听页面加载 */ onLoad: function (options) { var that = this; that.getInfo(); }, /** * 生命周期函数--监听页面初次渲染完成 */ onReady: function () { }, /** * 生命周期...

    1、app.json启用enablePullDownRefresh

    在window配置项里面添加"enablePullDownRefresh": true

    2、页面.wxml

    <view class='panel base-padding base-margin-bottom cate-data'>
      <view class='panel-heading'>
        <view class='panel-title font-lv1 strong'>唐诗     
        </view>
      </view>
      <view class='panel-body'>  
        <block wx:for="{{contentlist}}">
          <view class='row'> 
              <navigator url='/pages/intro/intro' class='ellipsis-1row font-lv2'>{{item.title}}</navigator>      
              <view class='text-muted info'>{{item.authors}}</view>  
              <view class='text-muted ellipsis-2row desc'>{{item.content}}
              </view>        
          </view>
        </block>
      </view>
    </view>

    3、后台方法返回

    由于是测试,找了网上一个免费https接口:https://api.apiopen.top/getTangPoetry?page=1&;count=5

    返回如下:
    {"code":200,"message":"成功!","result":[{"title":"帝京篇十首 一","content":"秦川雄帝宅,函谷壮皇居。|绮殿千寻起,离宫百雉余。|连甍遥接汉,飞观迥凌虚。|云日隐层阙,风烟出绮疏。","authors":"太宗皇帝"},{"title":"帝京篇十首 二","content":"岩廊罢机务,崇文聊驻辇。|玉匣启龙图,金绳披凤篆。|韦编断仍续,缥帙舒还卷。|对此乃淹留,欹案观坟典。","authors":"太宗皇帝"},{"title":"帝京篇十首 三","content":"移步出词林,停舆欣武宴。|雕弓写明月,骏马疑流电。|惊雁落虚弦,啼猿悲急箭。|阅赏诚多美,于兹乃忘倦。","authors":"太宗皇帝"},{"title":"帝京篇十首 四","content":"鸣笳临乐馆,眺听欢芳节。|急管韵朱弦,清歌凝白雪。|彩凤肃来仪,玄鹤纷成列。|去兹郑卫声,雅音方可悦。","authors":"太宗皇帝"},{"title":"帝京篇十首 五","content":"芳辰追逸趣,禁苑信多奇。|桥形通汉上,峰势接云危。|烟霞交隐映,花鸟自参差。|何如肆辙迹?万里赏瑶池。","authors":"太宗皇帝"}]}

    4、页面.js

    Page({
    
      /**
       * 页面的初始数据
       */
      data: {
        page: 1,
        pageSize: 5,
        hasMoreData: true,
        contentlist: []
      },
    
      getInfo: function () {
        var that = this;
        wx.request({
          url: 'https://api.apiopen.top/getTangPoetry',
          data: { page: that.data.page, count: that.data.pageSize },
          success: function (res) {
            console.log(res);// 服务器回包信息
            var contentlistTem = that.data.contentlist;       
            if (res.data.code == 200) {
              if (that.data.page == 1) {
                contentlistTem = []
              }
              var contentlist = res.data.result;
              if (contentlist.length < that.data.pageSize) {
                that.setData({
                  contentlist: contentlistTem.concat(contentlist),
                  hasMoreData: false
                })
              } else {
                that.setData({
                  contentlist: contentlistTem.concat(contentlist),
                  hasMoreData: true,
                  page: that.data.page + 1
                })
              }        
            }else{
              wx.showToast({
                title: '出现异常'
              })
            }
          }
    
        })
      },
    
      /**
       * 生命周期函数--监听页面加载
       */
      onLoad: function (options) {
        var that = this;
        that.getInfo();
      },
    
      /**
       * 生命周期函数--监听页面初次渲染完成
       */
      onReady: function () {
    
      },
    
      /**
       * 生命周期函数--监听页面显示
       */
      onShow: function () {
    
      },
    
      /**
       * 生命周期函数--监听页面隐藏
       */
      onHide: function () {
    
      },
    
      /**
       * 生命周期函数--监听页面卸载
       */
      onUnload: function () {
    
      },
    
      /**
       * 页面相关事件处理函数--监听用户下拉动作
       */
      onPullDownRefresh: function () {
        this.data.page = 1;
        this.getInfo();
      },
    
      /**
       * 页面上拉触底事件的处理函数
       */
      onReachBottom: function () {
        if (this.data.hasMoreData) {
          this.getInfo();
        } else {
          wx.showToast({
            title: '没有更多数据',
          })
        }
      },
    
      /**
       * 用户点击右上角分享
       */
      onShareAppMessage: function () {
    
      }
    })

    界面效果如下:

    备注:
    分页代码主要参考这篇文章https://blog.csdn.net/xiehuimx/article/details/74938034

    展开全文
  • 微信小程序分页加载数据 一般小程序做分页加载数据,会做一些下拉加载更多、然后上拉刷新的操作。数据放在一个for循环里去加载,数据源是一个数组对象。在加载下一页数据时,将下一页的数据拼到当前数组后面。这样...
  • 微信小程序分页加载数据

    万次阅读 2018-06-15 10:13:36
    微信小程序中也可以分页加载数据,这篇文章就是介绍微信小程序怎么制作分页加载数据。要实现这样的功能,一般需要在请求数据时加入当前请求页数,以及页的大小(每页显示的数量)也有一部分接口是通过请求的开始偏移...

    在使用类似qq,微博或者新闻类等数据量大的应用经常会遇到分页加载功能,它不仅的应用场景广,还能挺高用户体验。微信小程序中也可以分页加载数据,这篇文章就是介绍微信小程序怎么制作分页加载数据

    微信小程序怎么制作分页加载数据

    要实现这样的功能,一般需要在请求数据时加入当前请求页数,以及页的大小(每页显示的数量)也有一部分接口是通过请求的开始偏移量和结束偏移量请求数据,例如你一页显示10条数据,第一次(第一页)请求即开始start为0结束end是9,第二页就是从10到19,以此类推。既然要实现分页加载功能,最重要就是下拉以及上拉的处理事件,在微信小程序中已经帮我们封装好了上拉以及下拉的触发事件,如下

    /**

    * 页面相关事件处理函数--监听用户下拉动作

    */

    onPullDownRefresh:function () {

    },

    /**

    * 页面上拉触底事件的处理函数

    */

    onReachBottom: function() {

    },

    可能刚接触微信小程序的爱好者,会遇到一个问题,为什么我重写了上拉和下拉函数,但是当我上拉或者下拉的时候函数为什么不回调啊。莫急莫慌,那是因为除了重写这两个函数,我们还需要在json配置文件加入下面代码

    {

    enablePullDownRefresh: true

    }

    有了上面的代码,我们每次上拉或者下拉就会触发相对应的函数了。

    在data中创建数据

    data: {

    page: 1,

    pageSize: 30,

    hasMoreData: true,

    contentlist: [],

    },

    page即为当前请求数据时第几页,pageSize是每页的数据的大小,hasMoreData用于上拉的时候是不是要继续请求数据,即是不是还有更多数据。当我们网络请求数据成功后,如果请求数据的长度小于pageSize: 30,那么就表示没有更多数据,将hasMoreData更改为false,如果请求的数据长度是30,表示还有更多数据那么hasMoreData久更改为true,并将页数page加1.当下拉的时候讲page先更改为1,然后去查询数据,当查询数据成功时,如果page为1,就将获取的数据直接赋值给contentlist,如果页数大于1的话,就将请求的数据追加在contentlist后面。这样就可以实现分页加载的功能了。

    经过上面的分析,我们已经对分页加载的实现有了一个清晰的认识,那么接下来我就介绍代码的实现。

    getMusicInfo: function (message) {

    var that = this

    var data = {

    showapi_appid:\'25158\',

    showapi_sign:\'c0d685445898438f8c12ee8e93c2ee74\',

    keyword: \'我\',

    page:that.data.page

    }

    network.requestLoading(\'https://route.showapi.com/213-1\', data, message,function (res) {

    console.log(res)

    var contentlistTem= that.data.contentlist

    if(res.showapi_res_code == 0) {

    if(that.data.page == 1) {

    contentlistTem= []

    }

    var contentlist =res.showapi_res_body.pagebean.contentlist

    if(contentlist.length < that.data.pageSize) {

    that.setData({

    contentlist:contentlistTem.concat(contentlist),

    hasMoreData:false

    })

    } else {

    that.setData({

    contentlist:contentlistTem.concat(contentlist),

    hasMoreData:true,

    page:that.data.page + 1

    })

    }

    } else {

    wx.showToast({

    title: res.showapi_res_error,

    })

    }


    }, function (res) {

    wx.showToast({

    title: \'加载数据失败\',

    })


    })

    },

    上面函数就是获取音乐列表信息的请求处理逻辑,该函数有一个参数message,它是用来展示加载数据时的提示信息,例如当下拉的时候,提示信息为正在刷新数据,当上拉的时候提示正在加载更多数据。

    那么我们当进入页面的时候开始加载一次数据,即在onLoad函数,如下

    onLoad: function (options) {

    // 页面初始化 options为页面跳转所带来的参数

    var that = this

    that.getMusicInfo(\'正在加载数据...\')

    },

    然后上拉和下拉函数的实现如下

    /**

    * 页面相关事件处理函数--监听用户下拉动作

    */

    onPullDownRefresh:function () {

    this.data.page = 1

    this.getMusicInfo(\'正在刷新数据\')

    },


    /**

    * 页面上拉触底事件的处理函数

    */

    onReachBottom: function() {

    if(this.data.hasMoreData) {

    this.getMusicInfo(\'加载更多数据\')

    } else {

    wx.showToast({

    title: \'没有更多数据\',

    })

    }

    },

    分页功能可以更好的向用户展示内容,留住用户。现如今小程序作为用户获取信息的新渠道,很多小程序已经有了分页功能,在实现这一功能最好结合数据,如果处理不当容易导致数据丢失,造成不必要损失。

    更多 微信小程序开发教程 关注 小程序资讯
    展开全文
  • 原文链接: ... 内容: 我们在开发小程序时,一个列表里难免会有很多条数据,比如我们一个列表有1000条数据,我们一下加载出来,而不做分页,将会严重影响...所以这一节,我们来讲讲小程序分页加载数据的实现。 ...

    原文链接:

    https://developers.weixin.qq.com/community/develop/article/doc/000a2287318888d8a2b856e0750813

    内容:

    我们在开发小程序时,一个列表里难免会有很多条数据,比如我们一个列表有1000条数据,我们一下加载出来,而不做分页,将会严重影响性能。所以这一节,我们来讲讲小程序分页加载数据的实现。

    可以看到我们每页显示10条数据,当滑动到底部时,会加载第二页的数据,再往下滑动,就加载第三页的数据。由于我们一共21条数据,所以第三页加载完以后,会有一个“已加载全部数据”的提示。

    分页请求数据

    我们第一步准备好了数据以后,接下来就来讲讲如何在js里做分页加载数据。
    首先我们这里用到了小程序云开发数据库的知识点
    1,get方法:获取云数据库数据
    2,skip方法:跳过前面几条数据,请求后面的数据
    3,limit方法:请求多少条数据。
    比如下面这段代码,就是跳过前5条,请求从第6条开始往后的10条数据,就是请求6~15的数据,我们做分页加载也就是基于这个原理。

    wx.cloud.database().collection("list")
          .skip(5) //从第几个数据开始
          .limit(10)

    下面把我们index.js的完整代码贴给大家

    let currentPage = 0 // 当前第几页,0代表第一页 
    let pageSize = 10 //每页显示多少数据 
    Page({
      data: {
        dataList: [], //放置返回数据的数组  
        loadMore: false, //"上拉加载"的变量,默认false,隐藏  
        loadAll: false //“没有数据”的变量,默认false,隐藏  
      },
    
      //页面显示的事件
      onShow() {
        this.getData()
      },
      //页面上拉触底事件的处理函数
      onReachBottom: function() {
        console.log("上拉触底事件")
        let that = this
        if (!that.data.loadMore) {
          that.setData({
            loadMore: true, //加载中  
            loadAll: false //是否加载完所有数据
          });
    
          //加载更多,这里做下延时加载
          setTimeout(function() {
            that.getData()
          }, 2000)
        }
    
    
      },
      //访问网络,请求数据  
      getData() {
        let that = this;
        //第一次加载数据
        if (currentPage == 1) {
          this.setData({
            loadMore: true, //把"上拉加载"的变量设为true,显示  
            loadAll: false //把“没有数据”设为false,隐藏  
          })
        }
        //云数据的请求
        wx.cloud.database().collection("list")
          .skip(currentPage * pageSize) //从第几个数据开始
          .limit(pageSize)
          .get({
            success(res) {
              if (res.data && res.data.length > 0) {
                console.log("请求成功", res.data)
                currentPage++
                //把新请求到的数据添加到dataList里  
                let list = that.data.dataList.concat(res.data)
                that.setData({
                  dataList: list, //获取数据数组    
                  loadMore: false //把"上拉加载"的变量设为false,显示  
                });
                if (res.data.length < pageSize) {
                  that.setData({
                    loadMore: false, //隐藏加载中。。
                    loadAll: true //所有数据都加载完了
                  });
                }
              } else {
                that.setData({
                  loadAll: true, //把“没有数据”设为true,显示  
                  loadMore: false //把"上拉加载"的变量设为false,隐藏  
                });
              }
            },
            fail(res) {
              console.log("请求失败", res)
              that.setData({
                loadAll: false,
                loadMore: false
              });
            }
          })
      },
    })

    wxml代码我就不放了,详细可以去看原文链接,这里主要说一下遇到的问题:

    这是底下的评论,一开始还没看懂这个问题是什么原因,后来遇到了才发现是一个超级坑的问题!!

    问题大概是这样:如果一个用户想取列表数据,如果数据数据量较少的时候才会被出现,数据好像只被获取了一次!进入页面的时候获取一次,退出页面再重新进去数据就不见了!根本的原因是把两个变量

    let currentPage = 0 // 当前第几页,0代表第一页 
    let pageSize = 10 //每页显示多少数据 

    定义为了全局变量,在整个数据块有用,只要整个小程序没有被销毁,这俩数据就一直存在,并且没有重新赋值!每次调用都会在上一次的基础上查数据库!

    这是我在底下评论的回答

    整体思路解决掉变量作用域的问题,那么就把变量设为页面局部变量就好了

    1、就是把变量放在data里面

    2、或者是在show函数里面给两个变量重新赋值

     

     

    展开全文
  • 微信小程序分页加载功能实现

    千次阅读 2018-05-29 10:16:57
    微信小程序中也可以分页加载数据,这篇文章就是介绍微信小程序怎么制作分页加载数据。要实现这样的功能,一般需要在请求数据时加入当前请求页数,以及页的大小(每页显示的数量)也有一部分接口是通过请求的开始偏移...

    在使用类似qq,微博或者新闻类等数据量大的应用经常会遇到分页加载功能,它不仅的应用场景广,还能挺高用户体验。微信小程序中也可以分页加载数据,这篇文章就是介绍微信小程序怎么制作分页加载数据

    微信小程序怎么制作分页加载数据

    要实现这样的功能,一般需要在请求数据时加入当前请求页数,以及页的大小(每页显示的数量)也有一部分接口是通过请求的开始偏移量和结束偏移量请求数据,例如你一页显示10条数据,第一次(第一页)请求即开始start为0结束end是9,第二页就是从10到19,以此类推。既然要实现分页加载功能,最重要就是下拉以及上拉的处理事件,在微信小程序中已经帮我们封装好了上拉以及下拉的触发事件,如下

    /**

    * 页面相关事件处理函数--监听用户下拉动作

    */

    onPullDownRefresh:function () {

    },

    /**

    * 页面上拉触底事件的处理函数

    */

    onReachBottom: function() {

    },

    可能刚接触微信小程序的爱好者,会遇到一个问题,为什么我重写了上拉和下拉函数,但是当我上拉或者下拉的时候函数为什么不回调啊。莫急莫慌,在查阅小程序开发教程相关文档后可知,那是因为除了重写这两个函数,我们还需要在json配置文件加入下面代码

    {

    enablePullDownRefresh: true

    }

    有了上面的代码,我们每次上拉或者下拉就会触发相对应的函数了。

    在data中创建数据

    data: {

    page: 1,

    pageSize: 30,

    hasMoreData: true,

    contentlist: [],

    },

    page即为当前请求数据时第几页,pageSize是每页的数据的大小,hasMoreData用于上拉的时候是不是要继续请求数据,即是不是还有更多数据。当我们网络请求数据成功后,如果请求数据的长度小于pageSize: 30,那么就表示没有更多数据,将hasMoreData更改为false,如果请求的数据长度是30,表示还有更多数据那么hasMoreData久更改为true,并将页数page加1.当下拉的时候讲page先更改为1,然后去查询数据,当查询数据成功时,如果page为1,就将获取的数据直接赋值给contentlist,如果页数大于1的话,就将请求的数据追加在contentlist后面。这样就可以实现分页加载的功能了。

    经过上面的分析,我们已经对分页加载的实现有了一个清晰的认识,那么接下来我就介绍代码的实现。

    getMusicInfo: function (message) {

    var that = this

    var data = {

    showapi_appid:\'25158\',

    showapi_sign:\'c0d685445898438f8c12ee8e93c2ee74\',

    keyword: \'我\',

    page:that.data.page

    }

    network.requestLoading(\'https://route.showapi.com/213-1\', data, message,function (res) {

    console.log(res)

    var contentlistTem= that.data.contentlist

    if(res.showapi_res_code == 0) {

    if(that.data.page == 1) {

    contentlistTem= []

    }

    var contentlist =res.showapi_res_body.pagebean.contentlist

    if(contentlist.length < that.data.pageSize) {

    that.setData({

    contentlist:contentlistTem.concat(contentlist),

    hasMoreData:false

    })

    } else {

    that.setData({

    contentlist:contentlistTem.concat(contentlist),

    hasMoreData:true,

    page:that.data.page + 1

    })

    }

    } else {

    wx.showToast({

    title: res.showapi_res_error,

    })

    }


    }, function (res) {

    wx.showToast({

    title: \'加载数据失败\',

    })


    })

    },

    上面函数就是获取音乐列表信息的请求处理逻辑,该函数有一个参数message,它是用来展示加载数据时的提示信息,例如当下拉的时候,提示信息为正在刷新数据,当上拉的时候提示正在加载更多数据。

    那么我们当进入页面的时候开始加载一次数据,即在onLoad函数,如下

    onLoad: function (options) {

    // 页面初始化 options为页面跳转所带来的参数

    var that = this

    that.getMusicInfo(\'正在加载数据...\')

    },

    然后上拉和下拉函数的实现如下

    /**

    * 页面相关事件处理函数--监听用户下拉动作

    */

    onPullDownRefresh:function () {

    this.data.page = 1

    this.getMusicInfo(\'正在刷新数据\')

    },


    /**

    * 页面上拉触底事件的处理函数

    */

    onReachBottom: function() {

    if(this.data.hasMoreData) {

    this.getMusicInfo(\'加载更多数据\')

    } else {

    wx.showToast({

    title: \'没有更多数据\',

    })

    }

    },

    分页功能可以更好的向用户展示内容,留住用户。现如今小程序作为用户获取信息的新渠道,很多小程序开发了分页功能,在实现这一功能最好结合数据,如果处理不当容易导致数据丢失,造成不必要损失。

    该资讯来源于 即速学院 ,更多开发教程请关注小程序开发教程
    展开全文
  • 分页加载功能大家遇到的应该会经常遇到,应用场景也...那么今天的这篇文章就是介绍微信小程序中如何实现分页加载的功能。 数据来自于后端(lumen带分页) /** * @todo 获取订单列表 * @return mixed */ publ...
  • 小程序自定义选择分页组件. 三个参数 max_page:最大分页数 page:当前选择页 show:是否显示 bind: selectPage 分页选择事件 引入组件即可使用
  • 所以这一节,我们来讲讲小程序分页加载数据的实现。 老规矩,先看效果图 可以看到我们每页显示10条数据,当滑动到底部时,会加载第二页的数据,再往下滑动,就加载第三页的数据。由于我们一共21条数据,所以第...
  • // 计算当前共加载了多少条数据,来证明这种方式可以加载更多数据 var totalDataCount = that.data.totalDataCount; totalDataCount = totalDataCount + list.length; that.setData({ ["dataArray[" + page + "]"]:...
  • 微信小程序分页加载 上拉加载 /** 页面的初始数据*/ data: { /*分页中显示数据集合*/ list: [], /* 当前页 */ pageNo: 1, /* 每页显示商品数 */ pageSize: 10, /*是否最后一页*/ alreadyToEnd:...
  • 小程序分页加载数据

    千次阅读 2018-08-21 11:16:55
    // pages/billlist/index.js const app = getApp(); Page({ /*页面的初始数据*/ data: { ... loadtxt: '正在加载...', list: [] }, /*生命周期函数--监听页面加载*/ onLoad: function (opt...
  • 那么今天的这篇文章就是介绍微信小程序中如何实现分页加载的功能。 数据来自于后端(lumen带分页) /** * @todo 获取订单列表 * @return mixed */ public function getOrderList(){ $field = ['id','order_no'...
  • 上拉加载(分页加载)  当用户打开一个页面时,假设后台数据量庞大时,一次性地返回所有数据给客户端,页面的打开速度就会有所下降,而且用户只看上面的内容而不需要看后面的内容时,也浪费用户流量,基于优化的...
  • 微信小程序列表页分页加载功能

    千次阅读 2020-04-01 15:07:47
    微信小程序分页加载数据,会做一些下拉加载更多、然后上拉刷新的操作。数据放在一个for循环里去加载,数据源是一个数组对象。在加载下一页数据时,将下一页的数据拼到当前数组后面。 代码如下: wxml代码 <...
  • 微信小程序-如何分页加载数据

    千次阅读 2020-02-19 15:51:49
    小程序通过数据库读取数据一次最多读取20条,云函数一次最多读取100条,所以如果我们要读取更多的数据就要借助分页加载,通过分次的加载数据,然后将每次获取到的数据拼接起来,就可以在页面显示更多的数据。...
  • 【微信小程序】实现分页加载

    千次阅读 2020-08-05 19:24:31
    加载全部.png 二、步骤 1. wxml中 <view class="loading" hidden="{{!searchLoading}}">正在载入更多...</view> <view class="loading" hidden="{{!searchLoadingComplete}}">已加载全部...
  • 作者:TheBeauty,来自51小程序  当用户打开一个页面时,假设后台数据量庞大时,一次性地返回所有数据给客户端,页面的打开速度就会有所下降,而且用户只看上面的内容而不需要看后面的内容时,也浪费用户流量,基于...
  • 上拉加载(分页加载)   当用户打开一个页面时,假设后台数据量庞大时,一次性地返回所有数据给客户端,页面的打开速度就会有所下降,而且用户只看上面的内容而不需要看后面的内容时,也浪费用户流量,基于优化的...
  • <script> export default { data() { return { ... //分页请求数据 getData(){ if(this.haseMore) { uni.showLoading({ title: '加载中...' }) wx.cloud.d

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 59,406
精华内容 23,762
关键字:

小程序分页加载