微信小程序实现左侧滑栏过程解析


Posted in Javascript onAugust 26, 2019

前言

一直想给项目中的小程序设置侧滑栏,将退出按钮放到侧滑中,但是小程序没有提供相应的控件和API,因此只能自己手动实现,网上很多大神造的轮子很不错,本文就在是站在巨人的肩膀上实现。

hexo图片不显示问题,可前往简书

效果

先看看效果,我的侧滑栏需要列出如下信息:

微信小程序实现左侧滑栏过程解析

初始状态下,左下角设置悬空按钮

点击悬空按钮,侧边栏拉出,悬空按钮旋转180度

主页内容向右滑动一定比例,并设置阴影遮罩

实现

首先将xml文件分为三部分,一部分是主页内容,一部分是侧滑栏内容,一部分是悬浮按钮。

<!--index.wxml-->
<view>
<!-- 侧边滑动菜单 -->
 <view class="page-slidebar">
  <view class="page-content">
   <view class="userinfo">
    <button wx:if="{{!hasUserInfo && canIUse}}" open-type="getUserInfo" bindgetuserinfo="getUserInfo"> 点击获取头像昵称 </button>
    <block wx:else>
     <image bindtap="bindViewTap" class="userinfo-avatar" src="{{userInfo.avatarUrl}}" mode="cover"></image>
     <text class="userinfo-nickname">{{userInfo.nickName}}</text>
    </block>
   </view>
   <view class="account-info">
    <view class="account-info-item">用户:{{YHMC}}</view>
    <view class="account-info-item">账号:{{YHZH}}</view>
    <view class="account-info-item">角色:{{YHJS}}</view>
    <view class="account-info-item">版本:{{version}}</view>
   </view>
   <view>
    <view class='quit-view'>
     <button class='quit-btn' bindtap='quit'>退出登录</button>
    </view>
   </view>
  </view>
 </view>
<!-- 主页内容 -->
 <view bindtouchmove="tap_drag" bindtouchend="tap_end" bindtouchstart="tap_start" class="page-top {{open ? ['c-state','cover'] : ''}} ">
  <view class="usermotto">
   <text class="user-motto">{{motto}}</text>
  </view>
 </view>
 <!-- 添加侧拉悬浮按钮 -->
 <view bindtap="openSlider">
  <image class="floatbutton {{open ? 'c-button-open' : '' }}" src="../../img/floatbutton.png"></image>
 </view>
</view>

wxss文件,样式文件中,主要是.c-state,.c-button-open,.cover三个样式。

/**index.wxss**/
.userinfo {
 display: flex;
 flex-direction: column;
 align-items: center;
}

.userinfo-avatar {
 width: 128rpx;
 height: 128rpx;
 margin: 20rpx;
 border-radius: 50%;
}

.userinfo-nickname {
 color: #aaa;
}

.account-info {
  margin-top: 50rpx;
}
.account-info-item {
 display: flex;
 align-items: center;
 height: 54px;
 margin-left: 10rpx;
 border-bottom: 1px solid #eee;
}


/* 侧边栏样式 */
.page-slidebar {
  height: 100%;
  width: 65%;
  position: fixed;
  background-color:white;
  z-index: 0;
}
 /* 主页样式 */
.page-top {
  height: 100%;
  position: fixed;
  width: 100%;
  background-color:white;
  z-index: 0;
  transition: All 0.4s ease;
  -webkit-transition: All 0.4s ease;
}

/* 控制侧边栏的内容距离顶部的距离 */
.page-content {
  padding-top: 60rpx;
}

/* 当屏幕向左滑动,出现侧边栏的时候,主页的动画样式 */
/* scale:取值范围 0~1 ,表示屏幕大小是原来的百分之几,可以自己修改成 0.8 试下*/
/* translate(60%,0%) 表示向左滑动的时候,侧边栏占用平时的宽度为 60%  */
.c-state {
  transform: rotate(0deg) scale(1) translate(65%, 0%);
  -webkit-transform: rotate(0deg) scale(1) translate(65%, 0%);
}

.floatbutton {
 position: fixed;
 width: 100rpx;
 height: 100rpx;
 bottom: 140rpx;
 left: 40rpx;
 z-index: 9999;
}

.c-button-open {
 transform: rotate(180deg) scale(1) translate(65%, 0%);
 -webkit-transform: rotate(180deg) scale(1) translate(65%, 0%);
 transition-duration:0.5s;
 -webkit-transition-duration: 0.5s;
 left: 60%;
}

/* 遮盖层样式 */
.cover{
  width: 100%;
  height: 100%;
  background-color:gray;
  opacity: 0.5;
  z-index: 9000;
}

.quit-view {
 height: 5%;
 width: 65%;
}

