微信小程序动态添加多个view组件

秒速五厘米 2021-09-15 10:40 1182阅读 0赞

微信小程序动态添加多个view组件和网站动态添加多个div的方式有点不一样。

网站动态添加多个div的方式可参考链接：[https://blog.csdn.net/Charles\_Tian/article/details/78762101][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][https_developers.weixin.qq.com_miniprogram_dev_api_ui-navigate.html_search-input_wx_3Afor]

下面介绍微信小程序动态添加多个view组件的具体实例：

wxml代码如下：

<view class='container'>
      <text class='Title'>{
       {nickName}} 的学习清单:</text>
      <view class='noDataView' hidden='{
       {noDataViewHidden}}'>{
       {noData}}</view>
      <view class='studyList' wx:for="{
       {items}}" wx:key="{
       {index}}" wx:for-index="index" wx:for-item="items"> 
        <view class='itemTitle'>条目{
       {index+1}}：{
       {items.content}}</view>
        <view class='itemAnswer'>翻译答案：{
       {items.answer}}</view>
        <view class='myAnswer'>我的答案：{
       {myAnswer}}</view>
        <view class='itemDescription'>条目释义：{
       {items.description}}</view>
      </view>
    </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代码如下：

onLoad: function () {
        var items = wx.getStorageSync("items")//将items首先要获取到
        if(items == '' || items == null){
          wx.showToast({
            title: '最近无学习记录噢',
            icon: 'none'
          })
          this.setData({
            noDataViewHidden: false
          })
          return
        }else{
          this.setData({
            items: items,//然后将items的数据存储
            noDataViewHidden: true
          })
        }    
      },

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

![20180521085253199][]

[https_blog.csdn.net_Charles_Tian_article_details_78762101]: https://blog.csdn.net/Charles_Tian/article/details/78762101
[https_developers.weixin.qq.com_miniprogram_dev_api_ui-navigate.html_search-input_wx_3Afor]: https://developers.weixin.qq.com/miniprogram/dev/api/ui-navigate.html?search-input=wx%3Afor
[20180521085253199]: /images/20210522/cdd1b5b8fc4248598433360210c9286e.png