微信小程序利用setData对列表进行局部刷新超详细
发布时间：2018-12-15 09:44 所属栏目：小程序开发教程
之前写的一篇利用setData进行局部渲染的文章，有些朋友可能看的不是很明白，那篇文章写的可能也有一些问题，今天我就把那篇文章重新做一个详细解说，希望大家都能看的明白。
看这篇文章的小伙伴肯定是遇到了这些问题，在一个上拉加载的列表中，想对某一条数据进行操作。但是又不想刷新整个列表。如果有html的dom操作的话大家都不会觉得有问题。其实这种双向数据绑定的方法也是能很轻松的解决此类问题。现在就开始吧。
data:{
List:[],//这里是存放整个列表的数组
INDEX:1,//这里是存放操作某条数据的下标
pg:1,//这里是存放操作某条数据当前所在的页数
page:1,//这个是上拉加载的页数
dataID:-1,//这个是存放操作某条数据的id，用来匹配数据。
offon:true//这个是上拉加载的开关
}
// 操作删除，点赞
setLike: function(e) {
//wxml中传值data-index data-id
service_common.fetchData(service_common.getUrl("Love"), {////这里是封装好的请求，参考小程序wx.request({})
id: e.currentTarget.dataset.id//点赞哪一条
}, (res) => {
if (res.data.code == 0) {//请求成功，具体参考服务器返回的状态码
var page = Math.ceil(e.currentTarget.dataset.index / 15) //取页数 向上取整
if (page == 0) {//针对下标为0的操作
page = 1
}
//将下标和id赋值到变量dataID,INDEX，后面会用到
this.setData({
dataID:e.currentTarget.dataset.id,
INDEX: e.currentTarget.dataset.index
})
this.getWrqList(page, 0)//带过去的参数页数，page是操作的数据当前所在的页数，0是代表我要局部渲染，获取数据的时候进行判断（-1：正常逻辑操作。0：局部渲染）
}
}, "GET");
},
getData:function(pg=this.data.page,ty=-1){//页数默认是page，pg只有在操作数据的时候才会使用到,ty默认等于-1，否则就是操作某条数据需要进行局部渲染操作。
service_common.fetchData(service_common.getUrl("getDataList"), {//这里是封装好的请求，参考小程序wx.request({})
page: pg
}, (res) => {
if (res.data.code == 0) {//数据请求成功，具体参考服务器返回的状态码
if (ty == -1) {//-1正常逻辑操作
if (this.data.page == 1) {//如果是第一页，直接替换掉List
this.setData({
List: res.data.data
})
} else {
//如果是1+页需要用concat进行数组合并，组成新的数组，赋值给List
if (res.data.data.length == 0) {
if (this.data.List.length >= 10) {//为了防止只有几条数据就会弹出来这个提示，所以建议List数据大于10条才弹出
wx.showToast({
title: '数据加载完成',
})
}
} else {
//上拉加载后数组合并
this.data.List= this.data.List.concat(res.data.data)
this.setData({
List: this.data.List,
offon:true
})
}
}
} else {
//0走操作单条数据，需要局部渲染操作
for (var i in res.data.data) {//循环获取到对应页数的数据，循环查找相对应id的数据，这条数据就是最新的，
if (res.data.data[i].id == this.data.dataID) {
//res.data.data[i]就是最新获取的数据，替换掉原来List[index]的数据
this.setData({
[`demandList[${this.data.INDEX}]`]: res.data.data[i]
})
//结束
return
}
}
}
}
}, "GET");
},
// 触底操作
onReachBottom: function() {
if (this.data.offon){//是否还可以下拉刷新
this.data.offon=false//默认关闭下拉刷新，请求成功后自动开启
this.data.page += 1
this.setData({
page: this.data.page,
offon: this.data.offon
})
this.getData()
},
|
下面给一下wxml的简易代码
<image src="/image/like.png" bindtap='setLike' data-index="{{index}}" data-id="{{item.id}}"></image>
|
