设置小程序页面滑动的案例:1、需要借助小程序的事件:onPageScroll事件。2、需要借助的api:wx.getSystemInfoSync()。java代码:data :{scrollTop: 0},//监听屏幕滚
设置小程序页面滑动的案例:
1、需要借助小程序的事件:onPageScroll事件。
2、需要借助的api:wx.getSystemInfoSync()。
java代码:
data :{scrollTop: 0
},
//监听屏幕滚动 判断上下滚动
onPageScroll: function (ev) {
var _this = this;
//当滚动的top值最大或最小时,为什么要做这一步是因为在手机实测小程序的时候会发生滚动条回弹,所以为了处理回弹,设置默认最大最小值
if (ev.scrollTop wx.getSystemInfoSync().windowHeight) {
ev.scrollTop = wx.getSystemInfoSync().windowHeight;
}
//判断浏览器滚动条上下滚动
if (ev.scrollTop > this.data.scrollTop || ev.scrollTop == wx.getSystemInfoSync().windowHeight) {
//向下滚动
} else {
//向上滚动
}
//给scrollTop重新赋值
setTimeout(function () {
_this.setData({
scrollTop: ev.scrollTop
})
}, 0)
}
onPageScroll(ev) {
var self = this;
//当滚动的top值最大或最小时,为什么要做这一步是因为在手机实测小程序的时候会发生滚动条回弹,所以为了处理回弹,设置默认最大最小值
if (ev.scrollTop wx.getSystemInfoSync().windowHeight) {
ev.scrollTop = wx.getSystemInfoSync().windowHeight;
}
//判断浏览器滚动条上下滚动
// this.scrollTop || ev.scrollTop == wx.getSystemInfoSync().windowHeight
if (ev.scrollTop > 100) {
console.log(ev.scrollTop, '111');
self.fixBottomBg2 = true;
self.imgSrc = 'home_black_03.png'
} else if (ev.scrollTop > 10) {
self.fixBottomBg1 = true;
console.log('222');
} else {
self.imgSrc = 'home_03.png';
self.fixBottomBg2 = false;
self.fixBottomBg1 = false;
}
self.$apply();
//给scrollTop重新赋值
// setTimeout(function () {
// _this.setData({
// scrollTop: ev.scrollTop
// })
// }, 0)
}
--结束END--
本文标题: 小程序怎么设置页面滑动
本文链接: https://www.lsjlt.com/news/116744.html(转载时请注明来源链接)
有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
下载Word文档到电脑,方便收藏和打印~
2024-05-02
2024-05-02
2024-05-02
2024-05-02
2024-05-02
2024-05-02
2024-05-02
2024-05-02
2024-05-02
2024-05-02
回答
回答
回答
回答
回答
回答
回答
回答
回答
回答
0