效果图:
手指向右滑动可以显示侧边栏,向左滑动隐藏侧边栏
代码附上:.wxml
<view class="title"> <image class='headPortrait' src='../../images/1.jpg'></image> <text>赵国伟</text> </view> <view class="nav_left_items {{click == 1 ? 'active' : ''}}" bindtap="switchRightTab" data-id="1" > <image class='icon' src='../../images/get.png'></image> <view>收件箱 </view> </view> <view class="nav_left_items {{click == 2 ? 'active' : ''}}" bindtap="switchRightTab" data-id="2"> <image class='icon' src='../../images/send.png'></image> <view>发件箱 </view> </view> <view class="nav_left_items {{click == 3 ? 'active' : ''}}" bindtap="switchRightTab" data-id="3"> <image class='icon' src='../../images/write.jpg'></image> <view >写信件 </view> </view> </scroll-view>
.js文件
tap_ch: function(e) { if (this.data.open) { this.setData({ open: false }); } else { this.setData({ open: true }); } }, tap_start: function(e) { // touchstart事件 // 把手指触摸屏幕的那一个点的 x 轴坐标赋值给 mark 和 newmark this.data.mark = this.data.newmark = e.touches[0].pageX; }, tap_drag: function(e) { // touchmove事件 this.data.newmark = e.touches[0].pageX; // 手指从左向右移动 if (this.data.mark < this.data.newmark) { this.istoright = true; } // 手指从右向左移动 if (this.data.mark > this.data.newmark) { this.istoright = false; } this.data.mark = this.data.newmark; }, tap_end: function(e) { // touchend事件 this.data.mark = 0; this.data.newmark = 0; // 通过改变 opne 的值,让主页加上滑动的样式 if (this.istoright) { this.setData({ open: true }); } else { this.setData({ open: false }); } },
.wxss文件
.nav_left{ width:25%; height:100%; background:#F2F2F2; text-align:center; position:absolute; top:0; left:0; } .nav_left .nav_left_items{ display: flex; height:40px; line-height:40px; font-size:28rpx; } .nav_left .nav_left_items.active{ display: flex; background: #fff; /* 背景色变成白色 */ color: #3385ff; /* 字体编程蓝色 */ border-left: 3px solid #3385ff; /* 设置边框的宽度以及颜色 */ } .title{ margin-top: 10px; } .icon{ display: flex; justify-content: center; align-items: center; width:20px; height: 20px; margin: 0px 3px; border-radius: 5px ; margin-top:10px ; } .headPortrait{ width:28px; height: 28px; border-radius: 20px; } .page-slidebar { height: 100%; width: 750rpx; position: fixed; background-color:white; z-index: 0; }