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


Posted in Javascript onAugust 23, 2019

一、效果图

讲什么都不如直接上效果图好,所以我们先来看下实现效果如何。

通过滑动屏幕,或者点击左上角的图标按钮,都能实现侧边栏的划出效果。

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

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

二、原理解析

1.先实现侧边栏的内容,让侧边栏的内容居左,然后将侧边栏的内容置于屏幕的最底部。

2.接着实现主页的内容,并且让主页的内容默认是覆盖在侧边栏的内容上面。

3.然后,实现手指滑动屏幕的时候,主页的内容,向左滑动一定的宽度,让侧边栏的内容显示出来,而滑动的效果是通过 css 的 transition 来实现的。

三、源码

由于实现过程的时,我对代码作了比较详细的注释,所有这里就不废话,直接上代码。

slide.wxml

<view class="page">
  <!-- 侧边栏内容 -->
  <view class="page-slidebar">
    <view class="page-content">
      <view class="wc">
        <text>首页</text>
      </view>
      <view class="wc">
        <text>导航一</text>
      </view>
      <view class="wc">
        <text>导航二</text>
      </view>
      <view class="wc">
        <text>导航三</text>
      </view>
    </view>
  </view>
  
  <!-- 主页内容 --> 
  <!-- (open ? 'c-state' : '')三元运算符: -->
  <!-- 1.默认情况下 open 为 false -->
  <!-- 2.当点击左上角图标的时候或者屏幕向左滑动,open 变化 true -->
  <!-- 3.当 open 为 true 时,会加上类名为 c-state 和 cover 的 css 样式 --> 
  <!-- bindtouchstart、 bindtouchmove、bindtouchend -->
  <!-- 当手指触摸屏幕并滑动时,所触发的三个函数 -->
  <view bindtouchmove="tap_drag" bindtouchend="tap_end" bindtouchstart="tap_start" class="page-top {{open ? ['c-state','cover'] : ''}} ">
    <image bindtap="tap_ch" src="../../images/btn.png"></image>
    <view class='content'> 
      <text>为了帮助开发者简单和高效地开发和调试微信小程序,我们在原有的公众号网页调试工具的基础上,推出了全新的 微信开发者工具,集成了公众号网页调试和小程序调试两种开发模式。 
使用公众号网页调试,开发者可以调试微信网页授权和微信JS-SDK 详情
使用小程序调试,开发者可以完成小程序的 API 和页面的开发调试、代码查看和编辑、小程序预览和发布等功能。
为了更好的开发体验,我们从视觉、交互、性能等方面对开发者工具进行升级,推出了 1.0.0 版本。</text>
      <button>按钮</button>
    </view>
  </view>
</view>

slide.wcss

/* 全局样式 */
page, .page {
  height: 100%;
  font-family: 'PingFang SC',
         'Helvetica Neue',
         Helvetica,
         'Droid Sans Fallback',
         'Microsoft Yachei',
         sans-serif;
} 
/* 侧边栏样式 */
.page-slidebar {
  height: 100%;
  width: 750rpx;
  position: fixed;
  background-color:white;
  z-index: 0;
}
 
/* 控制侧边栏的内容距离顶部的距离 */
.page-content {
  padding-top: 60rpx;
}
 
/* 侧边栏内容的 css 样式 */
.wc {
  color:black;
  padding: 30rpx 0 30rpx 150rpx;
  border-bottom: 1px solid #eee; 
}
 
/* 当屏幕向左滑动,出现侧边栏的时候,主页的动画样式 */
/* scale:取值范围 0~1 ,表示屏幕大小是原来的百分之几,可以自己修改成 0.8 试下*/
/* translate(60%,0%) 表示向左滑动的时候,侧边栏占用平时的宽度为 60%  */
.c-state {
  transform: rotate(0deg) scale(1) translate(60%, 0%);
  -webkit-transform: rotate(0deg) scale(1) translate(60%, 0%);
}
 
/* 主页样式 */
.page-top {
  height: 100%;
  position: fixed;
  width: 750rpx;
  background-color:white;
  z-index: 0;
  transition: All 0.4s ease;
  -webkit-transition: All 0.4s ease;
}
/* 左上角图标的样式 */
.page-top image {
  position: absolute;
  width: 68rpx;
  height: 68rpx;
  left: 20rpx;
  top: 20rpx;
}
 
/* 遮盖层样式 */
.cover{
  width: 100%;
  height: 100%;
  background-color:gray;
  opacity: 0.5;
  z-index: 9000;
}
 
.content{
  margin-top: 100rpx; 
}

slide.js

