微信小程序实现滑动侧边栏
作者:痴梦_MM
这篇文章主要为大家详细介绍了微信小程序实现滑动侧边栏,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
本文实例为大家分享了微信小程序滑动侧边栏的具体代码,供大家参考,具体内容如下
效果图:
手指向右滑动可以显示侧边栏,向左滑动隐藏侧边栏
代码附上:.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; }
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。