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


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 相关文章推荐
javascript对象的property和prototype是这样一种关系
Mar 24 Javascript
js 判断计算字符串长度/判断空的简单方法
Aug 05 Javascript
JS实现动态生成表格并提交表格数据向后端
Nov 25 Javascript
JavaScript必知必会(二) null 和undefined
Jun 08 Javascript
Bootstrap整体框架之JavaScript插件架构
Dec 15 Javascript
Ajax基础知识详解
Feb 17 Javascript
jquery实现tab键进行选择后enter键触发click行为
Mar 29 jQuery
jquery 校验中国身份证号码实例详解
Apr 11 jQuery
angular directive的简单使用总结
May 24 Javascript
在Create React App中使用CSS Modules的方法示例
Jan 15 Javascript
JavaScript ES2019中的8个新特性详解
Feb 20 Javascript
vue监听滚动事件的方法
Dec 21 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
php实现读取内存顺序号
2015/03/29 PHP
向当前style sheet中插入一个新的style实现方法
2013/04/01 Javascript
ff下JQuery无法监听input的keyup事件的解决方法
2013/12/12 Javascript
JQuery为页面Dom元素绑定事件及解除绑定方法
2014/04/23 Javascript
js简单的弹出框有关闭按钮
2014/05/05 Javascript
javascript去除字符串中所有标点符号和提取纯文本的正则
2014/06/07 Javascript
node.js中的fs.link方法使用说明
2014/12/15 Javascript
javascript中定义类的方法详解
2015/02/10 Javascript
分享自己用JS做的扫雷小游戏
2016/02/17 Javascript
jQuery实现隔行变色的方法分析(对比原生JS)
2016/11/18 Javascript
angularJS模态框$modal实例代码
2017/05/27 Javascript
js 开发之autocomplete=&quot;off&quot;在chrom中失效的解决办法
2017/09/28 Javascript
浅谈webpack 构建性能优化策略小结
2018/06/13 Javascript
记一次Vue.js混入mixin的使用(分权限管理页面)
2019/04/17 Javascript
微信小程序 腾讯地图显示偏差问题解决
2019/07/27 Javascript
vue解决使用$http获取数据时报错的问题
2019/10/30 Javascript
[01:02:09]Liquid vs TNC 2019国际邀请赛淘汰赛 胜者组 BO3 第二场 8.21
2020/07/19 DOTA
Python实现单词翻译功能
2017/06/06 Python
使用python语言,比较两个字符串是否相同的实例
2018/06/29 Python
python3实现逐字输出的方法
2019/01/23 Python
python基于Selenium的web自动化框架
2019/07/14 Python
解决pandas展示数据输出时列名不能对齐的问题
2019/11/18 Python
python标准库sys和OS的函数使用方法与实例详解
2020/02/12 Python
python 写一个性能测试工具(一)
2020/10/24 Python
pandas 按日期范围筛选数据的实现
2021/02/20 Python
纯CSS3单页切换导航菜单界面设计的简单实现
2016/08/16 HTML / CSS
phpquery中文手册
2021/03/18 PHP
汽车检测与维修应届毕业生求职信
2013/10/19 职场文书
会计主管岗位职责
2014/01/03 职场文书
国际商务专业职业生涯规划书范文
2014/01/17 职场文书
银行贷款承诺书
2014/03/29 职场文书
上班时间打瞌睡检讨书
2014/09/26 职场文书
精神病医院见习报告
2014/11/03 职场文书
第28个世界无烟日活动总结
2015/02/10 职场文书
2016年社区“我们的节日·中秋节”活动总结
2016/04/05 职场文书
Spring IOC容器Bean的作用域及生命周期实例
2022/05/30 Java/Android