网友真实露脸自拍10p,成人国产精品秘?久久久按摩,国产精品久久久久久无码不卡,成人免费区一区二区三区

小程序模板網(wǎng)

微信小程序利用setData對(duì)列表進(jìn)行局部刷新超詳細(xì)

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


易優(yōu)小程序(企業(yè)版)+靈活api+前后代碼開源 碼云倉(cāng)庫(kù):starfork
本文地址:http://www.xiuhaier.com/wxmini/doc/course/25022.html 復(fù)制鏈接 如需定制請(qǐng)聯(lián)系易優(yōu)客服咨詢:800182392 點(diǎn)擊咨詢
QQ在線咨詢
AI智能客服 ×