微信小程序動態添加多個view組件

微信小程序動態添加多個view組件和網站動態添加多個div的方式有點不一樣。

網站動態添加多個div的方式可參考鏈接：https://blog.csdn.net/Charles_Tian/article/details/78762101

微信小程序動態添加多個view組件可參考鏈接：https://developers.weixin.qq.com/miniprogram/dev/api/ui-navigate.html?search-input=wx%3Afor

下面介紹微信小程序動態添加多個view組件的具體實例：

wxml代碼如下：

1.  
   <view class='container'>
2.  
   <text class='Title'>{{nickName}} 的學習清單:</text>
3.  
   <view class='noDataView' hidden='{{noDataViewHidden}}'>{{noData}}</view>
4.  
   <view class='studyList' wx:for="{{items}}" wx:key="{{index}}" wx:for-index="index" wx:for-item="items">
5.  
   <view class='itemTitle'>條目{{index+1}}：{{items.content}}</view>
6.  
   <view class='itemAnswer'>翻譯答案：{{items.answer}}</view>
7.  
   <view class='myAnswer'>我的答案：{{myAnswer}}</view>
8.  
   <view class='itemDescription'>條目釋義：{{items.description}}</view>
9.  
   </view>
10.  
    < /view

上述數據要想顯示，或者view組件動態被添加，首先的條件是items必須能取到值，且items的數據類型為數組；

這里再來解釋下四個wx:for

wx:for="{{items}}",意思是遍歷items這個數組，也就是你從后台獲取的數據，然后存進setData({ items: items })中

wx:key="{{index}}"這個方法可寫可不寫，對小程序沒影響，只是它一般和wx:for連着一起用的。若是不用wx:key控制台會顯示一個warning，提示用wx:key會提高性能，所以為了性能，最好還是把wx:key添加進去

wx:for-index="index"這個方法的意思是可指定數組當前下標的變量名，個人覺得它就是用來顯示數組索引的。比如在上述代碼示例中，有條目{{index+1}}，解析數據之后，顯示依次為條目1，條目2，條目3....

wx:for-item="自己隨便取名"這個方法比較實用些，意思是可指定數組當前元素的變量名。怎么理解呢？它的作用就是把遍歷數組得到的每一條數據存儲在一個變量名上（意思就是上述items的別名），就比如上述代碼示例中，wx:for-item="items"，就是把要遍歷的items數據賦值給items了，所以下面調用數據的時候用items.xxx；如果你把wx:for-item="wx"，那么下面調用數據的時候，應該是wx.content、wx.answer等

js代碼如下：

1.  
   onLoad: function () {
2.  
   var items = wx.getStorageSync("items")//將items首先要獲取到
3.  
   if(items == '' || items == null){
4.  
   wx.showToast({
5.  
   title: '最近無學習記錄噢',
6.  
   icon: 'none'
7.  
   })
8.  
   this.setData({
9.  
   noDataViewHidden: false
10.  
    })
11.  
    return
12.  
    } else{
13.  
    this.setData({
14.  
    items: items,//然后將items的數據存儲
15.  
    noDataViewHidden: true
16.  
    })
17.  
    }
18.  
    },

這是發送請求返回的數據格式，如下圖：