Sidebar is a very common form of APP function, the company's recent letter small micro projects program just needs to sidebar this feature, holding can write their own written work attitude, so I decided to use some of the basic techniques to accomplish this function .
A, WXML
<view class='body'>
<view class="leftBox '{{leftView?'leftActive':''}}'" bindtap='getLeft' data-item="1">
<view class="left '{{leftView?'leftActive':''}}'" catchtap='getleft'>
<view class='infolist'>
<text wx:for="{{items}}" wx:key="{{*this}}" data-item="{{index}}"
catchtap='getChecked' class="{{item.userChecked?'userActive':''}}">{{item.value}}</text>
</view>
<button class='clear' catchtap='getClear'>清空选择</button>
</view>
</view>
<button catchtap='getLeft' class='button'>显示侧边栏</button>
</view>Two, WXSS
/*主体 */
.body{
width:100vw;
height:100vh;
background:#ccc;
position:relative;
}
.leftBox{
width:100vw;
height:100vh;
background:rgba(0,0,0,.5);
position:fixed;
right:-1000px;
top:0px;
z-index:1;
}
.left{
width:80vw;
height:100vh;
background:#fff;
position:fixed;
right:-1000px;
top:0px;
transition: all .5s;/*动画 */
z-index:10;
}
.leftActive{
right:0px;
}
/*列表 */
.infolist{
width:100%;
}
.infolist text{
display:inline-block;
padding:10px;
margin:5px;
border-radius:4px;
background:#eee;
}
.infolist .userActive{
background:red;
color:#fff;
}
/*清空 */
.clear{
width:100px;
height:40px;
border-radius:4px;
line-height:40px;
background:#eee;
text-align:center;
position:absolute;
bottom:10px;
left:50%;
transform: translateX(-50%);
}
/*按钮 */
.button{
display:inline-block;
width:100vw;
height:40px;
margin-top:10px;
}Three, JS
Page({
data: {
leftView:false,
userChecked:false,
items:[
{value:'社会'},
{value:'生活'},
{value:'教育'},
{value:'音乐'}
],
},
//侧边栏显示和隐藏
getLeft:function(e){
let prent = e.target.dataset.item;
let left = this.data.leftView;
if (left){
this.data.leftView = false;
}else{
this.data.leftView = true;
}
this.setData({ leftView: this.data.leftView})
},
getleft:function(e){
},
//用户选中的值
getChecked:function(e){
let index = e.target.dataset.item;
let checked = this.data.items;
if (checked[index].userChecked){
this.data.items[index].userChecked = false;
} else{
this.data.items[index].userChecked = true;
}
this.setData({items:this.data.items})
let chekced = this.data.items.filter((item)=>{
return item.userChecked == true;
})
console.log(chekced)
},
//清空选中的值
getClear:function(){
let checked = this.data.items;
for (let i = 0; i < checked.length; i++){
checked[i].userChecked = false;
}
this.setData({items:this.data.items})
}
})Fourth, the effect
# Click the button to display the sidebar, from the right side of the module will draw the sidebar, click on the gray area before hiding the sidebar, which emulates the sidebar content to be displayed, the contents of which appear to the user selection of data acquisition , a clear function key.