.quit-btn {
 position: fixed;
 bottom: 5rpx;
 z-index: 999;
 color: #fff;
 width: 65%;
 border-radius: 5rpx;
 background-color: #064acb;
}

js文件,这里不涉及我demo中申请用户信息内容。

// 点击左下角小图标事件
 openSlider: 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
   });
  }
 }

参考资料

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

微信小程序侧边栏滑动特效(左右滑动)

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

Javascript 相关文章推荐
Jquery实现无刷新DropDownList联动实现代码
Mar 08 Javascript
javascript 函数使用说明
Apr 07 Javascript
举例讲解JavaScript中将数组元素转换为字符串的方法
Oct 25 Javascript
jquery编写Tab选项卡滚动导航切换特效
Jul 17 Javascript
AngularJS 遇到的小坑与技巧小结
Jun 07 Javascript
JS表单提交验证、input(type=number) 去三角 刷新验证码
Jun 21 Javascript
vuejs父子组件之间数据交互详解
Aug 09 Javascript
微信web端后退强制刷新功能的实现代码
Mar 04 Javascript
jQuery实现常见的隐藏与展示列表效果示例
Jun 04 jQuery
Vue实现点击箭头上下移动效果
Jun 11 Javascript
js获取url页面id,也就是最后的数字文件名
Sep 25 Javascript
vue 如何从单页应用改造成多页应用
Oct 23 Javascript
vue柱状进度条图像的完美实现方案
Aug 26 #Javascript
React传值 组件传值 之间的关系详解
Aug 26 #Javascript
js实现指定时间倒计时效果
Aug 26 #Javascript
Vue.use()在new Vue() 之前使用的原因浅析
Aug 26 #Javascript
微信小程序事件 bindtap bindinput代码实例
Aug 26 #Javascript
详解在vue-cli3.0中自定css、js和图片的打包路径
Aug 26 #Javascript
微信小程序实现手势滑动效果
Aug 26 #Javascript
You might like
探讨GDFONTPATH能否被winxp下的php支持
2013/06/21 PHP
PHP微信模板消息操作示例
2017/06/29 PHP
Laravel框架Request、Response及Session操作示例
2019/05/06 PHP
Laravel框架集合用法实例浅析
2020/05/14 PHP
BOOM vs RR BO5 第二场 2.14
2021/03/10 DOTA
用Juery网页选项卡实现代码
2011/06/13 Javascript
深入理解JavaScript系列(9) 根本没有“JSON对象”这回事!
2012/01/15 Javascript
jquery批量设置属性readonly和disabled的方法
2014/01/24 Javascript
JavaScript中document.forms[0]与getElementByName区别
2015/01/21 Javascript
JavaScript数据类型检测代码分享
2015/01/26 Javascript
Highcharts学习之坐标轴
2016/08/02 Javascript
简单实现js浮动框
2016/12/13 Javascript
轻松实现jQuery添加删除按钮Click事件
2017/03/13 Javascript
nodeJS实现简单网页爬虫功能的实例(分享)
2017/06/08 NodeJs
基于JavaScript实现百度搜索框效果
2020/06/28 Javascript
JavaScript中Object值合并方法详解
2017/12/22 Javascript
angular写一个列表的选择全选交互组件的示例
2018/01/22 Javascript
node+koa2+mysql+bootstrap搭建一个前端论坛
2018/05/06 Javascript
vue项目使用微信公众号支付总结及遇到的坑
2018/10/23 Javascript
微信小程序实现留言板功能
2018/11/02 Javascript
Node.js文本文件BOM头的去除方法
2020/11/22 Javascript
在Python中使用base64模块处理字符编码的教程
2015/04/28 Python
Python JSON格式数据的提取和保存的实现
2019/03/22 Python
Python将json文件写入ES数据库的方法
2019/04/10 Python
Python局部变量与全局变量区别原理解析
2020/07/14 Python
Python3+Flask安装使用教程详解
2021/02/16 Python
HTML5 贪吃蛇游戏实现思路及源代码
2013/09/03 HTML / CSS
中东最大的在线宠物店:Dubai Pet Food
2020/06/11 全球购物
《湘夫人》教学反思
2014/02/21 职场文书
孝敬父母的演讲稿
2014/05/14 职场文书
2015年师德表现自我评价
2015/03/05 职场文书
三好学生竞选稿范文
2019/08/21 职场文书
高考要来啦!用Python爬取历年高考数据并分析
2021/06/03 Python
springboot临时文件存储目录配置方式
2021/07/01 Java/Android
十大最强奥特曼武器:怪兽战斗仪在榜,第五奥特之父只使用过一次
2022/03/18 日漫
Java多线程并发FutureTask使用详解
2022/06/28 Java/Android