微信小程序动态添加多个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.  
    },

这是发送请求返回的数据格式，如下图：