小程序怎么设置页面滑动 微信小程序怎么滑动可以出来

文章摘要：小程序怎么设置页面滑动 微信小程序怎么滑动可以出来

设置小程序页面滑动的案例： 1、需要借助小程序的事件：onPageScroll事件。 2、需要借助的API：w […]

设置小程序页面滑动的案例：

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)

}