先看效果:
HTML
<view class='maxview'>
<view class='view_le'>
<view bindtap='hideBu'>{{whole}}</view>
<view bindtap='showButton'>{{One_way}}</view>
</view>
<view class="view_imgs {{showView?'show':'hide'}}">
<view>{{classification}}</view>
<image src='imgs/4.jpg'></image>
</view>
<view class="view_imgs {{showView?'hide':'show'}}">
<view>{{One_way}}</view>
<image src='imgs/5.jpg'></image>
</view>
</view>
CSS
/* 显示 隐藏 */
.hide {
display: none;
}
.show {
display: block;
}
/* 显示 隐藏 */
.maxview{
margin: 0 auto;
width: 98%;
}
.view_le{
width: 30%;
display: inline-block;
float: left;
}
.view_le view{
color: rgb(0, 0, 0);
text-align: center;
background-color: rgb(255, 254, 254);
height: 60px;
border-bottom: 1px solid rgb(216, 216, 216);
line-height: 58px;
}
.view_imgs{
width: 68%;
background-color: khaki;
float: right;
}
.view_imgs image{
width: 100%;
}
JS
Page({
data: {
showView: true,
whole:"全部",
One_way: "单向图片",
},
showButton: function() {
var that = this;
that.setData({
// showView: (!that.data.showView)
showView:(false)
});
// console.log(!that.data.showView);
//这句可试试 点击同一个按钮也能实现显示隐藏
},
hideBu:function(){
var that = this;
that.setData({
// showView: (!that.data.showView)
showView: (true)
});
}
})