微信小程序开发中如何实现侧边栏的滑动效果？

原文链接：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资源大放送。