微信小程序页面上下滚动效果

网友投稿 542 2023-11-12

本文实例为大家分享了微信小程序页面上下滚动的具体代码，供大家参考，具体内容如下

微信小程序页面上下滚动效果

看图

源码

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<view class="container container-fill">
<view class="scroll-fullpage" bindtouchstart="scrollTouchstart" bindtouchmove="scrollTouchmove" bindtouchend="scrollTouchend" style="transform:translateY(-{{scrollindex*100}}%);margin-top: {{margintop}}px">
<view class="section section01 {{scrollindex==0?active:}}" style="background: #3399FF;">
<text class="section-maintitle">页面1</text>
<text class="section-subtitle">我的页面”1</text>
</view>
<view class="section section02 {{scrollindex==1?active:}}" style="background: #00CC66;">
<text class="section-maintitle">页面2</text>
<text class="section-subtitle">我的页面”2</text>
</view>
<view class="section section03 {{scrollindex==2?active:}}" style="background: #33CCCC;">
<text class="section-maintitle">页面3</text>
<text class="section-subtitle">我的页面”3</text>
</view>
<view class="section section04 {{scrollindex==3?active:}}" style="background: #6699FF;">
<text class="section-maintitle">页面4</text>
<text class="section-subtitle">我的页面”4</text>
</view>
<view class="section section05 {{scrollindex==4?active:}}" style="background: #9966FF;">
<text class="section-maintitle">无缝对接双创服5</text>
<text class="section-subtitle">我的页面”5</text>
</view>
</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
Page({
data: {
scrollindex:0, //当前页面的索引值
totalnum:5, //总共页面数
starty:0, //开始的位置x
endy:0, //结束的位置y
critical: 100, //触发翻页的临界值
margintop:0, //滑动下拉距离
},
onLoad: function () {
},
scrollTouchstart:function(e){
let py = e.touches[0].pageY;
this.setData({
starty: py
})
},
scrollTouchmove:function(e){
let py = e.touches[0].pageY;
let d = this.data;
this.setData({
endy: py,
})
if(py-d.starty<100 && py-d.starty>-100){
this.setData({
margintop: py - d.starty
})
}
},
scrollTouchend:function(e){
let d = this.data;
if(d.endy-d.starty >100 && d.scrollindex>0){
this.setData({
scrollindex: d.scrollindex-1
})
}else if(d.endy-d.starty <-100 && d.scrollindex<this.data.totalnum-1){
this.setData({
scrollindex: d.scrollindex+1
})
}
this.setData({
starty:0,
endy:0,
margintop:0
})
},
})

css

为大家推荐现在关注度比较高的微信小程序教程一篇：《微信小程序开发教程》小编为大家精心整理的，希望喜欢。

您可能感兴趣的文章:微信小程序页面向下滚动时tab栏固定页面顶部实例讲解微信小程序弹窗禁止页面滚动的实现代码微信小程序页面滚动到指定位置代码实例微信小程序自定义弹窗滚动与页面滚动冲突的解决方法微信小程序之判断页面滚动方向的示例代码微信小程序实现监听页面滚动

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。

标签：程序 微信小程序 小程序 js 代码
上一篇:通过大白话理解微信小程序的授权登录
下一篇:微信小程序扫描普通二维码跳转到小程序指定页面操作方法
相关文章

 发表评论

暂时没有评论，来抢沙发吧~