微信小程序滑动侧边栏

微信小程序滑动侧边栏
效果图：
手指向右滑动可以显示侧边栏，向左滑动隐藏侧边栏
代码附上：.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 和 newmarkthis.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;
}

微信小程序滑动侧边栏相关推荐

微信小程序滑动日历实现思路
需求做项目的时候需要用到一种日历,看完设计师的设计稿总结成:可以左右滑动切换显示的日历,能够在某一个日期下显示文字和标签,并且提供选择某一个范围内的日期和单选两种功能. 刚开始看到,想着这种组件网上 ...
微信小程序滑动导航栏
微信小程序可以使用组件库中的 scroll-view 组件和 swiper 组件实现滑动导航栏. 下面是一个使用 scroll-view 组件实现滑动导航栏的例子: 在 .wxml 文件中定义 scr ...
微信小程序滑动屏幕控制动画隐藏和显示
思路一,使用scroll-view组件的事件,缺点:动画不够流畅思路二,微信小程序自带的pagescroll事件,缺点:监听不方便,层级较高思路三,给页面最外层添加触摸事件思路四,小程序自带的触 ...
使用canvas实现微信小程序滑动解锁功能；解决canvas图层随背景能上下滑动导致页面错乱问题；
小程序滑动解锁 : 1.给整个页面设置半透明蒙层背景 2.使用canvas实现缺口图效果问题点:当文字内容超过一页时,被遮罩层遮盖的内容能随屏幕上下滑动,canvas内的图片也会随页面上下滑动效果 ...
微信小程序筛选侧边栏全选与反全选
小程序中经常会有筛选侧边栏的按钮,今天用原生小程序实现这一功能. 1.wxml核心代码 <button class="filterBtn" bindtap="tra ...
微信小程序滑动scroll-view
首先说一下思路: 1.高度是通过一个二维数组存储的,所以我们只需要先通过自己的实际情况算出这个高度即可. let arr = [ [0, 522, 1002], ...
微信小程序——滑动条
一.微信自带的进度条--slider组件 <slider bindchanging="sliderChanging" show-value> 当slider组件被拖动时 ...
微信小程序相关项目实例集合
大家下午好,上午逛博客的时候发现了一片有关于小程序的项目实例合集,我大致看了一下挺好的,特此拿过来希望可以帮到小伙伴们. 如下: wx-gesture-lock 微信小程序的手势密码 WXCustom ...
[荐] 微信小程序模板源码合集
关注公众号风色年代(itfantasycc) 200G 小程序资料合集送上~ wx-gesture-lock 微信小程序的手势密码 WXCustomSwitch 微信小程序自定义 Switch 组 ...

微信小程序滑动侧边栏

微信小程序滑动侧边栏相关推荐

最新文章

热门文章