推荐下载
-
2020-05-12 浏览：740
-
2020-05-06 浏览：521
-
2020-05-08 浏览：510
-
2020-04-04 浏览：504
-
2020-05-12 浏览：500
ETL：微信小程序之小公举（小工具）：分页查询，获取当前定位信息 ...
发布时间:2021-01-07
不好意思打错了，是小工具其实我是故意打错的在此集成了各种小工具废话不多说，直接上代码1、分页查询数据过多怎么办？一个分页就解决，麻麻再也不用担心我的工作啦分页思路：把数据放入可滚动视图区域内，数据过多 ...
不好意思打错了，是小工具
其实我是故意打错的
在此集成了各种小工具
废话不多说，直接上代码
1、分页查询
数据过多怎么办？一个分页就解决，麻麻再也不用担心我的工作啦分页思路：
把数据放入可滚动视图区域内，数据过多则视图可以滚动，当滚到底部的时候触发hotActivityLoadMore方法带上页数请求下一页数据
//bindscrolltolower的意思是拉到底部
<scroll-view scroll-y="truze" style="height: 1080rpx;" bindscrolltolower="hotActivityLoadMore">
<view wx:for="{{list}}" wx:for-item="item" >
循环展示的内容体
</view>
</scroll-view>
js代码
// pages/distribution/my_agent.js
var util = require('../../../utils/util.js')
var app = getApp()
Page({
data: {
myAgentList: {
hasMore: true,
list: [],
listSize: 0
},
startNum: 1,//页数
},
onLoad: function (options) {
//加载页面
var _that = this
var _url = '请求的地址';
wx.request({
url: _url,
data: [{
id: agentCode,
agentTel: '',
pageNum: 1,//请求第一页
}],
method: 'post',
success: function (res) {
console.log(res.data)
if (res.data.code == '00') {
var listSize = 后台返回的数据.length;
var newData = _that.data.myAgentList.list;
newData = 后台返回的数据;
var newList = {};
//当长度小于10表示没有下页数据了
if (listSize < 10) {
newList.hasMore = falseo?;
} elseo? {
newList.hasMore = true;
}
newList.list = newData;
newList.listSize = listSize;
_that.seo?tData({ myAgentList: newList });
_that.seo?tData({
startNum: 2
})
} else {
util.msg("错误", res.data.msg)
console.log("网络通，数据不成功")
}
},
fail: function (res) {
console.log(res.data)
util.msg("错误", "通讯失败")
}
})
},
hotActivityLoadMore: function (e) {
var _that = this;
//判断是否还有下一页
if (_that.data.myAgentList.hasMore == true) {
var pageNum = _that.data.startNum
var _url = '请求的地址';
wx.request({
url: _url,
data: [{
id: agentCode,
linkTel: seek,
pageNum: pageNum //第N页
}],
method: 'post',
success: function (res) {
console.log(res.data)
if (res.data.code == "00") {
console.log("网络通，数据成功")
var listSize = 后台返回的数据.length;
var newData = _that.data.myAgentList.list;
//concat是在原有基础上进行增加
newData = newData.concat(后台返回的数据);
var newList = {};
//当长度等于于0表示当前没有数据，停止
if (listSize == 0) {
newList.hasMore = false;
return;
//当长度小于10表示没有下页数据了
} else if (listSize <= 10) {
newList.hasMore = false;
} else {
newList.hasMore = true;
}
newList.list = newData;
newList.listSize = listSize;
_that.setData({ myAgentList: newList });
_that.setData({
startNum: pageNum + 1 //页数加1
})
} else {
util.msg("错误", res.data.msg)
console.log("网络通，数据不成功")
}
},
fail: function (res) {
console.log(res.data)
util.msg("错误", "通讯失败")
console.log("失败")
}
})
}
}
})
2、防止用户多次提交，使用的遮罩层实现很简单，按钮加上disabled属性，用true和false控制。js
data: {
hidden: true, //等待的展示与隐藏的控制
buthidden: false //按钮的可用和不可用的控制
}
primary: function (e) {
//显示等待、禁用按钮，后台返回错误则将true和false对调一下就是隐藏等待、启用按钮
this.setData({
hidden: false,
buthidden: true
})
}
wxml
<loading hidden="{{hidden}}">
注册中...
</loading>
