老规矩先上图;
下拉使用的是微信自带的下拉功能。但是在滚动条存在的情况下拉动的区域是只有 ,navbar部分。而这里完美解决了这个问题。
原理:在内容区域上有一个透明块 ,当滚动条isTop=0; 显示;isTop!=0隐藏。注意这个透明块用户永远是看不见的。它的作用是让用户触摸时可以完成下拉动作;
上拉就简单了使用的是scroll-view 的bindscrolltolower;
index.json
{
"navigationBarTitleText": "",
"enablePullDownRefresh": true,
"usingComponents": {
"i-load-more": "../../../components/iview/load-more/index"
}
}
index.wxml
<view class="page">
<view class="page__bd">
<view class="weui-tab">
<view class="weui-navbar">
<block wx:for="{{tabs}}" wx:key="*this">
<view id="{{index}}" class="weui-navbar__item {{activeIndex == index ? 'weui-bar__item_on' : ''}}" bindtap="tabClick">
<view class="weui-navbar__title">{{item}}</view>
</view>
</block>
<view class="weui-navbar__slider" style="left: {{sliderLeft}}px; transform: translateX({{sliderOffset}}px); -webkit-transform: translateX({{sliderOffset}}px);"></view>
</view>
<view class="weui-tab__panel">
<view class="weui-tab__content" >
<view class='pullmask' hidden='{{!isTop}}'></view>
<scroll-view scroll-y="auto" scroll-top="{{topNum}}" style="height: {{wH}}px" class="page-body-info" bindscrolltolower="loadmore" bindscroll="doScrollTop">
<view class="weui-panel mycontent" wx:for="{{mydata}}" wx:key="{{index}}" style="height:200px">
<view class="weui-panel__bd" >
<view>
<text class="page-body-text">内容{{index}} len {{mydata.length}}</text>
</view>
</view>
</view>
<i-load-more wx:if="{{loadMore}}" />
<i-load-more wx:if="{{!loadMore}}" tip="{{mydata.length==0?'暂无数据':'我是底部'}}" loading="{{ false }}" i-class="myload" />
</scroll-view>
</view>
</view>
</view>
</view>
</view>
index.js
var sliderWidth = 96; // 需要设置slider的宽度,用于计算中间位置
let isRefesh = false; //正在下拉更多
let isloadmore = false; //正在下载更多
let istop = true;
let pageSize = 10;
let pageIndex = 1;
let totalpages = 1;
Page({
data: {
tabs: ["选项一", "选项二"],
activeIndex: 0,
sliderOffset: 0,
sliderLeft: 0,
wH: 500,
mydata:[],
isTop: true, //滚动条顶部
loadMore: false,
topNum: 0
},
onLoad: function () {
if (this.data.topNum != 0) {
this.setData({ topNum: 0 })
}
var that = this;
wx.getSystemInfo({
success: function (res) {
that.setData({
wH: res.windowHeight - 60,
sliderLeft: (res.windowWidth / that.data.tabs.length - sliderWidth) / 2,
sliderOffset: res.windowWidth / that.data.tabs.length * that.data.activeIndex
});
}
});
this.onPullDownRefresh2();
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
this.onPullDownRefresh2()
},
onPullDownRefresh2(){
isRefesh = true;
isloadmore = false;
istop = false;
wx.showToast({
title: 'loading...',
icon: 'loading'
})
let self = this;
setTimeout(() => {
pageIndex++;
self.getData();
}, 2000)
},
stopPullDownRefresh: function () {
wx.stopPullDownRefresh({
complete: function (res) {
wx.hideToast()
console.log(res, new Date())
}
})
},
//滚动条到top
doScrollTop(e) {
istop = this.data.isTop
if (e.detail.scrollTop < 10) {
if (!istop) {
this.setData({
isTop: true
})
}
} else {
if (istop) {
this.setData({
isTop: false
})
}
}
},
/**
* 更多
*/
loadmore(){
let self=this;
wx.showLoading({
title: 'loading',
})
isloadmore = true;
self.setData({
loadMore: isloadmore,
})
setTimeout(() => {
pageIndex++;
self.getData();
}, 2000)
},
getData(){
wx.hideLoading();
let mydata = this.data.mydata;
if(isRefesh){
this.stopPullDownRefresh();
mydata = [0, 1, 2, 3];
}else{
for (let i = 0; i < 5; i++) {
mydata.push(i)
}
}
this.setData({
loadMore:false,
mydata
})
isRefesh = false;
isloadmore = false;
},
tabClick: function (e) {
if (this.data.topNum != 0) {
this.setData({ topNum: 0 })
}
let id = e.currentTarget.id
if(id==1){
this.setData({
mydata:[]
})
}else{
this.onPullDownRefresh2();
}
this.setData({
sliderOffset: e.currentTarget.offsetLeft,
activeIndex: e.currentTarget.id
});
},
});
以上具体代码可以到 https://github.com/sallyFishKun/loadmoreAndRefresh.git 下载;
下面是结合post/get使用,可以不看;
// page/tabBar/msg.js
import config from '../../../config.js';
let ftime = require('../../../utils/util.js').formatTime
var app = getApp();
var sliderWidth = 96;
let mytime = ''
let pageSize = 10;
let pageIndex = 1;
let totalpages = 1;
let isRefesh = false; //正在下拉更多
let isloadmore = false; //正在下载更多
let istop = true;
let markTime = [] //存储告警红点;
let imei = '';
let mygjData = []; //告警数据
Page({
/**
* 页面的初始数据
*/
data: {
tabs: [{
name: "告警消息",
isdot: false
}, {
name: "系统消息",
isdot: false
}],
isdot: [false, false],
adx0: 0,
sliderOffset: 0,
sliderLeft: 0,
systemList: [],
gjList: [],
// imei: '',
loadMore: false,
wH: 500,
isTop: true, //滚动条顶部
topNum:0
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function() {
if (this.data.topNum != 0) {
this.setData({ topNum: 0 })
}
pageIndex = 1;
totalpages = 1;
isRefesh = false; //正在下拉更多
isloadmore = false; //正在下载更多
istop = true;
markTime = [];
let adx0 = this.data.adx0;
if (adx0 == 0) {
this.gjInit()
} else {
this.getsysmmsg()
}
// this.initDot();
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
console.log('onRefresh')
let adx0 = this.data.adx0;
let self = this;
pageIndex = 1;
totalpages = 1;
// mygjData = [];
isRefesh = true;
isloadmore = false;
istop = false;
if (adx0 == 0) {
this.getList();
} else {
this.getsysmmsg()
}
},
//停止刷新
stopPullDownRefresh: function () {
wx.stopPullDownRefresh({
complete: function (res) {
wx.hideToast()
console.log(res, new Date())
}
})
},
gjInit() {
pageIndex = 1;
totalpages = 1;
this.setData({
gjList: [],
})
mygjData = [];
this.getImei();
},
onLoad: function(e) {
imei=''
var self = this;
app.getSystemInfo(function(res) {
self.setData({
wH: res.windowHeight - 60,
sliderLeft: (res.windowWidth / 2 - sliderWidth) / 2,
sliderOffset: res.windowWidth / 2 * self.data.adx0,
});
});
},
loadmore1() {
if (!this.data.loadMore) return;
console.log('loadmore')
let adx0 = this.data.adx0;
let self = this;
setTimeout(() => {
pageIndex++;
isloadmore = true;
if (adx0 == 0) {
this.getList();
} else {
this.getsysmmsg()
}
}, 2000)
},
/**系统红点 */
checkRedDot() {
if (this.data.tabs[1].isdot == true) return;
const self = this;
app.getPost("/xcx/user_message/check_red_dot", {}, function(res) {
if (res.data.num > 0) {
self.setData({
'tabs[1].isdot': true
})
}
}, false)
},
clearRedDot() {
if (this.data.tabs[1].isdot==false)return;
const self = this;
app.getPost("/xcx/user_message/clear_red_dot", {}, function(res) {
self.setData({
'tabs[1].isdot': false
})
})
},
//滚动条到top
doScrollTop(e) {
istop = this.data.isTop
if (e.detail.scrollTop < 10) {
if (!istop) {
this.setData({
isTop: true
})
}
} else {
if (istop) {
this.setData({
isTop: false
})
}
}
},
stopWuxRefresher() {
let id = '#wux-refresher'
if(isRefesh){
this.stopPullDownRefresh();
}
},
// 获取系统消息数据
getsysmmsg() {
const data = {
page: pageIndex,
}
const self = this;
this.clearRedDot();
self.setData({
loadMore: isloadmore,
})
app.getPost("/xcx/user_message/get_sys_msg", data, function(res) {
self.stopWuxRefresher();
let resdata = res.data;
if (resdata.status == 1) {
let list = resdata.data.data;
if (isloadmore) {
let systemList = self.data.systemList
for (let i = 0; i < list.length; i++) {
systemList.push(list[i])
}
list = systemList
}
self.setData({
systemList: list
})
totalpages = resdata.data.last_page;
self.setData({
loadMore: pageIndex < totalpages
})
isRefesh = false;
isloadmore = false;
}
})
},
setMarkTime(data) {
markTime = wx.getStorageSync('markTime')
let st = new Date(data.time).getTime();
// let start =new Date().getTime() - 24 * 5 * 60 * 60 * 1000 ;
if (!markTime) {
markTime = [];
} else {
markTime = JSON.parse(markTime)
if (markTime.length > 100) {
markTime.splice(0, 50)
// for (let i = 0; i < markTime.length;i++){
// if (Number(markTime[i]) <start){
// markTime.splice(i,1)
// console.log(markTime)
// }
// }
}
}
if (markTime.indexOf(st) == -1) {
markTime.push(st)
}
wx.setStorageSync('markTime', JSON.stringify(markTime))
},
getCurrentDay() {
let start = new Date().getTime() - 24 * 5 * 60 * 60 * 1000
start = ftime(new Date(start)).substr(0, 10)
let end = ftime(new Date()).substr(0, 10)
let arr = [];
arr[0] = start + ' 00:00:00'
arr[1] = end + ' 23:59:59'
console.log("getCurrentDay", arr[0])
return arr;
},
/**
* 获取告警消息列表
*/
getList() {
let self = this;
// let imei = this.data.imei;
let markTime = wx.getStorageSync("markTime");
if (markTime) {
markTime = JSON.parse(markTime)
}
let timeArr = this.getCurrentDay();
let data = {
IMEIs: imei,//.split(","),
// IMEIs: '688502000010235,695502000001904',
timeFlag: 4, //0今日 1本周 2本月 3本年
startTime: timeArr[0], //'2018-07-23 06:14:27.000',
endTime: timeArr[1], //'2018-09-23 06:14:27.000',
pageIndex: pageIndex,
pageSize: pageSize,
alarmType: '',
key: config.msgKey
// key: '68YHQt0qMKGg8orSro2YannF',
}
self.checkRedDot()
self.setData({
loadMore: isloadmore,
})
let url = config.msgRootUrl + '/api/teralarm/getlist'
app.getGet(url, data, function(res) {
self.stopWuxRefresher();
if (res && res.data) {
// let { TerName, StartTime, AlarmContent } = res.data.Items;
let item = res.data.Items;
let gjList = self.data.gjList;
let isdot = false;
if (isRefesh) {
gjList = []
}
if (item.length == 0) {
self.setData({
loadMore: false,
})
return;
} else {
for (let i = 0; i < item.length; i++) {
let st = item[i].StartTime.split('T')
item[i].StartTime = st[0] + " " + st[1].substr(0, 8);
st = new Date(item[i].StartTime).getTime();
if (markTime.indexOf(st) != -1) {
item[i].isdot = false;
isdot = false;
} else {
item[i].isdot = true;
isdot = true;
}
let {
TerName,
StartTime,
AlarmContent,
isdot,
Latitude,
Longitude
} = item[i]
gjList.push({
TerName,
StartTime,
AlarmContent,
isdot,
Latitude,
Longitude
});
mygjData.push(item[i])
}
// if (!isloadmore) {
// gjList = item
// }
totalpages = res.data.TotalPages
self.setData({
gjList: gjList,
'tabs[0].isdot': isdot,
loadMore: pageIndex < totalpages
})
}
} else {
self.setData({
loadMore: false,
})
app.postFail()
}
isRefesh = false;
isloadmore = false;
})
},
tabClick: function(e) {
// this.stopWuxRefresher();
if (this.data.topNum != 0) {
this.setData({ topNum: 0 })
}
let id = e.currentTarget.id;
this.setData({
sliderOffset: e.currentTarget.offsetLeft,
adx0: e.currentTarget.id,
isTop: true,
});
istop=true;
isRefesh = false;
isloadmore = false;
if (id == 0) {
pageIndex = 1;
totalpages = 0;
this.getList();
} else {
this.getsysmmsg()
}
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function() {
// var that = this;
// 显示加载图标
// this.getList();
},
/**
* 获取imei
*/
getImei() {
pageIndex = 1;
totalpages = 1;
let self = this;
app.getImei(function(res) {
imei = res.join(",")
// self.setData({
// imei: res.join(",")
// })
self.getList();
})
},