原文链接：https://mp.weixin.qq.com/s/7CM18izpZqf0oc0D75IGmQ
1
概述
在手机应用的开发中侧边栏滑动是很常见的功能，当然在小程序中也不会例外，很多特效还没有成熟案例，只能原生重写，所以今天在网上为大家收集整理来几个非常漂亮的侧边栏特效。今天我们就分享这样的小教程。希望对大家有所帮助。
快去拿个小板凳，坐等更多更新
注意：如若需要请联系微信geekxz
2
wxml
1<!--page/one/index.wxml-->
2<view class="page">
3 <!-- 侧边内容 -->
4 <view class="page-bottom">
5 <view class="page-content">
6 <view class="wc">
7 <text>第一个item1</text>
8 </view>
9 <view class="wc">
10 <text>第二个item2</text>
11 </view>
12 <view class="wc">
13 <text>第三个item3</text>
14 </view>
15 <view class="wc">
16 <text>第四个item4</text>
17 </view>
18 </view>
19 </view>
20 <!-- 主页内容 -->
21 <view bindtouchmove="tap_drag" bindtouchend="tap_end" bindtouchstart="tap_start" class="page-top" style="{{translate}}">
22 <image class="img-ico" bindtap="tap_ch" src="../../static/images/icon/btn.png"></image>
23 </view>
24</view>
3
js
1// page/one/index.js
2Page({
3 data:{
4 open : false,
5 mark: 0,
6 newmark: 0,
7 startmark: 0,
8 endmark: 0,
9 windowWidth: wx.getSystemInfoSync().windowWidth,
10 staus: 1,
11 translate: '',
12 },
13 /**
14 * 生命周期函数--监听页面加载
15 */
16 onLoad: function (options) {
17 },
18 imageLoad: function () {
19 //bindload 图片加载的时候自动设定宽度
20 this.setData({
21 imageWidth: wx.getSystemInfoSync().windowWidth ,
22 imageHeight: wx.getSystemInfoSync().windowHeight ,
23 })
24 },
25 tap_ch: function(e){
26 if(this.data.open){
27 this.setData({
28 translate: 'transform: translateX(0px)'
29 })
30 this.data.open = false;
31 }else{
32 this.setData({
33 translate: 'transform: translateX('+this.data.windowWidth*0.75+'px)'
34 })
35 this.data.open = true;
36 }
37 },
38 tap_start:function(e){
39 this.data.mark = this.data.newmark = e.touches[0].pageX;
40 if(this.data.staus == 1){
41 // staus = 1指默认状态
42 this.data.startmark = e.touches[0].pageX;
43 }else{
44 // staus = 2指屏幕滑动到右边的状态
45 this.data.startmark = e.touches[0].pageX;
46 }
47 },
48 tap_drag: function(e){
49 /*
50 * 手指从左向右移动
51 * @newmark是指移动的最新点的x轴坐标 ， @mark是指原点x轴坐标
52 */
53 this.data.newmark = e.touches[0].pageX;
54 if(this.data.mark < this.data.newmark ){
55 if(this.data.staus == 1){
56 if(this.data.windowWidth*0.75 > Math.abs(this.data.newmark - this.data.startmark)){
57 this.setData({
58 translate: 'transform: translateX('+(this.data.newmark - this.data.startmark)+'px)'
59 })
60 }
61 }
62 }
63 /*
64 * 手指从右向左移动
65 * @newmark是指移动的最新点的x轴坐标 ， @mark是指原点x轴坐标
66 */
67 if(this.data.mark > this.data.newmark ){
68 if(this.data.staus == 1 && (this.data.newmark - this.data.startmark) > 0){
69 this.setData({
70 translate: 'transform: translateX('+(this.data.newmark - this.data.startmark)+'px)'
71 })
72 }else if(this.data.staus == 2 && this.data.startmark - this.data.newmark < this.data.windowWidth*0.75){
73 this.setData({
74 translate: 'transform: translateX('+(this.data.newmark + this.data.windowWidth*0.75 - this.data.startmark)+'px)'
75 })
76 }
77 }
78 this.data.mark = this.data.newmark;
79 },
80 tap_end: function(e){
81 if(this.data.staus == 1 && this.data.startmark < this.data.newmark){
82 if(Math.abs(this.data.newmark - this.data.startmark) < (this.data.windowWidth*0.2)){
83 this.setData({
84 translate: 'transform: translateX(0px)'
85 })
86 this.data.staus = 1;
87 }else{
88 this.setData({
89 translate: 'transform: translateX('+this.data.windowWidth*0.75+'px)'
90 })
91 this.data.staus = 2;
92 }
93 }else{
94 if(Math.abs(this.data.newmark - this.data.startmark) < (this.data.windowWidth*0.2)){
95 this.setData({
96 translate: 'transform: translateX('+this.data.windowWidth*0.75+'px)'
97 })
98 this.data.staus = 2;
99 }else{
100 this.setData({
101 translate: 'transform: translateX(0px)'
102 })
103 this.data.staus = 1;
104 }
105 }
106 this.data.mark = 0;
107 this.data.newmark = 0;
108 }
109})
4 css
1/**app.wxss**/
2page,.page {
3 height: 100%;
4 font-family: 'PingFang SC', 'Helvetica Neue', Helvetica, 'Droid Sans Fallback', 'Microsoft Yahei', sans-serif;
5}
6.page-bottom{
7 height: 100%;
8 width: 750rpx;
9 position: fixed;
10 background-color: #118fff;
11 z-index: 0;
12}
13.wc{
14 color: black;
15 padding: 30rpx 0 30rpx 40rpx;
16}
17.page-content{
18 padding-top: 300rpx;
19}
20.page-top{
21 height: 100%;
22 position: fixed;
23 width: 750rpx;
24 background-color: #fff;
25 z-index: 0;
26 transition: All 0.4s ease;
27 -webkit-transition: All 0.4s ease;
28}
29.page-top .img-ico:first-child{
30 position: absolute;
31 width: 68rpx;
32 height: 38rpx;
33 left: 20rpx;
34 top: 20rpx;
35 z-index:9999;
36}
37.c-state1{
38 transform: rotate(0deg) scale(1) translate(75%,0%);
39 -webkit-transform: rotate(0deg) scale(1) translate(75%,0%);
40}
41.c-state2{
42 transform: rotate(0deg) scale(.8) translate(75%,0%);
43 -webkit-transform: rotate(0deg) scale(.8) translate(75%,0%);
44}
以上代码为效果为 图二
注意路径问题
文末福利：
福利一：前端，Java，产品经理，微信小程序，Python等100G资源合集大放送：https://www.jianshu.com/p/e8197d4d9880
福利二：微信小程序入门与实战全套详细视频教程。
【领取方法】
关注 【编程微刊】微信公众号：
回复【小程序demo】一键领取130个微信小程序源码demo资源。
回复【领取资源】一键领取前端，Java，产品经理，微信小程序，Python等资源合集100G资源大放送。