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


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 相关文章推荐
firefox 和 ie 事件处理的细节,研究,再研究 书写同时兼容ie和ff的事件处理代码
Apr 12 Javascript
在JavaScript应用中使用RequireJS来实现延迟加载
Jul 01 Javascript
AngularJs自定义服务之实现签名和加密
Aug 02 Javascript
关于BootStrap modal 在IOS9中不能弹出的解决方法(IOS 9 bootstrap modal ios 9 noticework)
Dec 14 Javascript
Vue 仿QQ左滑删除组件功能
Mar 12 Javascript
vue 使某个组件不被 keep-alive 缓存的方法
Sep 21 Javascript
关于vue的npm run dev和npm run build的区别介绍
Jan 14 Javascript
通过jQuery学习js类型判断的技巧
May 27 jQuery
如何使用CSS3和JQuery easing 插件制作绚丽菜单
Jun 18 jQuery
vue 框架下自定义滚动条(easyscroll)实现方法
Aug 29 Javascript
javascript设计模式 ? 工厂模式原理与应用实例分析
Apr 09 Javascript
idea编译器vue缩进报错问题场景分析
Jul 04 Vue.js
微信小程序之下拉列表实现方法解析(附完整源码)
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提交表单时判断 if($_POST[submit])与 if(isset($_POST[submit])) 的区别
2011/02/08 PHP
php模拟js函数unescape的函数代码
2012/10/20 PHP
Linux安装配置php环境的方法
2016/01/14 PHP
php 解决substr()截取中文字符乱码问题
2016/07/18 PHP
php+mysql+ajax实现单表多字段多关键词查询的方法
2017/04/15 PHP
PHP实现根据密码长度显示安全条
2017/07/04 PHP
PHP异常处理定义与使用方法分析
2017/07/25 PHP
js 日期转换成中文格式的函数
2009/07/07 Javascript
javascript自定义函数参数传递为字符串格式
2014/07/29 Javascript
javascript验证内容为数字以及长度为10的简单实例
2016/08/20 Javascript
微信小程序 仿猫眼实现实例代码
2017/03/14 Javascript
JavaScript 中 apply 、call 的详解
2017/03/21 Javascript
webpack学习笔记之代码分割和按需加载的实例详解
2017/07/20 Javascript
JS时间控制实现动态效果的实例讲解
2017/07/31 Javascript
基于JavaScript实现简单的音频播放功能
2018/01/07 Javascript
RequireJS用法简单示例
2018/08/20 Javascript
vue.js 2.*项目环境搭建、运行、打包发布的详细步骤
2019/05/01 Javascript
一文读懂ES7中的javascript修饰器
2019/05/06 Javascript
Vue项目中使用better-scroll实现菜单映射功能方法
2019/09/11 Javascript
js 解析 JSON 数据简单示例
2020/04/21 Javascript
vue:el-input输入时限制输入的类型操作
2020/08/05 Javascript
[04:19]DOTA2亚洲邀请赛 现场花絮
2015/03/11 DOTA
如何搜索查找并解决Django相关的问题
2014/06/30 Python
Python异常处理操作实例详解
2018/08/28 Python
python 实现将多条曲线画在一幅图上的方法
2019/07/07 Python
Pytorch实现LSTM和GRU示例
2020/01/14 Python
Win10里python3创建虚拟环境的步骤
2020/01/31 Python
python 实现一个图形界面的汇率计算器
2020/11/09 Python
深入解读CSS3中transform变换模型的渲染
2016/05/27 HTML / CSS
CK巴西官方网站:Calvin Klein巴西
2019/07/19 全球购物
购买正版游戏和游戏激活码:Green Man Gaming
2019/11/06 全球购物
银行简历自我评价
2014/02/11 职场文书
信仰心得体会
2014/09/05 职场文书
2014年教师节红领巾广播稿
2014/09/10 职场文书
2016年小学植树节活动总结
2016/03/16 职场文书
五年级作文之学校的四季
2019/12/05 职场文书