转载:移动端+微信小程序实现,手机端滑动分页代码思路(ajax)
//一般在PC上我们要分页都是通过上一页和下一页来实现的,手机通过当下滑到一定程度的时候自动加载下一页面
//实现思路:首先加载部分数据,当下滑到某个元素可见的时候,如果还有数据,则新发送请求,然后追加在当前页面
一、PC端
/*
*<div class='topicBox' id='listBox'>
*</div>
*/
//判断元素是否进入可视区域
function see(objLiLast) {
//浏览器可视区域的高度
var see = document.documentElement.clientHeight;
//滚动条滑动的距离
var winScroll = $(this).scrollTop();
//距离浏览器顶部的
var lastLisee = $(objLiLast).offset().top;
return lastLisee < (see + winScroll) ? true : false;
}
//预设页码为当前第一页
var page = 1;
//获得总页码
var pageTotal = parseInt($('#allpage').val());
//是否请求出AJAX的“开关”;
var onOff = true;
$(window).scroll(function () {
//拖动滚条时,是否发送AJAX的一个“开关”
$('.topicBox').each(function () {
//引用最后一个div
var lastLi = $('.topicBox:last');
//调用是否进入可视区域函数
var isSee = see(lastLi);
if (isSee && onOff && page < pageTotal) {//最底部元素可见,开关开启而且还有下拉
//$('#loadNext').show(); //显示正在加载图标
onOff = false;
$.ajax({
url: '/GetPageData',
type: 'GET',
dataType: 'json',
data: {
page: page+1
},
asyc: false,
success: function (result) {
if (result.status == 'success') {
var data = result.result;
for (var i = 0; i < data.length; i++) {
//to do coding ...
};
}
//$('#loadNext').hide(); //隐藏正在加载
onOff = true;
page ++;
}
}); }
});
});
二、微信小程序端:wxml
<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>
js
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); //页面拉一次,加载一次
}, })
转载:移动端+微信小程序实现,手机端滑动分页代码思路(ajax)的更多相关文章
- 微信小程序-强制手机端更新
小程序的更新机制 开发者在管理后台发布新版本的小程序之后,如果某个用户本地有小程序的历史版本,此时打开的可能还是旧版本.微信客户端会有若干个时机去检查本地缓存的小程序有没有更新版本,如果有则会静默更新 ...
- java服务端微信小程序支付
发布时间:2018-10-05 技术:springboot+maven 概述 java微信小程序demo支付只需配置支付一下参数即可运行 详细 代码下载:http://www.demodash ...
- 转载:【微信小程序】 wx:if 与 hidden(隐藏元素)区别
条件渲染 顾名思义所谓的条件渲染,就是通过条件来判断是否需要渲染该代码块.条件渲染主要是用到wx:if 和 block wx:if 这两个,第一个相信好理解,第二个是在block里面进行条件渲染,这里 ...
- 微信小程序初探(二、分页数据请求)
大家好 波哥小猿又来啦[斜眼笑],昨天咱们讲了微信小程序简单数据请求,有没有照着教程实现请求的同学们啦 实现的同学举个爪[笑脸].哈哈,好了不扯犊子啦,我相信有的同学已经实现了简单的数据请求,没有实现 ...
- 【微信小程序】使用setTimeout制作定时器的思路
setTimeout(func, time)可以使得每隔time毫秒就执行一次func函数,常用来做计时器/时钟. 下面是在微信小程序中的使用思路,只截取了关键部分代码. var timer; // ...
- 微信小程序+php 授权登陆,完整代码
先上图 实现流程: 1.授权登陆按钮和正文信息放到了同一个页面,未授权的时候显示登陆按钮,已授权的时候隐藏登陆按钮,显示正文信息,当然也可以授权和正文分开成两个页面,在授权页面的onlo ...
- 微信小程序页面阻止默认滑动事件
在页面上要加入一个悬浮的按钮,这个按钮需要可以拖动,在元素中使用catchtouchstart,catchtouchmove,catchtouchend来控制悬浮按钮的拖动,但是在ios系统中,微信小 ...
- 【微信小程序】手写索引选择器(城市列表,汽车品牌选择列表)
摘要: 小程序索引选择器,点击跳转相应条目,索引可滑动,滑动也可跳转 场景:城市选择列表, 汽车品牌选择列表 所用组件: scroll-view(小程序原生) https://developers.w ...
- 微信小程序:手写日历组件
一.前言 最近公司要做一个酒店入住的小程序,不可避免的一定会使用到日历,而小程序没有内置的日历组件.在网上看了一下也没有非常适合需求的日历,于是自己写了一个. 二.代码 1. 原理分析 写一个日历只需 ...
随机推荐
- xShell终端中文乱码完全解决方法
xShell终端中文乱码完全解决方法 xShell(xShell5)以及其他终端中文乱码的原因无非有三种:(1)Linux系统的编码问题:(2)xShell终端的编码问题: (3)两端的语言编码不一致 ...
- 定制django admin页面的跳转
在django admin的 change_view, add_view和delete_view页面,如果想让页面完成操作后跳转到我们想去的url,该怎么做 默认django admin会跳转到ch ...
- 详解 HTML5 中的 WebSocket 及实例代码-做弹幕
原文链接:http://www.php.cn/html5-tutorial-363345.html
- 20145105 《Java程序设计》实验三总结
实验三 一. 实验内容 结对修改实验一代码,重点学习重构 二. 实验步骤 下载结伴同学的实验一代码 初始代码 进行整数.小数和负数的多组数据测试,发现一个运行错误的例子 分析后 ...
- cron表达式增加一段时间变为新的表达式
cron表达式是使用任务调度经常使用的表达式了.对于通常的简单任务,我们只需要一条cron表达式就能满足.但是有的时候任务也可以很复杂. 最近我遇到了一个问题,一条任务在开始的时候要触发A方法,在结束 ...
- chrome浏览器新建标签打开页面【学习笔记】
按照下面方法进行设置即可
- Package.json 属性说明
name - 包名. version - 包的版本号. description - 包的描述. entry pointer 项目入口文件 没有的直接回车跳过 test command: 测试命令 后面 ...
- HDU 3586 Information Disturbing(二分+树形dp)
http://acm.split.hdu.edu.cn/showproblem.php?pid=3586 题意: 给定一个带权无向树,要切断所有叶子节点和1号节点(总根)的联系,每次切断边的费用不能超 ...
- UVa 714 抄书(贪心+二分)
https://vjudge.net/problem/UVA-714 题意:把一个包含m个正整数的序列划分成k个非空的连续子序列,使得每个正整数恰好属于一个序列.设第i个序列的各数之和为S(i),你的 ...
- R语言低级绘图函数-abline 转载
abline 函数的作用是在一张图表上添加直线, 可以是一条斜线,通过x或y轴的交点和斜率来确定位置:也可以是一条水平或者垂直的线,只需要指定与x轴或y轴交点的位置就可以了 常见用法: 1)添加直线 ...