微信小程序开发中如何实现侧边栏的滑动效果？ |
您所在的位置：网站首页 › 魅族侧边滑动选应用如何关闭 › 微信小程序开发中如何实现侧边栏的滑动效果？ |
|
原文链接：https://mp.weixin.qq.com/s/7CM18izpZqf0oc0D75IGmQ 1 概述在手机应用的开发中侧边栏滑动是很常见的功能，当然在小程序中也不会例外，很多特效还没有成熟案例，只能原生重写，所以今天在网上为大家收集整理来几个非常漂亮的侧边栏特效。今天我们就分享这样的小教程。希望对大家有所帮助。 快去拿个小板凳，坐等更多更新 注意：如若需要请联系微信geekxz 2wxml 1 2 3 4 5 6 7 第一个item1 8 9 10 第二个item211 12 13 第三个item314 15 16 第四个item417 18 19 20 21 22 23 243 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资源大放送。 |
今日新闻 |
点击排行 |
|
推荐新闻 |
图片新闻 |
|
专题文章 |
| CopyRight 2018-2019 实验室设备网 版权所有 win10的实时保护怎么永久关闭 |