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


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获得选中文本内容的方法
Dec 02 Javascript
Js 时间函数getYear()的使用问题探讨
Apr 01 Javascript
利用js(jquery)操作Cookie的方法说明
Dec 19 Javascript
基于javascript实现图片切换效果
Apr 17 Javascript
jQuery实现ajax无刷新分页页码控件
Feb 28 Javascript
JS+HTML5实现上传图片预览效果完整实例【测试可用】
Apr 20 Javascript
Javascript实现一个简单的输入关键字添加标签效果实例
Jun 01 Javascript
JS设计模式之访问者模式定义与用法分析
Feb 05 Javascript
vuex state及mapState的基础用法详解
Apr 19 Javascript
分享5个顶级的JavaScript Ajax组件库
Sep 16 Javascript
vue使用echarts图表的详细方法
Oct 22 Javascript
详解Vue中Axios封装API接口的思路及方法
Oct 10 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
PHP基于curl后台远程登录正方教务系统的方法
2016/10/14 PHP
Javascript中的相等与不等运算
2010/04/25 Javascript
用nodejs访问ActiveX对象,以操作Access数据库为例。
2011/12/15 NodeJs
JavaScript获取/更改文本框的值的实例代码
2013/08/02 Javascript
flash遮住div问题的正确解决方法
2014/02/27 Javascript
JS函数重载的解决方案
2014/05/13 Javascript
原生JavaScript生成GUID的实现示例
2014/09/05 Javascript
JavaScript实现显示函数调用堆栈的方法
2016/04/21 Javascript
Bootstrap 手风琴菜单的实现代码
2017/01/20 Javascript
vue.js中指令Directives详解
2017/03/20 Javascript
详解vue-router 2.0 常用基础知识点之router.push()
2017/05/10 Javascript
JavaScript中的return布尔值的用法和原理解析
2017/08/14 Javascript
JavaScript原型链与继承操作实例总结
2018/08/24 Javascript
Element-ui之ElScrollBar组件滚动条的使用方法
2018/09/14 Javascript
微信小程序云开发之使用云函数
2019/05/17 Javascript
vue中的v-if和v-show的区别详解
2019/09/01 Javascript
JavaScript 实现轮播图特效的示例
2020/11/05 Javascript
[05:03]2018DOTA2亚洲邀请赛主赛事首日回顾
2018/04/04 DOTA
Python下的subprocess模块的入门指引
2015/04/16 Python
python开发之thread实现布朗运动的方法
2015/11/11 Python
Python实现的将文件每一列写入列表功能示例【测试可用】
2018/03/19 Python
python Flask 装饰器顺序问题解决
2018/08/08 Python
Django实现跨域请求过程详解
2019/07/25 Python
使用Python防止SQL注入攻击的实现示例
2020/05/21 Python
使用Python将语音转换为文本的方法
2020/08/10 Python
python中二分查找法的实现方法
2020/12/06 Python
python工具——Mimesis的简单使用教程
2021/01/16 Python
html5 初试 indexedDB(推荐)
2016/07/21 HTML / CSS
EJB包括(SessionBean,EntityBean)说出他们的生命周期,及如何管理事务的?
2013/02/17 面试题
《与象共舞》教学反思
2014/02/24 职场文书
党员民主评议自我评价
2014/10/20 职场文书
幼儿园端午节活动总结
2015/05/05 职场文书
忠诚与背叛观后感
2015/06/04 职场文书
告诉你一个秘密:富人致富的五大优点
2019/07/11 职场文书
处世之道:关于真诚相待的名言推荐
2019/12/02 职场文书
Python Numpy之linspace用法说明
2021/04/17 Python