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

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

上一篇:在微信小程序开发中使用Typescript


下一篇:关于微信小程序开发中遇到的缺少game.json问题的解决