微信小程序侧边栏滑动实现过程分析(附完整源代码)

一.效果图

谈什么都不如直接去效果图，先来看看实现效果。

通过滑动屏幕，或者点击左上角的图标按钮，可以拉出侧栏。

二、原理分析

1.首先，实现侧边栏的内容，将侧边栏的内容留在左边，然后将侧边栏的内容放在屏幕底部。

2.然后实现主页的内容，默认让主页的内容覆盖侧边栏的内容。

3.然后，当手指滑动屏幕时，主页的内容向左滑动一定的宽度，从而显示侧边栏的内容，通过css的过渡来实现滑动效果。

第三，源代码

因为我在实现过程的时候对代码做了详细的注释，这里就不废话了，直接去代码。

slide.wxml

view class='page '！-侧栏内容-视图类='页面-滑动条'视图类='页面-内容'视图类=' WC '文本主页/文本/视图类='wc '文本导航一/文本/视图类=' WC '文本导航二/文本/视图类=' WC '文本导航三/文本/视图/视图！-首页内容-！-(打开？C-state' : ')三元运算符：-！-1.默认情况下，open为false -！-2.当您单击左上角的图标或屏幕向左滑动时，open changes为true -！-3.当open为true时，将添加类名为c-state和cover的css样式-！- bindtouchstart、bindtouchmove、bindtouchend -！-当手指触摸屏幕并滑动时触发的三个功能-查看bind touch move=' tap _ drag ' bind touch end=' tap _ end ' bind touch start=' tap _ start ' class=' page-top { { open？['c-state '，' cover'] :''}} '图像绑定tap=' tap _ ch' src=' http:/./images/BTN . png '/imageview class=' content ' text为了帮助开发者简单高效地开发调试微信小程序，我们在原有微信官方账号网页调试工具的基础上，推出了全新的微信开发者工具，集成了微信官方账号网页调试和小程序调试两种开发模式。使用微信官方账号网页调试，开发者可以使用小程序调试微信网页授权和微信JS-SDK细节，开发者可以完成小程序API和页面的开发调试、代码查看编辑、小程序预览发布等功能。为了获得更好的开发体验，我们从视觉、交互和性能方面升级了开发人员工具，并发布了1.0.0版本。/text按钮按钮/button/view/view/view slide . wcss

/* 全局样式*/页.页面{身高： 100%；字体系列： '方平' SC '，' Helvetica内乌'，Helvetica，' Droid Sans Fallback '，' Microsoft Yachei '，无衬线；} /* 侧边栏样式*/.页面-滑动条{高度： 100%；宽度： 750 rpx位置：固定；背景-颜色：白色；z-index : 0；} /* 控制侧边栏的内容距离顶部的距离*/.页面内容{填充-top : 60 rpx；} /* 侧边栏内容的钢性铸铁样式*/.WC { color : black padd : 30 rpx 0 30 rpx 150 rpx；边框-底部： 1px实心# eee} /*当屏幕向左滑动，出现侧边栏的时候，主页的动画样式*//*比例：取值范围0~1 ,表示屏幕大小是原来的百分之几，可以自己修改成0.8 试下*//*翻译(60%,0%)表示向左滑动的时候，侧边栏占用平时的宽度为60% */.c状态{ transform : }旋转(0度)刻度(1)平移(60%,0%);-webkit-transform:旋转(0度)比例(1)平移(60%,0%);} /* 主页样式*/.页面顶端{身高： 100%；位置：固定；宽度： 750 rpx背景-颜色：白色；z-index : 0；过渡：所有0.4秒轻松；-WebKit-transit :所有0.4s轻松版；}/* 左上角图标的样式*/.页面顶部图像{位置：绝对值；宽度： 68 rpxheight : 68 rpxleft : 20 rpxtop : 20 rpx }/*遮盖层样式*/.覆盖{宽度： 100%；高度： 100%;背景-颜色：灰色；opa city 3360 0.5z-指数： 9000；} .内容{页边距-top : 100 rpx；}slide.js

页面({ data: { open: false，//标记是指原点x轴坐标mark: 0，//newmark是指移动的最新点的x轴坐标newmark: 0，istoright: true }，//点击左上角小图标事件tap_ch:函数{如果(这个。数据。打开){这个。setdata({ open : false })；} else { this。setdata({ open : true })；} },点击_start:函数{ //touchstart事件//把手指触摸屏幕的那一个点的x轴坐标赋值给标记和新标记这个。数据。马克=这个。数据。新标记=e . touch[0 ].pageX}，点击_drag:函数(e) { //touchmove事件这个。数据。新标记=e . touch[0 ].pageX//手指从左向右移动如果(这个。数据。标记这个。数据。新标记){这个。istor ight=true} //手指从右向左移动如果(这个。数据。标记这个。数据。新标记){这个。istor ight=false}这个。数据。马克=这个。数据。新标记；},点击_end:函数(e) { //touchend事件这个。数据。mark=0；这个。数据。新标记=0；//通过改变opne的值，让主页加上滑动的样式如果(这个。这是对的。setdata({ open : true })；} else { this。setdata({ open : false })；} }})四、项目下载

饭桶在线下载：

https://github.com/yyzheng1729/slide

五、同类文章推荐

微信小程序授权登录详解（附完整源码)

微信小程序之下拉列表实现方法解析（附完整源码)

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。