微信小程序点击实现隐藏和点击实现显示

• 组件显示的方法：即是定义组件的表现形式

  display: none;

wxml文件：

{{showView?'隐藏':'显示'}}
//？:即表示了一种选择关系
{{showView?'隐藏':'显示'}}


我是被显示被隐藏控件

wxss文件

.hide{
display: none;
}
.show{
display: block;
}

js文件

Page({
data: {
showView: true
},
onLoad: function (options) {
// 生命周期函数--监听页面加载
showView: (options.showView == "true" ? true : false)
}
, onChangeShowState: function () {
var that = this;
that.setData({
showView: (!that.data.showView)
})
}
})

注意理解其中的选择关系，我这里有两个botton组件，但是显示的时候实际可以看到的只有一个
因为当点击的时候，另一个组件被隐藏了，也就是display方式改变了，在这个地方也就可以理解
为有一个循环关系，也就是上一个组件被后面的组件覆盖了
也就实现了用户的一种交互操作

参考

(4条消息) 微信小程序点击实现隐藏和点击实现显示_zero_1996的博客-CSDN博客_微信小程序点击显示隐藏