<scroll-view class="scroll-container" upper-threshold="{{sortPanelDist}}" scroll-y="true" style="height:{{scrollHeight}}px;" bindscrolltolower="bindDownLoad"> <!-- 上面的scrollHeight参数必须要的,不然没法进行下一步,我这里为了兼容手机屏幕,使用的获取系统自适应高度 --> <view class="con12"> <block wx:for="{{homeList}}" wx:for-item="homeList" wx:for-index="index"> <navigator url="../home_detail/home_detail?home_id={{homeList.s_id}}"> <view class="index1-list"> <image src="{{homeList.pic_url}}" class="indeximg"> <span class="money">¥{{homeList.price}}</span> </image> <span class="cunhome-title">西厢房 · {{homeList.vil_name}}--{{homeList.s_title}}</span> <view class="describe"> {{homeList.s_desc}} </view> </view> </navigator> </block> </view> <!-- 上面是循环的数据 --> </scroll-view>
var page = 1;
// 获取数据的方法,具体怎么获取列表数据大家自行发挥
var GetList = function (that) {
wx.request({
url: 'https://m.xxiangfang.com/index.php/Home/Xiaoxxf/home_service', //民宿预订
data: {
page: page
},
header: {
'Content-Type': 'application/json'
},
method: 'GET',
success: function (res) {
that.setData({
homeList: res.data
})
page++;
},
fail: function (res) { },
complete: function (res) { },
})
}
Page({
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
var that = this;
//缓冲提醒
wx.showToast({
title: '加载中',
icon: 'loading',
duration: 400
})
//获取系统的参数,scrollHeight数值,微信必须要设置style:height才能监听滚动事件
wx.getSystemInfo({
success: function (res) {
console.info(res.windowHeight)
that.setData({
scrollHeight: res.windowHeight
})
}
});
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
var that = this;
GetList(that); //页面初次展示调用第一次数据,比如说5条记录
},
bindDownLoad: function () {
// 该方法绑定了页面滑动到底部的事件,下拉一次请求一次数据
wx.showToast({
title: '加载中',
icon: 'loading',
duration: 400
})
var that = this;
GetList(that); //页面拉一次,加载一次
},
})