微信小程序之數據雙向綁定與數據操作，點擊列表的item帶參數跳轉界面 ...

發布時間：2018-04-18 10:31 所屬欄目：小程序開發教程

分享者：道之道編程路，來自原文地址

一：數據雙向綁定與數據操作

數據雙向綁定是指js部分數據發生變化是html部分的數據也會發生變化，當然html部分數據發生變化js部分數據也會發生變化，從而使界面很方便的實現動態數據顯示，一般擁有數據雙向綁定的前端框架都為mvvm結構。數據雙向綁定是個好東西，an1 an2 vue 也都有數據雙向綁定的機制，而且基本都差不多，抄來抄去嘛！！下面以一個列表為例子來說下數據雙向綁定及數據的操作。

1.把要進行數據雙向綁定的屬性放在page的data里，然后在html里使用{{屬性名}}即可進行數據顯示；
2.that.setData({ synctable:res.data.data.list }); 使用setData方法給synctable:res賦值并更新界面相應數據。
3.for(var i=0;that.data.synctable.length>i;i++){ that.data.synctable[i].top=i*40; } 使用 that.data.synctable取到data里的synctable值然后添加上top新字段，然后使用style="top:{{item.top}}px;" 即可在js動態控制樣式屬性（使用這種方法控制樣式只是為了實現拖拽列表，一般并不這樣控制樣式）

二：點擊列表的item帶參數跳轉界面

1.在js文件里寫個界面跳轉的事件處理函數gotableinfo，var index = parseInt(e.currentTarget.dataset.index); 為獲取當前點擊列表的下腳標，wx.navigateTo為小程序提供的界面路由跳轉的方法，參數url為要跳轉頁面的連接（?后面為連接攜帶的參數）

2.data-index="{{index}}"為標記列表的下腳標，index的來源與wx:for="{{synctable}}"的列表渲染有關默認列表下角標為index 列表內容為item