小程序提供了,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();
}
})

微信小程序上拉下拉刷新的更多相关文章

  1. 微信小程序的下拉刷新

    微信小程序的下拉刷新:在page的js文件中有监听用户下拉刷新的处理函数onPullDownRefresh:function(){} //js文件中自带的处理函数,在onUnload下面,注意不要重复 ...

  2. 微信小程序-自定义下拉刷新

    最近给别个公司做技术支持,要实现微信小程序上拉刷新与下拉加载更多 微信给出的接口不怎么友好,最终想实现效果类似QQ手机版 ,一共3种下拉刷新状态变化,文字+图片+背景颜色 最终实现后的效果(这里提示有 ...

  3. 小程序上拉下拉共存时不可使用scroll-view的解决方法

    使用 bindscrolltolower ,必须搭配使用的 scroll-view 会导致小程序 "enablePullDownRefresh": true 下拉不能使用. 解决方 ...

  4. 【微信小程序】下拉刷新真机测试无效

    根据文档的描述,做上拉加载时直接实现页面的onReachBottom()函数即可.但是要做下拉刷新时,除了实现onPullDownRefresh()函数外,还必须要在app.json中配置开启enab ...

  5. 微信小程序:下拉刷新

    下拉刷新 1.需要在json文件中,设置"enablePullDownRefresh": true,表示该页面使用下拉刷新 2.在微信内置函数onPullDownRefresh中进 ...

  6. 微信小程序-解决下拉刷新报错

    关于“enablePullDownRefresh”: “true” 一.使用方式 在 Page 中定义 onPullDownRefresh 处理函数,监听该页面用户下拉刷新事件.需要在 config ...

  7. 微信小程序 - 关于下拉刷新

    // 拉取数据 fetchData: function() { wx.request({ url: 'http://v.juhe.cn/toutiao/index', data: { type: '' ...

  8. 微信小程序实现下拉刷新上拉加载

    代码片段:https://developers.weixin.qq.com/s/K9VbWZmy7e8C

  9. 微信小程序组件 下拉刷新

    <!-- &&底部加载 --> <view class='page-add-data flexca'> <text>{{pageTottomText ...

随机推荐

  1. Linux基础(学习过程记录)

    常用快捷键:Tab:使用Tab键来进行命令补全,补全目录.补全命令参数Ctrl+c键来强行终止当前程序Ctrl+d 键盘输入结束或退出终端Ctrl+s 暂停当前程序,暂停后按下任意键恢复运行Ctrl+ ...

  2. AND 初识

    框架

  3. [Unity优化]批处理03:静态批处理

    原理: 运行时,把需要进行静态批处理的网格合并到一个新的网格中.虽然只进行一次合并操作,但是会占用更多的内存来存储合并后的网格,并且被静态批处理的物体无法移动旋转缩放 要使用静态批处理,需要把Stat ...

  4. Exp4 恶意代码分析 20164313 杜桂鑫

    1.实践目标 1.1是监控你自己系统的运行状态,看有没有可疑的程序在运行. 1.2是分析一个恶意软件,就分析Exp2或Exp3中生成后门软件:分析工具尽量使用原生指令或sysinternals,sys ...

  5. openssl error while loading serial number

    unable to load number from D:/Program Files/OpenSSL-Win64/bin/demoCA/serialerror while loading seria ...

  6. An error occurred while starting the application.

    一..net core 发布后的站点启动报错如下 An error occurred while starting the application. .NET Core 4.6.26328.01 X6 ...

  7. 【C语言基础】循环体系

    1.For循环结构: For循环的一般形式为: for (表达式1 初始化:判断条件:自增自减) { 语句块 } 2.while循环结构: while循环的一般的形式为: 表达式1 初始化 while ...

  8. Springboot中对Service层进行集成测试时注意点

    @SpringBootTest(classes = {DataSourceAutoConfiguration.class,MybatisAutoConfiguration.class,****Impl ...

  9. oracle EBS SLQ语句

    1.查询公司主体 SELECT a.flex_value_id,b.flex_value,B.SUMMARY_FLAG,A.flex_value_meaning,c.flex_value_set_na ...

  10. 关于css 的兼容设置 ----笔记

    在开发网页的时候,由于浏览器的差异,会造成css 代码需要写不同的样式,才能适配大部分浏览器,这很烦,但是又不得不做,我把其中用得比较多的那些,做了一个归纳,放在这里,开发的时候,直接打开这里,复制粘 ...