原文链接：https://mp./s/7CM18izpZqf0oc0D75IGmQ
1
概述
在手机应用的开发中侧边栏滑动是很常见的功能，当然在小程序中也不会例外，很多特效还没有成熟案例，只能原生重写，所以今天在网上为大家收集整理来几个非常漂亮的侧边栏特效。今天我们就分享这样的小教程。希望对大家有所帮助。
快去拿个小板凳，坐等更多更新
注意：如若需要请联系微信geekxz
2
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>1<!--page/one/index.wxml-->
3
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({ 28translate: 'transform: translateX(0px)' 29 }) 30 this.data.open = false; 31 }else{ 32 this.setData({ 33translate: '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)){ 57this.setData({ 58translate: '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){ 69this.setData({ 70translate: '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){ 73this.setData({ 74translate: '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({ 84translate: 'transform: translateX(0px)' 85 }) 86 this.data.staus = 1; 87 }else{ 88 this.setData({ 89translate: '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({ 96translate: 'transform: translateX('+this.data.windowWidth*0.75+'px)' 97 }) 98 this.data.staus = 2; 99 }else{ 100 this.setData({ 101translate: 'transform: translateX(0px)' 102 }) 103 this.data.staus = 1; 104 } 105 } 106 this.data.mark = 0; 107 this.data.newmark = 0; 108 } 109})1// page/one/index.js
4 css
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}1/**app.wxss**/
以上代码为效果为 图二
注意路径问题
文末福利：
福利一：前端，Java，产品经理，微信小程序，Python等100G资源合集大放送：/p/e8197d4d9880
福利二：微信小程序入门与实战全套详细视频教程。
【领取方法】
关注 【编程微刊】微信公众号：
回复【小程序demo】一键领取130个微信小程序源码demo资源。
回复【领取资源】一键领取前端，Java，产品经理，微信小程序，Python等资源合集100G资源大放送。
