微信小程序实现左侧滑栏过程解析

前言

一直想给项目中的小程序设置侧滑栏，将退出按钮放到侧滑中，但是小程序没有提供相应的控件和原料药，因此只能自己手动实现，网上很多大神造的轮子很不错，本文就在是站在巨人的肩膀上实现。

花园图片不显示问题，可前往简书

效果

先看看效果，我的侧滑栏需要列出如下信息：

初始状态下，左下角设置悬空按钮

点击悬空按钮，侧边栏拉出，悬空按钮旋转180度

主页内容向右滑动一定比例，并设置阴影遮罩

实现

首先将可扩展标记语言文件分为三部分，一部分是主页内容，一部分是侧滑栏内容，一部分是悬浮按钮。

！- index.wxml - view！-侧边滑动菜单-view class=' page-slide bar ' view class=' page-content ' view class=' user info '按钮wx : if=' { {！hasUserInfo可以使用} } ' open-type=' Geuserinfo ' bind Geuserinfo=' Geuserinfo '点击获取头像昵称/button block wx : else image bind tap=' BindViewtap ' class=' user info-avatar ' src=' http : { { UserInfo }。头像URL } } '模式='封面'/图像文本类=' userinfo-昵称{ userinfo。昵称} }/text/block/view class=' account-info ' view class=' account-info-item '用户：{ { YHMC } }/view view class=' account-info-item '账号：{ { YHZH } }/view view class=' account-info-item '角色：{ { YHJS } }/view view class=' account-info-item '版本：{ { version } }/view/view view view class=' quit-view '按钮class='退出-btn' bindtap='退出'退出登录/按钮/视图/视图/视图/视图！-主页内容-view bind touch move=' tap _ drag ' bind touch end=' tap _ end ' bind touch start=' tap _ start ' class=' page-top { { open？['c-state '，' cover ']: ' ' } } ' view class=' user motion ' text class=' user-motion ' { { motion } }/text/view/view！-添加侧拉悬浮按钮-查看绑定点击=' Openslider ' image class=' float button { { open？c-button-open ' : ' ' } } ' src=' http : '././img/浮动按钮。png '/image/view/view wxss文件，样式文件中，主要是c .状态c .按钮打开。涉及三个样式。

/**index.wxss**/.user info { display : flex flex-direction :柱；align-items:居中；}.用户信息-头像{ width : 128 rpx高度： 128rpxmargin: 20rpx边界半径： 50%;}.用户信息-昵称{ color: # aaa}。帐户信息{页边距-top : 50 rpx；}.帐户信息项目{ display : flex align-items :居中；高度： 54px左边距left : 10 rpx border-bottom : 1 px实心# eee}/*侧边栏样式*/.页面-滑动条{高度： 100%；宽度： 65%;位置：固定；背景-颜色：白色；z-index : 0；} /* 主页样式*/.页面顶端{身高： 100%；位置：固定；宽度： 100%;背景-颜色：白色；z-index : 0；过渡：所有0.4秒轻松；-WebKit-transit :所有0.4s轻松版；}/* 控制侧边栏的内容距离顶部的距离*/.页面内容{填充-top : 60 rpx；}/* 当屏幕向左滑动，出现侧边栏的时候，主页的动画样式*//*比例：取值范围0~1 ,表示屏幕大小是原来的百分之几，可以自己修改成0.8 试下*//*翻译(60%,0%)表示向左滑动的时候，侧边栏占用平时的宽度为60% */.c状态{ transform : }旋转(0度)刻度(1)平移(65%,0%);-webkit-transform:旋转(0度)比例(1)平移(65%,0%);}.浮动按钮{位置：固定；宽度： 100 rpx高度： 100 rpxbottom : 140 rpxleft : 40 rpxz-index : 9999；}.c-按钮-打开{ transform:旋转(180度)刻度(1)平移(65%,0%);-webkit-transform:旋转(180度)比例(1)平移(65%,0%);过渡-持续时间：0.5秒；-web套件-过渡-持续时间： 0.5s左： 60%;}/* 遮盖层样式*/.覆盖{宽度： 100%；高度： 100%;背景-颜色：灰色；opa city 3360 0.5z-指数： 9000；}.退出-查看{身高：5%；宽度： 65%;}.退出-BTN {职位： }已修复；底部： 5rpxz-指数： 999；color: # fff宽度： 65%;边界半径： 5rpx背景色： # 064 ACB；}js文件，这里不涉及我演示中申请用户信息内容。

//点击左下角小图标事件openSlider:函数{如果(这个。数据。打开){这个。setdata({ open : false })；} else { this。setdata({ open : true })；} },点击_start:函数{ //touchstart事件//把手指触摸屏幕的那一个点的x轴坐标赋值给标记和新标记这个。数据。马克=这个。数据。新标记=e . touch[0 ].pageX}，点击_drag:函数(e) { //touchmove事件这个。数据。新标记=e . touch[0 ].pageX//手指从左向右移动如果(这个。数据。标记这个。数据。新标记){这个。istor ight=true} //手指从右向左移动如果(这个。数据。标记这个。数据。新标记){这个。istor ight=false}这个。数据。马克=这个。数据。新标记；},点击_end:函数(e) { //touchend事件这个。数据。mark=0；这个。数据。新标记=0；//通过改变opne的值，让主页加上滑动的样式如果(这个。这是对的。setdata({ open : true })；} else { this。setdata({ open : false })；} }参考资料

微信小程序之侧边栏滑动实现（附完整源码)

微信小程序侧边栏滑动特效（左右滑动)

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。