微信小程式入門到實戰（三）

icessun發表於2019-03-04
微信小程式

資料繫結(二）

上一遍文章的結尾介紹了小程式簡單的資料繫結方式，但是核心要知道：資料繫結，都是借用data這個屬性作為一箇中轉地，伺服器上面獲取的資料，經過處理，使用this.setData()方法繫結到data屬性中的一個變數，在通過這個變數繫結到頁面上面。

接下來說一下資料繫結的其他用途：

標籤的顯隱

前面說到，小程式裡面沒有dom的概念，就不能通過標籤的display和visibility屬性來控制，那怎麼控制呢？

在小程式裡面，對於一個標籤的屬性值是true / false的時候，在繫結資料的時候，就會對其中的資料進行布林值的比較，有值就為真，繫結的資料是false或者是空的時候就是假；

 <swiper  wx:if=`{{date}}`  catchtap=`onSwiperTab` indicator-dots=`{{date}}` vertical=`{{false}}` autoplay=`{{false}}` interval=`5000`>
    <swiper-item>
      <image src=`/images/post/bl.png` data-postid=`3`></image>
    </swiper-item>
    <swiper-item>
      <image src=`/images/post/xiaolong.jpg` data-postid=`2`></image>
    </swiper-item>
  </swiper>
複製程式碼

就拿前面說的輪播元件來說，當我在對應的頁面data屬性裡面設定date的值的時候，只要不為空或者false，那麼swiper中的兩個通過繫結資料的方式設定屬性值的屬性，其屬性值就都會被解析為true。那個直接設定false的autoplay屬性就不會自動輪播。

注意那個wx:if=`{{date}} `，才是控制標籤顯示和隱藏的關鍵。如果date是真，那麼wx:if=`{{date}} `結果為真，就會顯示輪播元件，如果date是假，那麼wx:if=`{{date}} `結果為假，就會隱藏輪播元件

圖片的切換

通常我們做圖片的切換，一般是通過改變圖片的路徑來實現；在小程式裡面可以使用if else動態的控制圖片的切換。

類似上面說的控制標籤的顯示和隱藏，也要使用到資料繫結：

 <view class=`circle-img`>
      <image catchtap=`onCollectionTap` wx:if=`{{collected}}` src=`/images/icon/collection.png`></image>
      <image catchtap=`onCollectionTap` wx:else src=`/images/icon/collection-anti.png`></image>
      <image catchtap=`onShareTap` class=`share-img` src=`/images/icon/share.png`></image>
 </view>
複製程式碼

上面程式碼裡面，只顯示兩張圖片，通過collected這個從伺服器傳過來的標識，來判斷是顯示wx:if=`ture`的圖片，還是顯示wx:else的圖片，兩者選其一，很方便的控制了圖片的切換。

資料的迴圈

通常編寫頁面的時候，想把相同的區域呈現多次，又不想編寫冗餘的程式碼，小程式裡面通過一個屬性：wx:for=`{{資料來源}}`

<view wx:for=`{{datesArry}}` wx:for-item=`item` wx:for-index=`idx`>
  <view catch:tap=`onBind`>{{item.date}}</view>
  <view catch:tap=`onBind`>{{item.title}}</view>
  <view catch:tap=`onBind`>{{item.content}}</view>
</view>

// Page頁面中的資料來源
    onLoad: function (options) {
    var datasArr = [{
      date: `2018/2/3`,
      title: `神盾局特工1`,
      content: `神盾局特工這個禮拜六停播，說好的不冬歇的呢？`
    }, {
      date: `2018/2/3`,
      title: `神盾局特工2`,
      content: `神盾局特工科學組CP要結婚啦!`
    }]
    this.setData({ datesArry: datasArr })
    // this.setData(datasArr)   setData 方法接收的是一個物件，而不是陣列
  }
複製程式碼

我們把要呈現多次的區塊，用一個標籤包裹view / block，然後在其上面作用於wx:for屬性，接收一個陣列或者集合的資料，datesArry就是要迴圈的資料陣列，wx:for-item=`item` wx:for-index=`idx`中的item是被迴圈的子物件，idx是對應子物件在資料陣列裡面的索引位置；這兩個值都預設是有的，即使不寫。

前面也說道過，this.setData()方法是把裡面接收到的資料，繫結到Page下面的data屬性裡面，然後在展示在頁面中，小程式的資料繫結，都是從Page中的data屬性中讀取資料去完成資料繫結。這個讀取data屬性中的資料去繫結到頁面的動作是發生在onLoad事件之後的。

既然這麼說的話，那麼可不可以直接給data物件身上直接新增屬性，並且直接賦值：this.data.datesArry=datasArr，這樣是繫結不了資料到頁面上，雖然不會報錯，小程式的前期版本里面是可以這樣繫結資料的。所以都建議使用this.setData()方法去主動更新資料。

要是資料是存放在其他的資料夾下面，應該怎麼樣讀取呢？在資料檔案中，通過丟擲一個資料出口，來通過其他檔案進行訪問：

module.exports = {
    postList: dataBase  // 資料陣列的名字  
}
複製程式碼

在要使用資料的js檔案下，引入要使用資料的路徑，應該在page外面引入：

var postsData = require(`資料檔案所在的路徑`);
複製程式碼

注意這個require中的路徑名是相對路徑，不能是絕對路徑。

相關文章