之前寫的一篇利用setData進行局部渲染的文章，有些朋友可能看的不是很明白，那篇文章寫的可能也有一些問題赛惩，今天我就把那篇文章重新做一個詳細(xì)解說，希望大家都能看的明白趁餐。
看這篇文章的小伙伴肯定是遇到了這些問題喷兼，在一個上拉加載的列表中，想對某一條數(shù)據(jù)進行操作澎怒。但是又不想刷新整個列表褒搔。如果有html的dom操作的話大家都不會覺得有問題阶牍。其實這種雙向數(shù)據(jù)綁定的方法也是能很輕松的解決此類問題。現(xiàn)在就開始吧星瘾。
data:{
List:[],//這里是存放整個列表的數(shù)組
INDEX:1,//這里是存放操作某條數(shù)據(jù)的下標(biāo)
pg:1,//這里是存放操作某條數(shù)據(jù)當(dāng)前所在的頁數(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) {//針對下標(biāo)為0的操作
page = 1
}
//將下標(biāo)和id賦值到變量dataID,INDEX念逞，后面會用到
this.setData({
dataID:e.currentTarget.dataset.id,
INDEX: e.currentTarget.dataset.index
})
this.getWrqList(page, 0)//帶過去的參數(shù)頁數(shù)困食，page是操作的數(shù)據(jù)當(dāng)前所在的頁數(shù)庵楷，0是代表我要局部渲染塘匣，獲取數(shù)據(jù)的時候進行判斷（-1：正常邏輯操作。0：局部渲染）
}
}, "GET");
},
getData:function(pg=this.data.page,ty=-1){//頁數(shù)默認(rèn)是page祈坠，pg只有在操作數(shù)據(jù)的時候才會使用到,ty默認(rèn)等于-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//默認(rèn)關(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>
原版地址
這次我介紹的可能還有不足的地方瘟仿，小伙伴們可以給我留言箱锐，我會補足，希望對大家能有幫助劳较。您也可以加入我的qq群幫助更多需要幫助的小程序開發(fā)者：751741695
