移动端+微信小程序实现,手机端滑动分页代码思路
来源:互联网 发布:安智市场软件 编辑:程序博客网 时间:2024/06/05 20:48
<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); //页面拉一次,加载一次
},
})
阅读全文
0 0
- 移动端+微信小程序实现,手机端滑动分页代码思路
- 手机端滑动分页代码思路
- 手机移动端横向日期选择器实现思路
- 视频监控实现思路(移动端)
- 移动端滑动分页详解(手写插件+亲测demo)
- js 手机端滑动分页SPager 基本示例
- JS 手机端滑动分页插件 SPager 最新版
- javascript移动端手机事件,禁止页面滑动
- 移动端实现导航的左右滑动
- 手机端图片左右滑动效果实现
- 手机滑动分页
- hbase分页应用场景及分页思路与代码实现
- 移动设备、手机浏览器Javascript滑动事件代码
- 移动设备、手机浏览器Javascript滑动事件代码
- 移动设备、手机浏览器Javascript滑动事件代码
- web移动端滑动
- 移动端滑动删除
- 移动端上下左右滑动
- 二叉树(Binary tree)--算法学习之路(一)
- 整理的优秀博客链接
- UE4 动画重定向之不同的骨骼共用同一套动画
- centos6.5网卡绑定,shell脚本
- vue项目中对axios的封装
- 移动端+微信小程序实现,手机端滑动分页代码思路
- 企业级负载平衡简介
- CronTrigger
- 1022. Digital Library (30) 字符串处理题
- linux下centos生成火车动画
- 使用ffmpeg将视频转为x264编码的mp4文件
- C语言排序(三)——快速排序与随机化快排
- springboot视图解析器
- CentOS 7.0+flume+kafka类似日志输出存储