小程序--左侧滑动查询条件

曾经终败给现在 2022-10-06 00:58 11阅读 0赞

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTcyMjkyOA_size_16_color_FFFFFF_t_70][]

1 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 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 bindtap="openSlider">

<image class="floatbutton \{ \{open ? 'c-button-open' : '' \}\}" src="../../../image/icon\_add.png"></image>

</view>

2.js

const DEFAULT\_PAGE = 0;

const app = getApp()

Page(\{  // 点击左下角小图标事件

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

\});

\})

3.css

/\*\*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;

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTcyMjkyOA_size_16_color_FFFFFF_t_70]: /images/20221005/afe77c79928044f48247e020d6f8b887.png

小程序--左侧滑动查询条件

发表评论取消回复

还没有评论，来说两句吧...

相关阅读

相关小程序 slider 双向滑动

相关小程序实现标尺滑动

相关微信小程序左侧竖形滑动菜单（仿淘宝分类界面）

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

相关小程序--左侧滑动查询条件

相关小程序--左侧滑动效果

相关小程序-左右滑动效果

相关小程序滑动悬浮tab

相关小程序-监听手势滑动

相关小程序判断滑动方向