有些情况,例如在详情页,可能涉及的接口个数比较多,因为详情一般数据量比较庞大,如果部分开,一个接口请求,会导致请求时间比较长,用户体验会很差,所以此时就可把这个大接口分开,当页面滚动到某个楼层时再请求后边楼层的数据。
1.代码
1.wxml
<view style="width:100%;height:200rpx;">1</view>
<view style="width:100%;height:500rpx;">2</view>
<view style="width:100%;height:300rpx;">3</view>
<view class='wz1'></view>
<view style="width:100%;height:700rpx;">4</view>
<view class='wz2'></view>
<view style="width:100%;height:100rpx;">5</view>
<view class='wz3'></view>
<view style="width:100%;height:600rpx;">6</view>
<view style="width:100%;height:700rpx;">7</view>
1.2js
var that;
Page({
/**
* 页面的初始数据
*/
data: {
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function(options) {
that = this;
// 判断是否加载过了(分栋,评论,热门楼盘)
that.data.wz1Flag = true;
that.data.wz1Top = 0;
that.data.wz2Flag = true;
that.data.wz2Top = 0;
that.data.wz3Flag = true;
that.data.wz3Top = 0;
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
// 监听页面滚动
onPageScroll: function(e) {
that.getEleLocation();
var scrollTop = e.scrollTop;
if (that.data.wz1Flag && (that.data.wz1Top != 0) && (scrollTop>=that.data.wz1Top)) {
console.log('加载位置1')
//请求一次开关关闭
that.data.wz1Flag = false;
}
if (that.data.wz2Flag && (that.data.wz2Top != 0) && (scrollTop>=that.data.wz2Top)) {
console.log('加载位置2')
//请求一次开关关闭
that.data.wz2Flag = false;
}
if (that.data.wz3Flag && (that.data.wz3Top != 0) && (scrollTop>=that.data.wz3Top)) {
// 同区属热门楼盘
console.log('加载位置3')
//请求一次开关关闭
that.data.wz3Flag = false;
}
},
// 获取位置
getEleLocation() {
wx.createSelectorQuery().selectAll('.wz1').boundingClientRect(function(rect) {
that.data.wz1Top = rect[0].top;
}).exec();
wx.createSelectorQuery().selectAll('.wz2').boundingClientRect(function(rect) {
that.data.wz2Top = rect[0].top;
}).exec();
wx.createSelectorQuery().selectAll('.wz3').boundingClientRect(function(rect) {
that.data.wz3Top = rect[0].top;
}).exec();
},
})
1.3效果
2.说明
2.1思路:在页面的某个楼层写一个view标签并绑定一个class名字,在滚动事件中监听滚动的距离顶部的距离和这个view标签距离顶部的高度进行对比,如果滚动距离大于这个view标签距离顶部的距离,则请求接口加载数据。当然了,只是展示型数据,加一次就行了,所以再用一个开关控制一下保证只加载一次就好了。
2.2在某些页面中还存在展开和收起按钮,在点击该按钮时,元素距离顶部的高度会发生变化,此时需要重新获取高度,否则就不对了,所以最好把获取高度的写成一个方法,在展开收起时重新计算高度。
2..3 获取高度有两种位置书写:①写在数据渲染完成一次,在点击展开收起一次;②直接写在滚动函数中,只要发生滚动就计算一次。建议用①的写法,不用每次滚动都获取。