微信小程序利用setData對列表進行局部刷新超詳細
發(fā)布時間：2018-12-15 09:44 所屬欄目：小程序開發(fā)教程
之前寫的一篇利用setData進行局部渲染的文章，有些朋友可能看的不是很明白，那篇文章寫的可能也有一些問題，今天我就把那篇文章重新做一個詳細解說，希望大家都能看的明白。
看這篇文章的小伙伴肯定是遇到了這些問題，在一個上拉加載的列表中，想對某一條數(shù)據(jù)進行操作。但是又不想刷新整個列表。如果有html的dom操作的話大家都不會覺得有問題。其實這種雙向數(shù)據(jù)綁定的方法也是能很輕松的解決此類問題。現(xiàn)在就開始吧。
data:{
List:[],//這里是存放整個列表的數(shù)組
INDEX:1,//這里是存放操作某條數(shù)據(jù)的下標
pg:1,//這里是存放操作某條數(shù)據(jù)當前所在的頁數(shù)
page:1,//這個是上拉加載的頁數(shù)
dataID:-1,//這個是存放操作某條數(shù)據(jù)的id，用來匹配數(shù)據(jù)。
offon:true//這個是上拉加載的開關(guān)
}
// 操作刪除，點贊
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) {//請求成功，具體參考服務(wù)器返回的狀態(tài)碼
var page = Math.ceil(e.currentTarget.dataset.index / 15) //取頁數(shù) 向上取整
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)//帶過去的參數(shù)頁數(shù)，page是操作的數(shù)據(jù)當前所在的頁數(shù)，0是代表我要局部渲染，獲取數(shù)據(jù)的時候進行判斷（-1：正常邏輯操作。0：局部渲染）
}
}, "GET");
},
getData:function(pg=this.data.page,ty=-1){//頁數(shù)默認是page，pg只有在操作數(shù)據(jù)的時候才會使用到,ty默認等于-1，否則就是操作某條數(shù)據(jù)需要進行局部渲染操作。
service_common.fetchData(service_common.getUrl("getDataList"), {//這里是封裝好的請求，參考小程序wx.request({})
page: pg
}, (res) => {
if (res.data.code == 0) {//數(shù)據(jù)請求成功，具體參考服務(wù)器返回的狀態(tài)碼
if (ty == -1) {//-1正常邏輯操作
if (this.data.page == 1) {//如果是第一頁，直接替換掉List
this.setData({
List: res.data.data
})
} else {
//如果是1+頁需要用concat進行數(shù)組合并，組成新的數(shù)組，賦值給List
if (res.data.data.length == 0) {
if (this.data.List.length >= 10) {//為了防止只有幾條數(shù)據(jù)就會彈出來這個提示，所以建議List數(shù)據(jù)大于10條才彈出
wx.showToast({
title: '數(shù)據(jù)加載完成',
})
}
} else {
//上拉加載后數(shù)組合并
this.data.List= this.data.List.concat(res.data.data)
this.setData({
List: this.data.List,
offon:true
})
}
}
} else {
//0走操作單條數(shù)據(jù)，需要局部渲染操作
for (var i in res.data.data) {//循環(huán)獲取到對應(yīng)頁數(shù)的數(shù)據(jù)，循環(huán)查找相對應(yīng)id的數(shù)據(jù)，這條數(shù)據(jù)就是最新的，
if (res.data.data[i].id == this.data.dataID) {
//res.data.data[i]就是最新獲取的數(shù)據(jù)，替換掉原來List[index]的數(shù)據(jù)
this.setData({
[`demandList[${this.data.INDEX}]`]: res.data.data[i]
})
//結(jié)束
return
}
}
}
}
}, "GET");
},
// 觸底操作
onReachBottom: function() {
if (this.data.offon){//是否還可以下拉刷新
this.data.offon=false//默認關(guān)閉下拉刷新，請求成功后自動開啟
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>
|