Page({ 
  data: {
    open: false,
    // mark 是指原点x轴坐标
    mark: 0,
    // newmark 是指移动的最新点的x轴坐标 
    newmark: 0,
    istoright: true
  }, 
  // 点击左上角小图标事件
  tap_ch: function(e) {
    if (this.data.open) {
      this.setData({
        open: false
      });
    } else {
      this.setData({
        open: true
      });
    }
  },
 
  tap_start: function(e) {
    // touchstart事件
    // 把手指触摸屏幕的那一个点的 x 轴坐标赋值给 mark 和 newmark
    this.data.mark = this.data.newmark = e.touches[0].pageX;
  },
 
  tap_drag: function(e) {
    // touchmove事件
    this.data.newmark = e.touches[0].pageX;
    
    // 手指从左向右移动
    if (this.data.mark < this.data.newmark) {
      this.istoright = true;
    }
    
    // 手指从右向左移动
    if (this.data.mark > this.data.newmark) {
      this.istoright = false;
    }
    this.data.mark = this.data.newmark;
  },
 
  tap_end: function(e) {
    // touchend事件
    this.data.mark = 0;
    this.data.newmark = 0;
    // 通过改变 opne 的值,让主页加上滑动的样式
    if (this.istoright) {
      this.setData({
        open: true
      });
    } else {
      this.setData({
        open: false
      });
    }
  }
})

四、项目下载

git 在线下载:

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript 函数调用规则
Sep 14 Javascript
jQuery 过滤not()与filter()实例代码
May 10 Javascript
用jquery实现动画跳到顶部和底部(这个比较简单)
Sep 01 Javascript
实例讲解JavaScript的Backbone.js框架中的View视图
May 05 Javascript
在IE8上JS实现combobox支持拼音检索功能
May 23 Javascript
jQuery滚动新闻实现代码
Jun 26 Javascript
Bootstrap组件之下拉菜单,多级菜单及按钮布局方法实例
May 25 Javascript
Vue.js如何实现路由懒加载浅析
Aug 14 Javascript
JavaScript框架Angular和React深度对比
Nov 20 Javascript
解决layer弹层遮罩挡住窗体的问题
Aug 17 Javascript
纯javascript实现选择框的全选与反选功能
Apr 08 Javascript
在vue中对数组值变化的监听与重新响应渲染操作
Jul 17 Javascript
微信小程序之下拉列表实现方法解析(附完整源码)
Aug 23 #Javascript
Vue中消息横向滚动时setInterval清不掉的问题及解决方法
Aug 23 #Javascript
微信小程序 授权登录详解(附完整源码)
Aug 23 #Javascript
vue使用微信JS-SDK实现分享功能
Aug 23 #Javascript
VUE实现移动端列表筛选功能
Aug 23 #Javascript
简述ES6新增关键字let与var的区别
Aug 23 #Javascript
微信小程序后台持续定位功能使用详解
Aug 23 #Javascript
You might like
《猛禽小队》:DC宇宙的又一超级大烂片
2020/04/09 欧美动漫
PHP之变量、常量学习笔记
2008/03/27 PHP
php include加载文件两种方式效率比较
2010/08/08 PHP
PHP连接MongoDB示例代码
2012/09/06 PHP
CodeIgniter框架URL路由总结
2014/09/03 PHP
WordPress中的shortcode短代码功能使用详解
2016/05/17 PHP
使用PHP免费发送定时短信的实例
2016/10/24 PHP
Yii框架参数配置文件params用法实例分析
2019/09/11 PHP
IE之动态添加DOM节点触发window.resize事件
2010/07/27 Javascript
使用javascript实现雪花飘落的效果
2015/01/13 Javascript
javascript实现Table间隔色以及选择高亮(和动态切换数据)的方法
2015/05/14 Javascript
vue.js通过自定义指令实现数据拉取更新的实现方法
2016/10/18 Javascript
解析预加载显示图片艺术
2016/12/05 Javascript
JavaScript实现简单精致的图片左右无缝滚动效果
2017/03/16 Javascript
微信小程序实现循环动画效果
2018/07/16 Javascript
Vue监听数据渲染DOM完以后执行某个函数详解
2018/09/11 Javascript
JS中的算法与数据结构之列表(List)实例详解
2019/08/16 Javascript
JavaScript如何实现监听键盘输入和鼠标监点击
2020/07/20 Javascript
python读取excel表格生成erlang数据
2017/08/26 Python
Python3.4编程实现简单抓取爬虫功能示例
2017/09/14 Python
Python找出最小的K个数实例代码
2018/01/04 Python
python 与服务器的共享文件夹交互方法
2018/12/27 Python
python中append实例用法总结
2019/07/30 Python
django 链接多个数据库 并使用原生sql实现
2020/03/28 Python
python使用pymongo与MongoDB基本交互操作示例
2020/04/09 Python
Python 如何反方向迭代一个序列
2020/07/28 Python
Python高并发解决方案实现过程详解
2020/07/31 Python
Python 添加文件注释和函数注释操作
2020/08/09 Python
365 Tickets英国:全球景点门票
2019/07/06 全球购物
大学新闻系应届生求职信
2014/06/02 职场文书
消防安全宣传标语
2014/06/07 职场文书
活动主持人开场白
2015/05/28 职场文书
教师学习十八届五中全会精神心得体会
2016/01/05 职场文书
少年的你:世界上没有如果,要在第一次就勇敢的反抗
2019/11/20 职场文书
pytorch 如何使用batch训练lstm网络
2021/05/28 Python
Java8中接口的新特性使用指南
2021/11/01 Java/Android