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


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 打印页面代码
Mar 24 Javascript
jquery实现div拖拽宽度示例代码
Jul 31 Javascript
js导出table到excel同时兼容FF和IE示例
Sep 03 Javascript
jquery操作checked属性以及disabled属性的多种方法
Jun 20 Javascript
jQuery插件Skippr实现焦点图幻灯片特效
Apr 12 Javascript
JavaScript中getUTCSeconds()方法的使用详解
Jun 11 Javascript
第一篇初识bootstrap
Jun 21 Javascript
微信小程序 Nginx环境配置详细介绍
Feb 14 Javascript
微信小程序左右滑动切换页面详解及实例代码
Feb 28 Javascript
在vue-cli中组件通信的方法
Dec 16 Javascript
详解vue在项目中使用百度地图
Mar 26 Javascript
详解JavaScript 作用域
Jul 14 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
PHP实现用户异地登录提醒功能的方法【基于thinkPHP框架】
2018/03/15 PHP
mongodb和php的用法详解
2019/03/25 PHP
Javascript的IE和Firefox兼容性汇编
2006/07/01 Javascript
JavaScript Event学习第五章 高级事件注册模型
2010/02/07 Javascript
JavaScript Accessor实现说明
2010/12/06 Javascript
jquery利用event.which方法获取键盘输入值的代码
2011/10/09 Javascript
JS使用replace()方法和正则表达式进行字符串的搜索与替换实例
2014/04/10 Javascript
jquery使用$(element).is()来判断获取的tagName
2014/08/24 Javascript
node.js中的fs.fsync方法使用说明
2014/12/15 Javascript
jQuery实现预加载图片的方法
2015/03/17 Javascript
JavaScript如何自定义trim方法
2015/07/28 Javascript
js带前后翻页的图片切换效果代码分享
2015/09/08 Javascript
关于AngularJs数据的本地存储详解
2017/01/20 Javascript
vue加载自定义的js文件方法
2018/03/13 Javascript
nodejs 日志模块winston的使用方法
2018/05/02 NodeJs
手把手教你如何使用nodejs编写cli命令行
2018/11/05 NodeJs
小程序如何使用分包加载的实现方法
2019/05/22 Javascript
[00:09]DOTA2新版本PA至宝特效动作展示
2014/11/19 DOTA
在Python的Django框架中编写编译函数
2015/07/20 Python
Python简明入门教程
2015/08/04 Python
Python 常用 PEP8 编码规范详解
2017/01/22 Python
Tornado协程在python2.7如何返回值(实现方法)
2017/06/22 Python
Pandas实现数据类型转换的一些小技巧汇总
2018/05/07 Python
python 在某.py文件中调用其他.py内的函数的方法
2019/06/25 Python
浅谈spring boot 集成 log4j 解决与logback冲突的问题
2020/02/20 Python
HTTP状态码详解
2021/03/18 杂记
纯css3实现的竖形无限级导航
2014/12/10 HTML / CSS
澳大利亚优质的家居用品和生活方式公司:Bed Bath N’ Table
2019/04/16 全球购物
卫校毕业生自我鉴定
2013/10/31 职场文书
2014两会学习心得:时代的发展
2014/03/17 职场文书
入党现实表现材料
2014/12/23 职场文书
行政助理岗位职责
2015/02/10 职场文书
大学生个人总结范文
2015/02/15 职场文书
2015年度优秀员工获奖感言
2015/07/31 职场文书
小学班长竞选稿
2015/11/20 职场文书
Python GUI编程之tkinter 关于 ttkbootstrap 的使用详解
2022/03/03 Python