手机版

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

时间:2021-08-20 来源:互联网 编辑:宝哥软件园 浏览:

前言

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

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

效果

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

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

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

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

实现

首先将可扩展标记语言文件分为三部分,一部分是主页内容,一部分是侧滑栏内容,一部分是悬浮按钮。

!- index.wxml - view!-侧边滑动菜单-view class=' page-slide bar ' view class=' page-content ' view class=' user info '按钮wx : if=' { {!hasUserInfo可以使用} } ' open-type=' Geuserinfo ' bind Geuserinfo=' Geuserinfo '点击获取头像昵称/button block wx : else image bind tap=' BindViewtap ' class=' user info-avatar ' src=' http : { { UserInfo }。头像URL } } '模式='封面'/图像文本类=' userinfo-昵称{ userinfo。昵称} }/text/block/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 '按钮class='退出-btn' bindtap='退出'退出登录/按钮/视图/视图/视图/视图!-主页内容-view bind touch move=' tap _ drag ' bind touch end=' tap _ end ' bind touch start=' tap _ start ' class=' page-top { { open?['c-state ',' cover ']: ' ' } } ' view class=' user motion ' text class=' user-motion ' { { motion } }/text/view/view!-添加侧拉悬浮按钮-查看绑定点击=' Openslider ' image class=' float button { { open?c-button-open ' : ' ' } } ' src=' http : '././img/浮动按钮。png '/image/view/view wxss文件,样式文件中,主要是c .状态c .按钮打开。涉及三个样式。

/**index.wxss**/.user info { display : flex flex-direction :柱;align-items:居中;}.用户信息-头像{ width : 128 rpx高度: 128rpxmargin: 20rpx边界半径: 50%;}.用户信息-昵称{ color: # aaa}。帐户信息{页边距-top : 50 rpx;}.帐户信息项目{ display : flex align-items :居中;高度: 54px左边距left : 10 rpx border-bottom : 1 px实心# eee}/*侧边栏样式*/.页面-滑动条{高度: 100%;宽度: 65%;位置:固定;背景-颜色:白色;z-index : 0;} /* 主页样式*/.页面顶端{身高: 100%;位置:固定;宽度: 100%;背景-颜色:白色;z-index : 0;过渡:所有0.4秒轻松;-WebKit-transit :所有0.4s轻松版;}/* 控制侧边栏的内容距离顶部的距离*/.页面内容{填充-top : 60 rpx;}/* 当屏幕向左滑动,出现侧边栏的时候,主页的动画样式*//*比例:取值范围0~1 ,表示屏幕大小是原来的百分之几,可以自己修改成0.8 试下*//*翻译(60%,0%)表示向左滑动的时候,侧边栏占用平时的宽度为60% */.c状态{ transform : }旋转(0度)刻度(1)平移(65%,0%);-webkit-transform:旋转(0度)比例(1)平移(65%,0%);}.浮动按钮{位置:固定;宽度: 100 rpx高度: 100 rpxbottom : 140 rpxleft : 40 rpxz-index : 9999;}.c-按钮-打开{ transform:旋转(180度)刻度(1)平移(65%,0%);-webkit-transform:旋转(180度)比例(1)平移(65%,0%);过渡-持续时间:0.5秒;-web套件-过渡-持续时间: 0.5s左: 60%;}/* 遮盖层样式*/.覆盖{宽度: 100%;高度: 100%;背景-颜色:灰色;opa city 3360 0.5z-指数: 9000;}.退出-查看{身高:5%;宽度: 65%;}.退出-BTN {职位: }已修复;底部: 5rpxz-指数: 999;color: # fff宽度: 65%;边界半径: 5rpx背景色: # 064 ACB;}js文件,这里不涉及我演示中申请用户信息内容。

//点击左下角小图标事件openSlider:函数{如果(这个。数据。打开){这个。setdata({ open : false });} else { this。setdata({ open : true });} },点击_start:函数{ //touchstart事件//把手指触摸屏幕的那一个点的x轴坐标赋值给标记和新标记这个。数据。马克=这个。数据。新标记=e . touch[0 ].pageX},点击_drag:函数(e) { //touchmove事件这个。数据。新标记=e . touch[0 ].pageX//手指从左向右移动如果(这个。数据。标记这个。数据。新标记){这个。istor ight=true} //手指从右向左移动如果(这个。数据。标记这个。数据。新标记){这个。istor ight=false}这个。数据。马克=这个。数据。新标记;},点击_end:函数(e) { //touchend事件这个。数据。mark=0;这个。数据。新标记=0;//通过改变opne的值,让主页加上滑动的样式如果(这个。这是对的。setdata({ open : true });} else { this。setdata({ open : false });} }参考资料

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

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

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

版权声明:微信小程序实现左侧滑栏过程解析是由宝哥软件园云端程序自动收集整理而来。如果本文侵犯了你的权益,请联系本站底部QQ或者邮箱删除。