本文实例为大家分享了微信小程序实现页面左右滑动的具体代码，供大家参考，具体内容如下
效果：
wxml文件
|
1
2
3
4
5
6
|
<view bindtouchmove="tap_drag" bindtouchend="tap_end" bindtouchstart="tap_start" class="page-top {{open ? ['c-state','cover'] : ''}} "> <view bindtap="tap_ch" style="{{open ? 'color: red;font-weight: bold;' : ''}}">{{open ? '手指左滑' : '手指右滑'}}</view> <view class='content'> <text>我是内容我是内容！</text> </view></view> |
js文件
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
|
data: {open: false,// mark 是指原点x轴坐标mark: 0,// newmark 是指移动的最新点的x轴坐标 newmark: 0,istoright: true }, // 点击左上角小图标事件 tap_ch: 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 }); } }, |
wxss文件
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
|
/* 全局样式 */page, .page { height: 100%; font-family: 'PingFang SC', 'Helvetica Neue', Helvetica, 'Droid Sans Fallback', 'Microsoft Yachei', sans-serif;} /* 侧边栏样式 */.page-slidebar { height: 100%; width: 750rpx; position: fixed; background-color:white; z-index: 0;} /* 控制侧边栏的内容距离顶部的距离 */.page-content { padding-top: 60rpx;} /* 侧边栏内容的 css 样式 */.wc { color:black; padding: 30rpx 0 30rpx 150rpx; border-bottom: 1px solid #eee; } /* 当屏幕向左滑动，出现侧边栏的时候，主页的动画样式 *//* scale：取值范围 0~1 ，表示屏幕大小是原来的百分之几，可以自己修改成 0.8 试下*//* translate(60%,0%) 表示向左滑动的时候，侧边栏占用平时的宽度为 60% *//* translate(-60%,0%) 表示向右滑动的时候，侧边栏占用平时的宽度为 60% */.c-state { transform: rotate(0deg) scale(1) translate(60%, 0%); -webkit-transform: rotate(0deg) scale(1) translate(60%, 0%);} /* 主页样式 */.page-top { height: 100%; position: fixed; width: 750rpx; background-color:white; z-index: 0; transition: All 0.4s ease; -webkit-transition: All 0.4s ease;}/* 左上角图标的样式 */.page-top image { position: absolute; width: 68rpx; height: 68rpx; left: 20rpx; top: 20rpx;} /* 遮盖层样式 */.cover{ width: 100%; height: 100%; background-color:gray; opacity: 0.5; z-index: 9000;} .content{ margin-top: 100rpx; } |
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持服务器之家。
原文链接：https://blog.csdn.net/qq_43201350/article/details/109613706
