【微信小程序】动态添加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部分：文章来源：https://www.toymoban.com/news/detail-758852.html
<view class="container" value="{{typeList}}">
<view wx:for="{{typeList}}" wx:for-item="type" wx:key="type" class="types">{{type}}</view>
</view>
wxss部分：文章来源地址https://www.toymoban.com/news/detail-758852.html
.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;
}
到了这里，关于【微信小程序】动态添加view的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
