⼩程序点击实现隐藏和点击实现显⽰组件显⽰的⽅法：即是定义组件的表现形式
display: none;
wxml⽂件：
<view >
<button class="hide{{showView?'show':''}}" bindtap="onChangeShowState">{{showView?'隐藏':'显⽰'}}</button>
//？：即表⽰了⼀种选择关系
<button class="hide{{showView?'':'show'}}" bindtap="onChangeShowState">{{showView?'隐藏':'显⽰'}}</button>
</view>
<view class="hide{{showView?'show':''}}">
<text class="text">我是被显⽰被隐藏控件</text>
</view>
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⽅式改变了，在这个地⽅也就可以理解
为有⼀个循环关系，也就是上⼀个组件被后⾯的组件覆盖了
也就实现了⽤户的⼀种交互操作
参考
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论