微信小程序下拉刷新和上拉加载
小程序知识点二
1.上拉加载和下拉刷新
Wxml文件
<scroll-view scroll-top="{{scrollTop}}" scroll-y="true" style="height:{{scrollHeight}}px;" bindscrolltolower="bindDownLoad" bindscroll="scroll">
<block wx:for="{{goodsList}}" wx:key="item" >
<view>
<image src="{{item.goods_img}}" alt=""></image>
</view>
<view>{{item.name}}</view>
<view><text>¥<text>{{item.price}}</text></text><text>¥{{item.oldprice}}</text></view>
</block>
</scroll-view>
根据官方文档得知,scroll-view就是里面内容有各种滑动触发事件的DIV容器,比如滚动条滚动、触底、触顶着三个事件。
其中的三个属性 scroll-top:设置滚动条的位置
,scroll-y:是否允许竖向滑动,height:是组件的高度
Bindscrolltolower是绑定触底触发的事件
Bindscroll 是滚动触发的时间
Bindscrolltoupper 触顶触发的事件,由于是触顶触发事件,所以不合适用来当做下拉刷新
一般来说 对于组件的属性,都是通过JS来动态控制的。
js
//获取应用实例
var app = getApp()
//首页上拉加载功能函数
var page = 0;
var url = 'https:www.shop.com/home/index/index
';
var GetList = function(that){
wx.request({
url: url,
data: {
page:page,
},
success: function(res){
var goodsList = that.data.goodsList;
for(var i = 0;i<res.data.info.length;i++){
goodsList.push(res.data.info[i]);
}
that.setData({
goodsList:goodsList
});
page ++;
that.setData({
hidden:true
});
}
});
}
Page({
data: {
goodsList:[],
scrollTop : 0,
scrollHeight:0,
},
//下拉刷新
onPullDownRefresh:function(){
this.onLoad()
},
onLoad: function () {
var that = this;
wx.getSystemInfo({
success:function(res){
that.setData({
scrollHeight:res.windowHeight
});
}
});
//首页商品
wx.request({
url: 'https:www.shop.com/home/product/search',
data: {},
method: 'GET',
success: function(res){
that.setData({
goodsList: res.data.info,
})
},
})
},
// 该方法绑定了页面滑动到底部的事件
bindDownLoad:function(){
var that = this;
GetList(that);
},
// 该方法绑定了页面滚动时的事件
scroll:function(event){
this.setData({
scrollTop : event.detail.scrollTop
});
},
})
当初次加载页面的时候,执行onLoad函数,
onLoad: function () {
var that = this;
wx.getSystemInfo({
success:function(res){
that.setData({
scrollHeight:res.windowHeight
});
}
});
//首页商品
wx.request({
url: 'https:www.shop.com/home/product/search',
data: {},
method: 'GET',
success: function(res){
that.setData({
goodsList: res.data.info,
})
},
})
}
这里的onLoad有两个功能
一、获取设备接口用户手机屏幕高度
二、向服务器发送请求,获取数据
其中,wx.getSystemInfo接口可以获取到手机型号、设备像素比、窗口宽度和高度、设备语言、操作系统版本号和客户端平台,最常用的就是获取设备窗口的宽度和高度。
Wx.request()是发送请求,为了保持良好习惯,需要把请求的数据(GET、POST)都要放在data{}中
小程序封装了一个下拉刷新的API,onPullDownRefresh监听下拉事件,所以
onPullDownRefresh:function(){
this.onLoad()
},
当下拉事件触发的时候,重新执行onLoad()就可以实现刷新效果了
上拉加载
var page = 0;
var url = app.globalData.domain+'/index.php';
var GetList = function(that){
that.setData({
hidden : false
});
wx.request({
url: url,
data: {
page:page,
},
success: function(res){
var goodsList = that.data.goodsList;
for(var i = 0;i<res.data.info.length;i++){
goodsList.push(res.data.info[i]);
}
that.setData({
goodsList:goodsList
});
page ++;
that.setData({
hidden:true
});
}
});
}
// 该方法绑定了页面滑动到底部的事件
bindDownLoad:function(){
var that = this;
GetList(that);
},
// 该方法绑定了页面滚动时的事件
scroll:function(event){
this.setData({
scrollTop : event.detail.scrollTop
});
},
bindDownLoad:每次触底都会触发GetList,去获取数据
Scroll:每次滚动的时候,都重新设置滚动条的位置
重点是看这个函数,我也是第一次用到调用函数来处理
var page = 0; 设置当前所请求的页数,这里我请求的方式类似于分别请求
url 请求的url
var GetList = function(){}; 是JS中设置函数的一种方式,先设置一个匿名函数,然后将这个匿名函数赋值给GetList这个变量,相当于这个变量代表了这个函数
wx.request() 发送请求
success 请求成功以后,对数据进行操作
var goodsList = that.data.goodsList; that是调用函数的时候,传递过来的,是this,代表当前页面Page()的实例化对象
that.data.goodsList 就是获取当前goodsList的值
每次执行这个函数的时候,都会page++,然后根据这个page的值去服务器获取数据,将新得到的数据,通过循环push,添加到这个goodsList,然后再通过that.setData覆盖掉原来的goodsList,这样Page中的goodsList就是最新的数据,可以展现在前端页面了。
下拉刷新:1.触底,触发时间 2.调用函数,获取数据 3.将数据添加到所在页面js中
后端PHP代码:
public function index(){
$page = I('get.page')?I('get.page'):0;
$goods_list = D('Goods')->where(array('status'=>1))->limit($page*10,'10')->order('id desc')->select();
$this->success($goods_list,'',true);
}
微信小程序下拉刷新和上拉加载的更多相关文章
- [微信小程序] 微信小程序获取用户定位信息并加载对应城市信息,wx.getLocation,腾讯地图小程序api,微信小程序经纬度逆解析地理信息
因为需要在小程序加个定位并加载对应城市信息 然而小程序自带api目前只能获取经纬度不能逆解析,虽然自己解析方式,但是同时也要调用地图,难道用户每次进小程序还要强行打开地图选择地址才定位吗?多麻烦也不利 ...
- 微信小程序小结(4) -- 分包加载及小程序间跳转
分包加载 某些情况下,开发者需要将小程序划分成不同的子包,在构建时打包成不同的分包,用户在使用时按需进行加载(主要是空间不够用,哈哈~). 在构建小程序分包项目时,构建会输出一个或多个功能的分包,其中 ...
- 微信小程序:上滑触底加载下一页
给商品列表页面添加一个上滑触底加载下一页的效果,滚动条触底之后就发送一个请求,来加载下一页数据, 先在getGoodsList中获取总条数 由于总页数需要再另外的一个方法中使用,所以要把总页数变成一个 ...
- 微信小程序云开发-列表数据分页加载显示
一.准备工作 1.创建数据库nums,向数据库中导入108条数据 2.修改数据库表nums的权限 二.新建页面ListPaginated 1.wxml文件 <!-- 显示列表数据 --> ...
- 微信小程序:添加全局的正在加载中图标效果
在发送请求的时候,显示一个正在加载中的小图标.在加载下一页的时候也显示正在加载中.同时数据请求回来了,把加载中进行关闭. 开发----API-----界面 在哪里添加这两段代码会比较方便呢?一个项目有 ...
- android--------自定义控件ListView实现下拉刷新和上拉加载
开发项目过程中基本都会用到listView的下拉刷新和上滑加载更多,为了方便重写的ListView来实现下拉刷新,同时添加了上拉自动加载更多的功能. Android下拉刷新可以分为两种情况: 1.获取 ...
- 微信小程序下拉加载和上拉刷新两种实现方法
方法一:onPullDownRefresh和onReachBottom方法实现小程序下拉加载和上拉刷新 首先要在json文件里设置window属性 设置js里onPullDownRefresh和onR ...
- Android 5.X新特性之为RecyclerView添加下拉刷新和上拉加载及SwipeRefreshLayout实现原理
RecyclerView已经写过两篇文章了,分别是Android 5.X新特性之RecyclerView基本解析及无限复用 和 Android 5.X新特性之为RecyclerView添加Header ...
- Android 使用PullToRefresh实现下拉刷新和上拉加载(ExpandableListView)
PullToRefresh是一套实现非常好的下拉刷新库,它支持: 1.ListView 2.ExpandableListView 3.GridView 4.WebView 等多种常用的需要刷新的Vie ...
- 使用PullToRefresh实现下拉刷新和上拉加载
使用PullToRefresh实现下拉刷新和上拉加载 分类: Android2013-12-20 15:51 78158人阅读 评论(91) 收藏 举报 Android下拉刷新上拉加载PullToRe ...
随机推荐
- java解析xml文件并输出
使用java解析xml文件,通过dom4j,代码运行前需先导入dom4j架包. ParseXml类代码如下: import java.io.File; import java.util.ArrayLi ...
- Flask architecture
论文The Flask Security Architecture: System Support for Diverse Security Policies 介绍了Flask architectur ...
- MFC笔记<持续更新>
1.设置垂直滚动条的位置在末尾 SCROLLINFO si; GetScrollInfo(SB_VERT, &si, SIF_PAGE | SIF_RANGE | SIF_POS); si.f ...
- 最短路径问题/Spfa
题目链接 题目描述 给你n个点,m条无向边,每条边都有长度d和花费p,给你起点s终点t,要求输出起点到终点的最短距离及其花费,如果最短距离有多条路线, 则输出花费最少的. 最后一行是两个数 s,t;起 ...
- iOS进阶推荐的书目
<Effective Objective-C 2.0:编写高质量iOS与OS X代码的52个有效方法>([英]Matt Galloway) 很多面试题有涉及 <IOS数据库应用高级编 ...
- android 数据存储分配的一些事
应用程序在运行的过程中如果需要向手机上保存数据,一般是把数据保存在SDcard中的.大部分应用是直接在SDCard的根目录下创建一个文件夹,然后把数据保存在该文件夹中.这样当该应用被卸载后,这些数据还 ...
- 转:LoadRunner获取毫秒及字符串替换实现
今天做一个性能测试,参数化要求创建用户名不可以重复,想来想不没有什么好的办法来避免用户名字的重复.所以就想用时间+随机数来实现,但是实现中遇到一个问题. 名字中不可以包含.这个特殊的字符的.所以要处理 ...
- JavaScript 小技巧汇总
判断一个变量是否申明 if (typeof v === "undefined") { // ... } 判断一个变量是否是函数 function f() {} typeof f / ...
- 如何让Spring MVC接收的参数可以转换为java对象
场景: web.xml中增加了一个DispatcherServlet配置,并在同级目录下添加了**-servlert.xml文件,搭建起了一个spring mvc的restful访问接口. 问题描述: ...
- hdu_5691_Sitting in Line(状压DP)
题目连接:http://acm.hdu.edu.cn/showproblem.php?pid=5691 题意:中文,不解释 题解:设dp[i][j]表示当前状态为i,以第j个数为末尾的最忧解,然后dp ...