在布局微信小程序的时候,遇到了导航点击显示和隐藏切换问题。微信小程序的导航隐藏与显示,虽然跟网页中用js控制的道理一样,但是在微信小程序定制开发的过程中,还是跟网页中不一样。以下是流程。
wxml:
<view class="daohang">
<view class="logo">
<image style=" width: 90px;height:30px;" src="{{src}}">image>
view>
<view class="navbz" bindtap="shownav">
<image style=" width: 30px;height:30px;" src="{{navsrc}}">image>
view>
view>
<view class='nav {{editTrue ? "hide" : "show"}}'>
<navigator url="/pages/index/index" open-type="switchTab">网站首页navigator>
<navigator url="/pages/website/website" open-type="switchTab">网站建设navigator>
<navigator url="/pages/shop/shop" open-type="switchTab">商城建设navigator>
<navigator url="/pages/procedures/procedures" open-type="switchTab">小程序制作navigator>
<navigator url="/pages/contact/contact" open-type="switchTab">联系我们navigator>
view>
wxss:
.hide{
display: none;
}
.show{
display: block;
}
js:
data: {
src: 'http://www.xhhkj.cn/images/logo.png',
navsrc: 'http://www.xhhkj.cn/images/navsrc.png',
editTrue: true
},
shownav: function () {
var that = this;
if (that.data.editTrue == true) {
that.setData({
editTrue: false,
})
} else {
that.setData({
editTrue: true,
})
}
}