微信小程序上拉下拉刷新
小程序提供了,onPullDownRefresh和onReachBottom两个事件函数监听下拉和上拉事件函数。提示加载中,取消加载中
效果:
js文件
// pages/enterprise/enterprise.js
var app = getApp();
Page({ /**
* 页面的初始数据
*/
data: {
enterpriseList: [],
pageNo: , //页数
pageSize: , // 条数
cityCode: null // 城市编码
}, //查询数据
queryData: function() {
var that = this;
var pageNo = this.data.pageNo;
var pageSize = this.data.pageSize;
var provinceCode = "";
var cityCode = wx.getStorageSync("cityCode"); wx.showLoading({ //弹出页面加载中
title: '加载中...',
}); wx.request({
url: xxxxxx //上线的话必须是https,没有appId的本地请求貌似不受影响
method: 'POST', // OPTIONS, GET, HEAD, POST, PUT, DELETE, TRACE, CONNECT
header: {
'Content-Type': "application/x-www-form-urlencoded",
'Cookie': 'SESSION=' + wx.getStorageSync("sessionId")
}, // 设置请求的 header
data: {
pageIndex: pageNo,
pageSize: pageSize,
companyDivisoinCode: provinceCode + "|" + cityCode + "|"
},
success: function(res) {
app.consoleLog("请求数据成功");
app.consoleLog(res.data)
wx.hideLoading(); //隐藏加载中提示
if (res.data.dataList.length > ) {
if (that.data.enterpriseList.isEmpty) {
that.setData({ // 设置页面列表的内容
enterpriseList: res.data.dataList,
})
} else {
that.setData({ // 设置页面列表的内容
enterpriseList: that.data.enterpriseList.concat(res.data.dataList),
totalPageCnt: res.data.totalPageCnt,
})
}
} else {
wx.showToast({
title: "没有更多数据了",
duration: ,
icon: 'none',
mask: true
})
}
},
fail: function() {
wx.hideLoading(); //隐藏加载中提示
wx.showToast({
title: "请求失败!",
duration: ,
icon: 'none',
mask: true
})
},
complete: function() {
// complete
}
})
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function(options) {
this.setData({
globalData: app.globalData
});
}, /**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function() {
this.setData({ //刷新操作初始化数据
pageNo: ,
list: [],
isEmpty: true
})
this.queryData(); //查询数据
}, /**
* 页面 上拉触底事件的处理函数
*/
onReachBottom: function() {
var pageNum = this.data.pageNo; if (pageNum < this.data.totalPageCnt) {
this.setData({
pageNo: pageNum + //设置下一页
})
this.queryData(); //查询数据
} else {
wx.showToast({
title: "没有更多数据了",
duration: ,
icon: 'none',
mask: true
})
} }, onShow: function(e) { if (!this.data.cityCode) { // 页面首次加载时cityCode=null,查询数据
this.refreshData();
} else if (this.data.cityCode != wx.getStorageSync("cityCode")) { // 当地区改变时加载数据,此时避免二级页返回时重新加载
this.refreshData();
} },
// 重新加载数据
refreshData: function (){
this.setData({
enterpriseList: [],
pageNo: , //页数
pageSize: , // 条数
cityCode: wx.getStorageSync("cityCode"), //保存当前城市编码
});
this.queryData();
}
})
微信小程序上拉下拉刷新的更多相关文章
- 微信小程序的下拉刷新
微信小程序的下拉刷新:在page的js文件中有监听用户下拉刷新的处理函数onPullDownRefresh:function(){} //js文件中自带的处理函数,在onUnload下面,注意不要重复 ...
- 微信小程序-自定义下拉刷新
最近给别个公司做技术支持,要实现微信小程序上拉刷新与下拉加载更多 微信给出的接口不怎么友好,最终想实现效果类似QQ手机版 ,一共3种下拉刷新状态变化,文字+图片+背景颜色 最终实现后的效果(这里提示有 ...
- 小程序上拉下拉共存时不可使用scroll-view的解决方法
使用 bindscrolltolower ,必须搭配使用的 scroll-view 会导致小程序 "enablePullDownRefresh": true 下拉不能使用. 解决方 ...
- 【微信小程序】下拉刷新真机测试无效
根据文档的描述,做上拉加载时直接实现页面的onReachBottom()函数即可.但是要做下拉刷新时,除了实现onPullDownRefresh()函数外,还必须要在app.json中配置开启enab ...
- 微信小程序:下拉刷新
下拉刷新 1.需要在json文件中,设置"enablePullDownRefresh": true,表示该页面使用下拉刷新 2.在微信内置函数onPullDownRefresh中进 ...
- 微信小程序-解决下拉刷新报错
关于“enablePullDownRefresh”: “true” 一.使用方式 在 Page 中定义 onPullDownRefresh 处理函数,监听该页面用户下拉刷新事件.需要在 config ...
- 微信小程序 - 关于下拉刷新
// 拉取数据 fetchData: function() { wx.request({ url: 'http://v.juhe.cn/toutiao/index', data: { type: '' ...
- 微信小程序实现下拉刷新上拉加载
代码片段:https://developers.weixin.qq.com/s/K9VbWZmy7e8C
- 微信小程序组件 下拉刷新
<!-- &&底部加载 --> <view class='page-add-data flexca'> <text>{{pageTottomText ...
随机推荐
- vue学习笔记(一)--Tab切换
最近在学Vue,写的第一个demo是Tab,刚开始还直接把js代码贴过来改,没觉得有什么不同.然后请教别人说,用Vue最好不要操作dom啦,又把代码做了修改-_-. html代码如下: <div ...
- 基于wepy和云开发的动漫资讯小程序----233次元
233次元小程序 # 233次元小程序 项目描述- 基于微信小程序的动漫咨询小程序,采用`wepy`框架开发:- 后台数据采用小程序的云开发存储: 线上体验 部分截图 ...
- 小程序2-基本架构讲解(一)WXML 模板
项目里边生成了不同类型的文件: .json 后缀的 JSON 配置文件 .wxml 后缀的 WXML 模板文件 .wxss 后缀的 WXSS 样式文件 .js 后缀的 JS 脚本逻辑文件 WXML 模 ...
- Python Queue(队列)
Queue模块实现了多生产者.多消费者队列.当必须在多个线程之间安全地交换信息时,它在线程编程中特别有用,实现了所有必需的锁定语义. 一.该模块实现了三种类型的队列,它们的区别仅在于检索条目的顺序: ...
- C 语言 计算
note1: 不要把表达式写的太复杂,不容易阅读和理解,容易造成读程序的误解,所以要避免写出复杂的表达式. note2:程序是按步执行的,程序表达的是顺序执行的动作,而不是关系.
- qt qextserialport __imp_SetupDiGetDeviceRegistryPropertyW
使用 qextserialport 编写串口助手的时候,提示找不到 __imp_SetupDiGetDeviceRegistryPropertyW,经过摸索有以下两种解决方法: 第一种: 把相应的源文 ...
- Oracle的SQL优化思路
个人总结SQL脚本优化,大体如下: (1)选择最有效率的表名顺序(只在基于规则的优化器中有效): ORACLE解析器按照从右到左的顺序处理FROM子句中的表名,FROM子句中写在最后的表(基础表dir ...
- js生成uuid
前端不能像java一样有内置的uuid生成包,所以需要自己写一个function,每次调用这个函数都会生成一个不同的字符串,代码如下: getuuid() { var uid = []; var he ...
- MVC人员管理系统
基本都要使用C控制器中的两个action来完成操作,一个用于从主界面跳转到新页面.同时将所需操作的数据传到新界面,另一个则对应新界面的按钮,用于完成操作.将数据传回主界面以及跳转回主界面.根据不同情况 ...
- PromiseThen 横向代码编辑
var PromiseThen = function(){ var fns = []; this.then = function(fn){ fns.push(fn); return this; } t ...