精华内容
下载资源
问答
  • 整理文档,搜刮出一个微信小程序分页加载的代码,稍微整理精简一下做下分享。 分页加载功能大家遇到的应该会经常遇到,应用场景也很多,例如微博,QQ,微信朋友圈以及新闻类应用,都会有分页加载的功能,这不仅节省...
  • 微信小程序分页加载

    2021-03-29 18:06:18
    那么今天的这篇文章就是介绍微信小程序中如何实现分页加载的功能。照例先上源码及效果图。 源码传送门   (此图片来源于网络,如有侵权,请联系删除! ) music.gif   要实现这样的功能,一般需要在请求数据时加入...
  • 来自授权地址上拉加载(分页加载)当用户打开一个页面时,假设后台数据量庞大时,一次性地返回所有数据给客户端,页面的打开速度就会有所下降,而且用户只看上面的内容而不需要看后面的内容时 ...       加载更多...
  • 微信小程序分页加载数据 一般小程序做分页加载数据,会做一些下拉加载更多、然后上拉刷新的操作。数据放在一个for循环里去加载,数据源是一个数组对象。在加载下一页数据时,将下一页的数据拼到当前数组后面。这样...
  • 分页加载数据 const utils = require('../../utils/util.js'); Page({ data: { list:[], isLoadInterface: false, nomore: 0, page:1, totalpage:0,//总页数 totalcount:0,//总行数 condition:null }, ...

    此代码为后端数据返回  总页数的情况。

    核心思路:

    1、在onLoad中调用,如果有参数则获取上个页面传递的参数(没有页面传参请忽略)

    2、page里面 定义list空数组,获取数据后与list空数组合并

    3、因为获取数据为异步操作,为了避免在第一次数据未返回,而又使重复调用api的问题,设置个标记isLoadInterface

    4、utils.requestunion 是包装的wx.request通用访问方法,因涉及到公司的业务这里就不提供了。

    5、nextDataPage 为加载下一页数据的方法,绑定前端页面调用。

    const utils = require('../../utils/util.js'); 
    
    Page({
      data: {
        list:[],
        isLoadInterface: false,
        nomore: 0,
        page:1,
        totalpage:0,//总页数
        totalcount:0,//总行数
        condition:null
      },
    
      /**
       * 生命周期函数--监听页面加载
       */
      onLoad: function (options) {
       
        var obj=JSON.parse(options.data);
        this.setData({
          condition:obj
        })
    
        this.getList();
      },
    //获取数据
      getList: function() {
        let that=this;
        var lastList = that.data.list;
        var pagestr = that.data.page;
        var conditionobj=that.data.condition;
        console.log('查询条件:第'+pagestr+'页');
        utils.requestunion({
          url: '****/****',
          method: 'POST',
          data: {
            'page': pagestr,
            'customid': conditionobj.companyid,
            'customname': conditionobj.companyname,
            'goodsid': conditionobj.goodsid,
            'datestr':conditionobj.date
          }})
          .then((res) => {     
            var obj=res.data;
            console.log(obj)       
            if(obj.code==0){
            //debugger; 
              var newList = lastList.concat(obj.data.sadoclist);//concat函数为合并数组
                that.setData({
                    list:newList,
                    totalcount:obj.data.totalcount,
                    totalpage:obj.data.totalpage,
                    isLoadInterface: false
                })          
            }
            else{
              utils.alert(obj,that);
              that.setData({
                                isLoadInterface: false
                            })
            }       
          })
          .catch((res) => { 
            var obj=res.data;
            utils.alerterror(obj.msg,that);
            console.log('catch'+res)
            that.setData({
              isLoadInterface: false
                })
           })
      },
      // 加载下一页数据
      nextDataPage: function () {
        let that=this;
        
        if (!that.data.isLoadInterface) {//防止在接口未执行完再次调用接口
          if (that.data.page * 1 + 1 <= that.data.totalpage) {
            that.setData({
              isLoadInterface: true,
              page: that.data.page * 1 + 1
            })
            console.log('加载第'+that.data.page+'页');
            that.getList();
          } else {
            //如果大于总页数停止请求数据
            that.setData({
              nomore: 1
            })
            console.log("没有更多了");
          }      
        }
      }
    
    })

     页面用的是Vant Weapp样式,大家也可以自己写

    <view class="container">
    <scroll-view class='dataContainer' scroll-y="{{true}}" bindscrolltolower="nextDataPage">
         <block wx:for="{{list}}" wx:key="index" wx:for-item="item">
        <view  data-obj='{{item}}' data-index='{{index}}'>
    
          <van-cell-group title="销售总单ID:{{item.SALESID}}">
              <van-cell icon="shop-o" title="{{item.CUSTOMID}}{{item.CUSTOMNAME}}" value="" />
              <van-cell title="总金额" value="{{item.TOTAL}}" />
              <van-cell title="业务日期" value="{{item.CREDATE}}" />       
            </van-cell-group>
        </view>
         </block>
          <view class="morelp" wx:if="{{nomore > 0 }}">
            <van-divider contentPosition="center">我是有底线的</van-divider>
          </view>
          <view class='bottomline' wx:if="{{list.length == 0}}" >
            <van-empty image="search" description="没有查询到任何数据" />
          </view>
    </scroll-view>
    <van-dialog id="van-dialog" />
    </view>
    

    希望能帮到大家,觉得有用可以点赞

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

    千次阅读 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: \'没有更多数据\',

    })

    }

    },

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

    该资讯来源于 即速学院 ,更多开发教程请关注小程序开发教程
    展开全文
  • 原文链接: ... 内容: 我们在开发小程序时,一个列表里难免会有很多条数据,比如我们一个列表有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函数里面给两个变量重新赋值

     

     

    展开全文
  • 分页加载功能大家遇到的应该会经常遇到,应用场景也...那么今天的这篇文章就是介绍微信小程序中如何实现分页加载的功能。 数据来自于后端(lumen带分页) /** * @todo 获取订单列表 * @return mixed */ publ...

    分页加载功能大家遇到的应该会经常遇到,应用场景也很多,例如微博,QQ,微信朋友圈以及新闻类应用,都会有分页加载的功能,这不仅节省了我们用户的流量,还提升了用户体验。那么今天的这篇文章就是介绍微信小程序中如何实现分页加载的功能。

    数据来自于后端(lumen带分页)

        /**
         * @todo 获取订单列表
         * @return mixed
         */
        public function getOrderList(){
            $field = ['id','order_no','name','created_at','desc','order_status','pay_status'];
            $orders = Order::where('uid',$this->user->id)->orderBy('created_at', 'desc')->paginate(5, $field);
            return $orders;
        }

    数据

    ..wxjs

    const util = require('../../utils/util.js');
    Page({
    	/**
    	 * 页面的初始数据
    	 */
      data: {
        // 前台显示list
        showlist: [],
        // 初始化page
        page: 2,
        height:600,
      },
      onLoad: function (options) {
        var self = this;
        // 请求后台 
        util.ajax('order/get' , '', 'GET', res => {
            self.setData({
              showlist: res.data,
            })
        })
      },
      /**
     * 页面上拉触底事件的处理函数
     */
      upcroll: function (e) {
        var self = this;
        var page = self.data.page++;
        // 请求后台,获取下一页的数据。
        util.ajax('order/get?page=' + page, '', 'GET', res => {
          self.setData({
            //向页面已有数据后面加数据
            showlist: self.data.showlist.concat(res.data),
          })
          if (res.data=='') {
            wx.showToast({
              title: '没有更多数据',
            })
          }
        })
      }
    })

    ..wxml

    <view class='warp'>
    <view class='container' >
    	<scroll-view scroll-y='true' style="height:{{height}}px"  bindscrolltolower="upcroll" lower-threshold="20" >
      	<view class='alllist' wx:for="{{showlist}}" wx:for-item="j" wx:key="key" name="info_border">
    			<view class='list'>
    				<view class='img'>
    					<image src='../../imges/imgicon/icon2.png' class='img'></image>
    					<view class='text'>{{j.name}}</view>
    				</view>
    				<view class='message'>
    					<view class='te'><text class='text'>日期:</text><text class='text cor'>{{j.created_at}}</text></view>
    					<view class='te text on'><text class='text'>描述:</text>{{j.desc}}</view>
    				</view>
    			</view>
    			<view class='text statsin'>
    			<view class='a left'>
    				<navigator url='#' class='waiting' >待接单</navigator>
    			</view>
    				<view class='a'>
    				<navigator url='#' class='okorder'>已完成</navigator>
    				</view>
    			</view>
    		</view>
      </scroll-view>
    	</view>	
    </view>

     

    结果:

    展开全文
  • 主要介绍了微信小程序实现上拉加载功能,结合实例形式分析了微信小程序加载更多数据、触底加载或点击加载更多数据的相关实现技巧与操作注意事项,需要的朋友可以参考下
  • 微信小程序分页加载 上拉加载 /** 页面的初始数据*/ data: { /*分页中显示数据集合*/ list: [], /* 当前页 */ pageNo: 1, /* 每页显示商品数 */ pageSize: 10, /*是否最后一页*/ alreadyToEnd:...
  • 所以这一节,我们来讲讲小程序分页加载数据的实现。 老规矩,先看效果图 可以看到我们每页显示10条数据,当滑动到底部时,会加载第二页的数据,再往下滑动,就加载第三页的数据。由于我们一共21条数据,所以第三页...
  • // 计算当前共加载了多少条数据,来证明这种方式可以加载更多数据 var totalDataCount = that.data.totalDataCount; totalDataCount = totalDataCount + list.length; that.setData({ ["dataArray[" + page + "]"]:...
  • 小程序通过数据库读取数据一次最多读取20条,云函数一次最多读取100条,所以如果我们要读取更多的数据就要借助分页加载,通过分次的加载数据,然后将每次获取到的数据拼接起来,就可以在页面显示更多的数据。...
  • 上拉加载(分页加载)   当用户打开一个页面时,假设后台数据量庞大时,一次性地返回所有数据给客户端,页面的打开速度就会有所下降,而且用户只看上面的内容而不需要看后面的内容时,也浪费用户流量,基于优化的...
  • 上拉加载(分页加载)  当用户打开一个页面时,假设后台数据量庞大时,一次性地返回所有数据给客户端,页面的打开速度就会有所下降,而且用户只看上面的内容而不需要看后面的内容时,也浪费用户流量,基于优化的...
  • 微信小程序列表页分页加载功能

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

    2016-12-22 15:46:47
    微信小程序tab分页demo,目前使用固定数据展示,具体请结合api请求服务器数据
  • 微信小程序分页加载

    千次阅读 2018-05-17 18:19:33
    代码示例 data: {  baseUrl: getApp().data.baseUrl, /... currentPage: 1, // 设置加载的第几次,默认是第一次  pageSize: 2, // 每页条数  hasMoreData: true, }, // 获取工程案例分页集合 getCaseD...
  • 基于thinkphp5的微信小程序代码

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 5,535
精华内容 2,214
热门标签
关键字:

微信小程序分页加载

微信小程序 订阅