【微信小程序】动态添加view

【微信小程序】动态添加view

背景：想做一个点击按钮添加分类的功能，涉及到动态的添加view。

先上效果图

关键：
1、使用wx:for指令基于一个数组来渲染列表。
2、使用this.setData来更新数据。 微信小程序是单向数据流 Model ----> View，如果我们写this.data.typeList.push('新的')，那么只有data里的typeList会更新，视图并不会更新。

同时微信小程序没有 DOM 对象，一切基于组件化。所以不能通过添加dom来实现动态添加view。

js部分：

  data: {
    typeList:['鲜虾','龙眼','调料','带鱼','龙眼','调料','带鱼','带鱼','龙眼','调料','带鱼']
  },
  addType(){
    let list = this.data.typeList
    list.push('新的')
    this.setData({
      typeList:list
    })
  },

wxml部分：

<view class="container" value="{{typeList}}">
  <view wx:for="{{typeList}}" wx:for-item="type" wx:key="type" class="types">{{type}}</view>
</view>

wxss部分：

.container{
  display: flex;
  flex-flow: row wrap;
  justify-content: left;
  padding: 0;
}
.types{
  flex-basis: 18%;
  height: 3.5rem;
  background-color: #99CCCC;
  margin: 0.3rem 0.2rem;
  text-align: center;
  line-height: 3.5rem;
  color: white;
  font-weight: bold;
}