1. 程式人生 > >setData-小程式開發小技巧

setData-小程式開發小技巧

改變data的值,頁面的資料也就可以相應改變,那怎麼改變呢?setData可以data的資料從而改變頁面的值

例如:

  • index.js
data: {
    name:'gg',
    imgUrls: [
        'http://html.001php.com/Public/Home/img/H5.png',
        'http://html.001php.com/Public/Home/img/H5.png',
        'http://html.001php.com/Public/Home/img/H5.png'
    ]
},
  • index.wxml
<view class="box">
  {{name}}
</view>   
  • 頁面顯示:
    頁面截圖

點選 box 改變名字,首先先給 box 繫結點選事件 bindtap="change_name",在 change_name 函式裡面 使用setData改變 name 的值

//改名字函式
change_name:function(){
  this.setData({
      name: 'gg666'
  });
},

點選 gg 後,頁面截圖

改變data陣列中的某個值:
- 為了方便演示,使用 onshow 方法改變他的值
- onShow: 頁面顯示(每次開啟頁面都會呼叫一次。)
- index.js

// onShow: 頁面顯示(每次開啟頁面都會呼叫一次。)
onShow:function(){
  console.log(this.data.imgUrls);
  var str = "imgUrls[1]"
  this.setData({
    [str]: 'http://html.001php.com/Public/Home/img/HB.png'
  })
  console.log(this.data.imgUrls);
  return false;
},

資料列印截圖