小程序上拉加载更多数据,分类切换状态等实例
2017-04-25 10:59
323 查看
发现很多人对小程序的文章比较好奇,购物车那篇居然占了快三分一的访问量,因此写多篇关于小程序的常用功能。
上拉加载更多其实很简单,关键点只是知道上拉加载是变相的分页加载,然后通过初始化记录值和通过数组来保存加载过的数据(用户看回加载过的数据),同样的每行解析,分类切换的状态显示的想法是慕课网的七月讲师在视频的想法。我这里简化一下。
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;//获取传过来的分类id
wx.setStorageSync('catId', catId);//记录缓存。用于上拉加载事件用
var catIds=new Array;//开数组对象
catIds[catId]=true;//将获取的分类id记录到数组,并赋予状态
this.setData({//将begin设回为0
catIds:catIds,
goods_list_key:[],//重置商品保存数组
begin:0//初始化记录值
});
//wx.setStorageSync('catIds',catIds);
this.goodsBegin(catId);//执行加载数据函数说
}
上拉加载更多其实很简单,关键点只是知道上拉加载是变相的分页加载,然后通过初始化记录值和通过数组来保存加载过的数据(用户看回加载过的数据),同样的每行解析,分类切换的状态显示的想法是慕课网的七月讲师在视频的想法。我这里简化一下。
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;//获取传过来的分类id
wx.setStorageSync('catId', catId);//记录缓存。用于上拉加载事件用
var catIds=new Array;//开数组对象
catIds[catId]=true;//将获取的分类id记录到数组,并赋予状态
this.setData({//将begin设回为0
catIds:catIds,
goods_list_key:[],//重置商品保存数组
begin:0//初始化记录值
});
//wx.setStorageSync('catIds',catIds);
this.goodsBegin(catId);//执行加载数据函数说
}
相关文章推荐
- RecyclerView实例-实现可下拉刷新上拉加载更多并可切换线性流和瀑布流模式(1)
- 基于zepto的H5/移动端tab切换触摸拖动加载更多数据
- RecyclerView实例-实现可下拉刷新上拉加载更多并可切换线性流和瀑布流模式(1)
- 动手写一个Android数据加载时界面状态切换的开源库
- Android自定义StatusView,数据加载四种状态的切换
- 微信小程序动态的加载数据实例代码
- Fragment切换的时候,保存数据状态(执行onResume),不重新加载
- 基于zepto的H5/移动端tab切换触摸拖动加载更多数据
- [转]微信小程序之加载更多(分页加载)实例 —— 微信小程序实战系列(2)
- 小程序初学者分享第一弹:上拉加载更多数据
- Android数据加载界面状态切换:加载中样式,空数据样式,错误时样式
- 微信小程序之加载更多(分页加载)实例 —— 微信小程序实战系列(2)
- 解决Fragment切换时实例化加载数据问题
- Fragment切换时不会重复创建使数据多次加载即重复实例化
- 优化UI体验:程序启动、页面切换、数据加载、UI响应
- MapGuide开发实例----程序实现切换地图
- C/C++程序内存中数据存储区分类
- WinForm程序虚拟分页(实时加载数据)
- C/C++程序内存中数据存储区分类
- 动态地往datagirdview中添加数据,当所添加的数据超过datagridview的显示范围后,滚动条就无法显示,程序出现假死状态,(scrollbars=both)