本文實例為大家分享了微信小程序頁面上下滾動的具體代碼，供大家參考，具體內(nèi)容如下
為羅源等地區(qū)用戶提供了全套網(wǎng)頁設(shè)計制作服務(wù)，及羅源網(wǎng)站建設(shè)行業(yè)解決方案。主營業(yè)務(wù)為網(wǎng)站制作、網(wǎng)站設(shè)計、羅源網(wǎng)站設(shè)計，以傳統(tǒng)方式定制建設(shè)網(wǎng)站，并提供域名空間備案等一條龍服務(wù)，秉承以專業(yè)、用心的態(tài)度為用戶提供真誠的服務(wù)。我們深信只要達(dá)到每一位用戶的要求，就會得到認(rèn)可，從而選擇與我們長期合作。這樣，我們也可以走得更遠(yuǎn)！
看圖
源碼
頁面1 我的頁面”1 頁面2 我的頁面”2 頁面3 我的頁面”3 頁面4 我的頁面”4 無縫對接雙創(chuàng)服5 我的頁面”5
js
重慶分公司
重慶分公司
Page({
data: {
scrollindex:0, //當(dāng)前頁面的索引值
totalnum:5, //總共頁面數(shù)
starty:0, //開始的位置x
endy:0, //結(jié)束的位置y
critical: 100, //觸發(fā)翻頁的臨界值
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.scrollindexcss
.container-fill{
height: 100%;
overflow: hidden;
}
.scroll-fullpage{
height: 100%;
transition: all 0.3s;
}
.section{
height: 100%;
}
.section-maintitle{
display: block;
text-align: center;
font-size: 50rpx;
color: #fff;
font-weight: bold;
letter-spacing: 10rpx;
padding-top: 140rpx;
}
.section-subtitle{
display: block;
text-align: center;
font-size: 40rpx;
color: #fff;
font-weight: bold;
letter-spacing: 10rpx;
}
.active .section-maintitle,
.active .section-subtitle{
animation: mymove 0.8s;
}
@keyframes mymove{
from {
transform: translateY(-400rpx) scale(0.5) rotateY(90deg);
}
to {
transform: translateY(0) scale(1) rotateY(0);
}
}以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持創(chuàng)新互聯(lián)。
