使用上一篇中的条件渲染框架。
index.js:
//index.js
//获取应用实例
const app = getApp()
Page({
data: {
boolean: false,
arr: ["青青园中葵", "朝露待日晞", "阳春布德泽", "万物生光辉"]
},
//事件处理函数
EventHandle: function(){
var bool = this.data.boolean;
this.setData({
boolean: !bool
})
console.log("boolean:" + this.data.boolean)
},
bindViewTap: function() {
wx.navigateTo({
url: '../logs/logs'
})
},
onLoad: function () {
}
})
index.wxml:
<!--index.wxml-->
<view class="container">
<view bindtap='EventHandle'>点击</view>
<block wx:if="{{boolean==true}}">
<block wx:for="{{arr}}">
<view class="bg_black">{{item}}</view>
</block>
</block>
<block wx:elif="{{boolean==false}}">
<view class='bg_red'>哎呀呀</view>
</block>
</view>
index.wxss:
/**index.wxss**/
.bg_black{
height: 40px;
background-color: rgb(157, 231, 185)
}
.bg_red{
height: 200px;
background-color: rgb(252, 182, 182)
}