自己搞了半天搞了个半成品,后来在网友的帮助下改正了,看效果
wxml代码如下:
<view class='weui-panel__bd'>
<view class='weui-media-box weui-media-box_appmsg'>
<view class="navView" bindtap="tigger" data-num="1">1:网络</view>
<view class="classname {{uhide==1?'':'hidden'}}">
2222222
</view>
<view class="navView" bindtap="tigger" data-num="2">2:学校</view>
<view class="classname {{uhide==2?'':'hidden'}}">
333
</view>
<view class="navView" bindtap="tigger" data-num="3">3:医院</view>
<view class="classname {{uhide==3?'':'hidden'}}">
4444
</view>
<view class="navView" bindtap="tigger" data-num="4">4:商场</view>
<view class="classname {{uhide==4?'':'hidden'}}">
55555
</view>
</view>
</view>
</view>
样式你自己写,根据你需要的。
js代码如下:
const app = getApp()
Page({
data: {
uhide: 1
},
onLoad: function() {
},
//显示隐藏
tigger: function(e) {
var that = this;
var toggleBtnVal = that.data.uhide
var num = e.currentTarget.dataset.num
if (toggleBtnVal == num) {
that.setData({
uhide: 0
})
} else {
that.setData({
uhide: num
})
}
}
})
其中的hidden样式为:
.hidden{
display:none;
}
这就写好了。