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


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 textarea光标定位方法(兼容IE和FF)
Mar 12 Javascript
jquery js 重置表单 reset()具体实现代码
Aug 05 Javascript
jquery表单验证插件formValidator使用方法
Apr 01 Javascript
基于jQuery实现滚动切换效果
Dec 02 Javascript
ES6中Iterator与for..of..遍历用法分析
Mar 31 Javascript
JavaScript 上传文件(psd,压缩包等),图片,视频的实现方法
Jun 19 Javascript
将 vue 生成的 js 上传到七牛的实例
Jul 28 Javascript
详解Vue SSR( Vue2 + Koa2 + Webpack4)配置指南
Nov 13 Javascript
JS实现将对象转化为数组的方法分析
Jan 21 Javascript
微信小程序自定义头部导航栏和导航栏背景图片 navigationStyle问题
Jul 26 Javascript
vue实现商城秒杀倒计时功能
Dec 12 Javascript
vue route新窗口跳转页面并且携带与接收参数
Apr 10 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 zlib压缩和解压缩swf文件的代码
2008/12/30 PHP
解析php防止form重复提交的方法
2013/07/01 PHP
php使用fsockopen函数发送post,get请求获取网页内容的方法
2014/11/15 PHP
php实现根据IP地址获取其所在省市的方法
2015/04/30 PHP
php中strlen和mb_strlen用法实例分析
2016/11/12 PHP
HTML-CSS群中单选引发的“事件”
2007/03/05 Javascript
一个基于jquery的文本框记数器
2012/09/19 Javascript
display和visibility的区别示例介绍
2014/02/26 Javascript
Javascript 完美运动框架(逐行分析代码,让你轻松了运动的原理)
2015/01/23 Javascript
详解jQuery UI库中文本输入自动补全功能的用法
2016/04/23 Javascript
利用CSS、JavaScript及Ajax实现图片预加载的方法
2016/11/29 Javascript
Javascript 链式作用域详细介绍
2017/02/23 Javascript
vue.js实现价格格式化的方法
2017/05/23 Javascript
微信小程序使用wx.request请求服务器json数据并渲染到页面操作示例
2019/03/30 Javascript
js实现全选和全不选功能
2020/07/28 Javascript
[06:07]DOTA2-DPC中国联赛 正赛 Ehome vs VG 选手采访
2021/03/11 DOTA
Python递归遍历列表及输出的实现方法
2015/05/19 Python
python 函数传参之传值还是传引用的分析
2017/09/07 Python
Python内置模块logging用法实例分析
2018/02/12 Python
Python实现确认字符串是否包含指定字符串的实例
2018/05/02 Python
Ubuntu下使用python读取doc和docx文档的内容方法
2018/05/08 Python
浅谈python元素如何去重,去重后如何保持原来元素的顺序不变
2020/02/28 Python
Python selenium模拟手动操作实现无人值守刷积分功能
2020/05/13 Python
Python定义一个Actor任务
2020/07/29 Python
Python Opencv图像处理基本操作代码详解
2020/08/31 Python
澳大利亚家具和家居用品在线:BROSA
2017/11/02 全球购物
英国最大的体育&时尚零售公司:JD Sports
2017/12/13 全球购物
迪卡侬(Decathlon)加拿大官网:源自法国的运动专业超市
2020/11/22 全球购物
写给女朋友的检讨书
2014/01/28 职场文书
国旗下演讲稿
2014/05/08 职场文书
技术岗位竞聘演讲稿
2014/05/16 职场文书
2014年教育工作总结
2014/11/26 职场文书
2015年校务公开工作总结
2015/05/26 职场文书
新郎父母婚礼致辞
2015/07/27 职场文书
把77A收信机改造成收音机
2022/04/05 无线电
Win11远程连接不上怎么办?Win11远程桌面用不了的解决方法
2022/08/05 数码科技