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


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 相关文章推荐
ExtJS GTGrid 简单用户管理
Jul 01 Javascript
如何使用Jquery获取Form表单中被选中的radio值
Aug 09 Javascript
用unescape反编码得出汉字示例
Apr 24 Javascript
javascript自动生成包含数字与字符的随机字符串
Feb 09 Javascript
jQuery mobile转换url地址及获取url中目录部分的方法
Dec 04 Javascript
mongoose中利用populate处理嵌套的方法
May 26 Javascript
Agularjs妙用双向数据绑定实现手风琴效果
May 26 Javascript
解决vue-router中的query动态传参问题
Mar 20 Javascript
脚手架vue-cli工程webpack的基本用法详解
Sep 29 Javascript
Vue路由 重定向和别名的区别说明
Sep 09 Javascript
解决element-ui的下拉框有值却无法选中的情况
Nov 07 Javascript
详解vite+ts快速搭建vue3项目以及介绍相关特性
Feb 25 Vue.js
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
网页游戏开发入门教程二(游戏模式+系统)
2009/11/02 PHP
Thinkphp实现自动验证和自动完成
2015/12/19 PHP
PHP时间相关常用函数用法示例
2020/06/03 PHP
JavaScript伸缩的菜单简单示例
2013/12/03 Javascript
如何让浏览器支持jquery ajax load 前进、后退功能
2014/06/12 Javascript
wap图片滚动特效无css3元素纯js脚本编写
2014/08/22 Javascript
JS+Canvas 实现下雨下雪效果
2016/05/18 Javascript
jQuery实现table中的tr上下移动并保持序号不变的实例代码
2016/07/11 Javascript
AngularJS教程 ng-style 指令简单示例
2016/08/03 Javascript
bootstrap侧边栏圆点导航
2017/01/11 Javascript
vue2.0组件之间传值、通信的多种方式(干货)
2018/02/10 Javascript
详解JavaScript中操作符和表达式
2018/09/12 Javascript
vue-quill-editor+plupload富文本编辑器实例详解
2018/10/19 Javascript
vue实现表单录入小案例
2019/09/27 Javascript
Openlayers实现地图全屏显示
2020/09/28 Javascript
vue将文件/图片批量打包下载zip的教程
2020/10/21 Javascript
[06:25]DOTA2英雄梦之声_第17期_大地之灵
2014/06/20 DOTA
[03:40]DOTA2亚洲邀请赛小组赛第二日 赛事回顾
2015/01/31 DOTA
[01:04:14]VP vs TNC 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/20 DOTA
用Python实现QQ游戏大家来找茬辅助工具
2014/09/14 Python
pymongo为mongodb数据库添加索引的方法
2015/05/11 Python
Python实现的选择排序算法原理与用法实例分析
2017/11/22 Python
python利用OpenCV2实现人脸检测
2020/04/16 Python
python DES加密与解密及hex输出和bs64格式输出的实现代码
2020/04/13 Python
阿迪达斯香港官网:adidas香港
2019/11/09 全球购物
Monica Vinader官网:英国轻奢珠宝品牌
2020/02/05 全球购物
The North Face意大利官网:服装、背包和鞋子
2020/06/17 全球购物
Ref与out有什么不同
2012/11/24 面试题
高等教育专业自荐信范文
2014/03/26 职场文书
产品生产计划书
2014/05/07 职场文书
警察先进个人事迹材料
2014/05/16 职场文书
高中课前三分钟演讲稿
2014/09/13 职场文书
2014党的群众路线教育实践活动总结材料
2014/10/31 职场文书
2014年扫黄打非工作总结
2014/12/03 职场文书
单身证明格式样本
2015/06/15 职场文书
个人工作失误的保证书怎么写?
2019/06/21 职场文书