小程序上拉加载更多数据，分类切换状态等实例

发现很多人对小程序的文章比较好奇，购物车那篇居然占了快三分一的访问量，因此写多篇关于小程序的常用功能。

上拉加载更多其实很简单，关键点只是知道上拉加载是变相的分页加载，然后通过初始化记录值和通过数组来保存加载过的数据（用户看回加载过的数据），同样的每行解析，分类切换的状态显示的想法是慕课网的七月讲师在视频的想法。我这里简化一下。

    data: {begin: 0,goods_list_key:[]//上拉加载更多初始化},goodsBegin: function (catId) {//初始化首页商品展示var that = this;var begin = this.data.begin;//初始化时是零，后面通过上拉会不断叠加//console.log(begin);wx.request({url: 'https://www.xxxxxx/' + begin + '/' + catId,method: 'GET', header: { 'content-type': 'application/json' },success: function (res) {if(res.data ==""){//没有返回数据时的判断wx.showToast({title: '已加载完所有数据',icon: 'success',duration: 2000})//console.log(res.data);/*that.setData({begin:0                    })*/}else{var goods_list_key=that.data.goods_list_key;//通过在小程序的data开数组进行保存，数组是专门处理数据保存的方法goods_list_key=goods_list_key.concat(res.data);//通过concat来合拼所有数组统一为一个数组for(var i=0;i<goods_list_key.length;i++){//对商品的价格进行小数点后两位的保留显示var costPrice= parseFloat(goods_list_key[i].costPrice);costPrice =costPrice.toFixed(2);goods_list_key[i].costPrice=costPrice;}that.setData({//赋值goods_list_key: goods_list_key})}}})},scrolltolower: function () {//上拉加载事件var begin = this.data.begin;//获取记录值，begin += 4;//自加this.setData({//更新记录值begin: begin});var catId = wx.getStorageSync('catId');//获取用户点击的分类缓存this.goodsBegin(catId);//执行加载数据函数},cateId: function (event) {//用户切换分类时，分类点亮的显示效果，商品显示初始化var catId = event.currentTarget.dataset.catId;//获取传过来的分类idwx.setStorageSync('catId', catId);//记录缓存。用于上拉加载事件用var catIds=new Array;//开数组对象catIds[catId]=true;//将获取的分类id记录到数组，并赋予状态this.setData({//将begin设回为0catIds:catIds,goods_list_key:[],//重置商品保存数组begin:0//初始化记录值});//wx.setStorageSync('catIds',catIds);this.goodsBegin(catId);//执行加载数据函数说}

小程序上拉加载更多数据，分类切换状态等实例相关推荐

小程序上拉加载更多数据
本人也是新手进行刚刚接触小程序然后需要一个上拉加载数据的代码,百度看了一下自己做出一点总结希望可以帮助跟我一样入坑的新手首先是页面.wxml代码  <pa ...
微信小程序上拉加载更多数据
data: {curpage: 1,list: null }, onLoad: function() {wx.showLoading();var _this = this;/**初始化list*/_t ...
微信小程序上拉加载更多
微信小程序上拉加载更多无论是微信小程序还是其他前端框架,都会遇到上拉加载(懒加载)和下拉刷新这种问题.其实理清楚什么时候请求数据.请求返回的几种情况,那么做这个懒加载就很简单了. 一.首先,固定一个 ...
小程序上拉加载更多之onReachBottom()
在你没有用scroll-view的上拉加载更多时,可以试试onReachBottom()这种方式实现上拉加载更多! xxx.json里面设置: "enablePullDownRefresh& ...
微信小程序上拉加载更多
来个上拉刷新,解决一下上拉问题.上拉小伙伴除了用微信小程序自带的onReachBottom外,最多用的就是scroll-view的上拉加载啦.但是呢,scroll-view上拉加载会一到底部就不断的触 ...
小程序下拉加载更多数据
1 功能介绍 1.1 简单列表分页功能描述:拖动下拉条,可以加载更多内容 1.1.1 实现步骤 1.1.1.1 配置.json文件 1) 在app.json页面配置&q ...
微信小程序 - 上拉加载更多组件
详情用例看demo,点击下载示例:loadmore 转载于:https://www.cnblogs.com/cisum/p/10430907.html
微信小程序如何实现上拉加载更多数据?
思路:在下拉到页面的时候我们可以进行数据请求,请求到在上次加载完毕的后五条数据 (举个例子),通过page(页码),count(加载数据得条数)与start进行联接,我们可以发现:start:(pag ...
微信小程序上拉加载加载更多数据触底加载点击加载更多数据
开发需求进入页面,加载初始数据,当向上拖动页面至底部,自动加载新的数据,即上拉加载更多数据. 演示 index.wxml  <view wx:for=&q ...

小程序上拉加载更多数据，分类切换状态等实例

小程序上拉加载更多数据，分类切换状态等实例相关推荐

最新文章

热门文章