小程序上滑下滑效果的示例代码
时间：2022-08-08 08:21:18|栏目：JavaScript代码|点击： 次
首先上视频 ，csdn上传视频还要上传到腾讯视频或者B站才能发，太捞了，视频之前录好了，弄成gif图将就看吧。
就像图里展示的那样，我要的是这种效果，滑动一下就进入下个页面，而不是划一下就动一点点。
H5营销页面倒是很经常能看到这种效果。
本人前端菜鸡，百度了好久，都是什么touchstart和touchend，还有轮播图的实现效果。
但是我之前用过touchstart和touchend，感觉其实体验很不好。
在我的手机上能体现出明细的卡顿效果，有的时候还不生效，可能是在提醒我可以换手机了。
轮播图的话，这次我要实现的效果还要左右滑动，左右滑动用轮播图实现，这个上下滑动就不能用轮播图实现了。
要注意的是，这个效果我这边只在手机端能实现，电脑端是出现不了这个效果的。
直接贴代码吧：
<view class="page-section-spacing"> <scroll-view scroll-y="true" bindscrolltoupper="upper" bindscrolltolower="lower" bindscroll="scroll" scroll-into-view="{<!--{C}%3C!%2D%2D%20%2D%2D%3E-->{toView}}" scroll-top="{<!--{C}%3C!%2D%2D%20%2D%2D%3E-->{scrollTop}}" paging-enabled="true" enhanced="true" class="scroll-view" show-scrollbar="false"> <view id="demo1" class="scroll-view-item demo-text-1"></view> <view id="demo2" class="scroll-view-item demo-text-2"></view> <view id="demo3" class="scroll-view-item demo-text-3"></view> </scroll-view></view><view class="page-section-spacing">
<scroll-view scroll-y="true" bindscrolltoupper="upper" bindscrolltolower="lower" bindscroll="scroll" scroll-into-view="{{toView}}" scroll-top="{{scrollTop}}" paging-enabled="true" enhanced="true" class="scroll-view" show-scrollbar="false">
<view id="demo1" class="scroll-view-item demo-text-1"></view>
<view id="demo2" class="scroll-view-item demo-text-2"></view>
<view id="demo3" class="scroll-view-item demo-text-3"></view>
</scroll-view>
</view>
page{
height: 100%;
}
.page-section-spacing{
/* margin-top: 60rpx; */
height: 100%;
}
.scroll-view{
height: 100%;
}
.scroll-view_H{
white-space: nowrap;
}
.scroll-view-item{
height: 100%;
}
.scroll-view-item_H{
display: inline-block;
width: 100%;
height: 100%;
}
.demo-text-1{
background-color: green;
}
.demo-text-2{
background-color: black;
}
.demo-text-3{
background-color: blue;
}
const order = ['demo1', 'demo2', 'demo3']
Page({
onShareAppMessage() {
return {
title: 'scroll-view',
path: 'page/component/pages/scroll-view/scroll-view'
}
},
data: {
toView: 'green'
},
upper(e) {
console.log(e)
},
lower(e) {
console.log(e)
},
scroll(e) {
console.log(e)
},
scrollToTop() {
this.setAction({
scrollTop: 0
})
},
tap() {
for (let i = 0; i < order.length; ++i) {
if (order[i] === this.data.toView) {
this.setData({
toView: order[i + 1],
scrollTop: (i + 1) * 200
})
break
}
}
},
tapMove() {
this.setData({
scrollTop: this.data.scrollTop + 10
})
}
})
关键在于这两个属性
查了好久小程序文档，才看到这两个属性的说明：
疑似是我想要的效果，那么直接试试就行了，你大可以把这两个属性去掉再试一遍，不过还是要注意，只有在手机上才会生效。
另外的，假设换成scroll-x，即横向滑动，就可以做出小说和漫画阅读的那种左右滑动翻页效果了。
上一篇：微信小程序自定义导航栏效果
栏 目：JavaScript代码
本文标题：小程序上滑下滑效果的示例代码
本文地址：http://www.codeinn.net/misctech/210213.html
