- Tab選項卡
- 下拉刷新、上拉加載更多
- 數據空白頁面顯示
- 滑動時，當頁面無數據時纔會觸發刷新
網上小程序Tab選項卡的文章有很多，可都無法實現加載更多，因爲swpier會使其失效。
刪代碼好累，自行看關鍵代碼吧。
wxml代碼
<view class="page">
<!--Tab佈局-->
<view class='title'>
<view bindtap='titleClick' data-idx='0' class="{{0 == currentIndex ? 'titleSel' : 'titleUnsel'}}">
<text class="t2">已處理</text>
<hr class="{{0 == currentIndex ? 'headerLineSel' : 'headerLineUnsel'}}" />
</view>
<view class="{{1 == currentIndex ? 'titleSel' : 'titleUnsel'}}" bindtap='titleClick' data-idx='1'>
<text class="t2">已取消</text>
<hr class="{{1 == currentIndex ? 'headerLineSel' : 'headerLineUnsel'}} " />
</view>
</view>
<!--內容佈局-->
<swiper class='swiper' bindchange='pagechange' current='{{currentIndex}}'>
<swiper-item class='swiper'>
<scroll-view scroll-y="true" style="height: 100%;" bindscrolltolower="lower" refresher-enabled bindrefresherrefresh="pullRefresh" refresher-triggered="{{trigger}}" >
<view class='item' wx:key="id" wx:for="{{list1}}" data-item='{{item}}'>
<!--item title-->
<view class='item-title'>
<view class="shuiping">
<image src="../../imgs/handicon.png" class="ic"></image>
<text class="t12">提交人：{{item.createdBy}}</text>
</view>
<view class="shuiping">
<button data-item="{{item}}" wx:if="{{tools.isAfterToday(item.items.visit_date.value)}}" class="val-btn" catchtap="modify">修改</button>
<button class="val-btn" bindtap="shareTap" data-item="{{item}}">分享</button>
</view>
</view>
<!--item split line>-->
<view class='s-line'></view>
<!--item detail-->
<view class='tag-item'>
<view class='tag'></view>
<text class="basemsg">基礎信息</text>
</view>
<view class='txtDetail'>
<view class="con">
<text class="left">用餐人數：</text>
<text class="right">{{item.items.people_amount_of_dinner.value}}人</text>
</view>
</view>
<view class='tag-item'>
<view class='tag'></view>
<text class="basemsg">接待準備</text>
</view>
<view class='txtDetail'>
<view wx:if="{{item.items.souvenir_type.value}}" class="con">
<text class="left">拍攝：</text>
<text class="right">{{tools.cgps(item.items.souvenir_type.value)}}</text>
</view>
<text wx:if="{{item.items.remarks.value}}">{{item.items.remarks.value}}</text>
</view>
</view>
<custom-empty class="emptyCss" wx:if= '{{count1 == 0}}'></custom-empty>
</scroll-view>
</swiper-item>
<swiper-item class='swiper'>
<scroll-view scroll-y="true" style="height: 100%;" bindscrolltolower="lower" refresher-enabled bindrefresherrefresh="pullRefresh" refresher-triggered="{{trigger}}" >
<view class='item' wx:key="id" wx:for="{{list2}}" data-item='{{item}}'>
<!--item title-->
<view class='item-title'>
<view class="shuiping">
<image src="../../imgs/handicon.png" class="ic"></image>
<text class="t12">提交人：{{item.createdBy}}</text>
</view>
</view>
<!--item split line>-->
<view class='s-line'></view>
<!--item detail-->
<view class='tag-item'>
<view class='tag'></view>
<text class="basemsg">基礎信息</text>
</view>
<view class='txtDetail'>
<view class="con">
<text class="left">用餐人數：</text>
<text class="right">{{item.items.people_amount_of_dinner.value}}人</text>
</view>
</view>
<view class='tag-item'>
<view class='tag'></view>
<text class="basemsg">接待準備</text>
</view>
<view class='txtDetail'>
<view wx:if="{{item.items.souvenir_type.value}}" class="con">
<text class="left">拍攝：</text>
<text class="right">{{tools.cgps(item.items.souvenir_type.value)}}</text>
</view>
<text wx:if="{{item.items.remarks.value}}">{{item.items.remarks.value}}</text>
</view>
</view>
<custom-empty class="emptyCss" wx:if= '{{count2 == 0}}'></custom-empty>
</scroll-view>
</swiper-item>
</swiper>
</view>
wxss代碼：
/* pages/mytasks/tasks.wxss */
.page{
display: flex;
flex-direction: column;
height: 100vh;
min-height: 100%;
box-sizing: border-box;
}
.ic{
width: 35rpx;
height: 35rpx;
}
.val-btn {
color: #11a7fe;
border-width: 1rpx;
border-style: solid;
border-color: #11a7fe;
font-size: 30rpx;
margin-right: 30rpx;
background-color: white;
padding-left: 15rpx;
padding-right: 15rpx;
padding-top: 10rpx;
padding-bottom: 10rpx;
line-height: normal;
min-width: 90rpx;
}
.btnhover {
color: #84bffa;
border-color: #90c4f7;
}
.val-btn::after {
border: none;
}
.title {
width: 100%;
height: 100rpx;
background: #ececec;
display: flex;
align-items: center;
justify-content: flex-start;
}
.titleSel {
width: 50%;
color: #13a3f2;
font-size: 32rpx;
display: flex;
flex-direction: column;
align-items: center;
margin-left: 45rpx;
}
.titleUnsel {
width: 50%;
color: #b1b1b1;
font-size: 32rpx;
display: flex;
flex-direction: column;
align-items: center;
margin-left: 45rpx;
}
.headerLineSel {
background: #13a3f2;
height: 5rpx;
width: 90rpx;
position: relative;
border-radius: 2px;
border-width: 1rpx;
border-style: solid;
margin-top: 30rpx;
}
.t2{
margin-top: 30rpx;
}
.headerLineUnsel {
background: #ececec;
height: 6rpx;
width: 100rpx;
position: relative;
margin-top: 30rpx;
}
.h15 {
height: 15px;
width: 100%;
background: #f7f7f7;
}
.swiper {
width: 100%;
flex: 1;
height: calc(100vh-123rpx);
overflow: scroll;
background: #f6f6f6;
}
.t1{
font-size: 36rpx;
font-weight: bold;
}
.t12{
font-size: 32rpx;
margin-left: 20rpx;
}
.shuzhi{
display: flex;
flex-direction: column;
}
.shuiping{
display: flex;
flex-direction: row;
align-items: center;
}
.item{
margin: 40rpx;
padding: 25rpx 0rpx 25rpx 25rpx;
background: white;
}
.item-title{
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
}
.s-line{
width: 100%;
height: 1px;
background-color: #dddddd;
margin-top: 26rpx;
}
.basemsg{
margin-left: 20rpx;
color:#666666;
font-size: 32rpx;
}
.tag-item{
margin-top: 20rpx;
display: flex;
flex-direction: row;
align-items: center;
font-size: 33rpx;
}
.tag{
height: 15rpx;
width: 15rpx;
border-radius: 50%;
background-color: #12a2fe;
}
.txtDetail{
display: flex;
flex-direction: column;
margin-top: 10rpx;
font-size: 32rpx;
}
.emptyCss {
display: flex;
margin-top: 100px;
justify-content: center;
}
text{
word-break: break-all;
}
.left{
width: 25%;
}
.right{
width: 75%;
}
.con{
display: flex;
}
json代碼：
{
"usingComponents": {
"custom-empty": "/components/custom-empty/custom-empty"
},
"navigationBarTitleText": "我的處理"
}
js代碼：
// pages/mytasks/tasks.js
const tyhttp = require('../../utils/tyHttp.js');
Page({
/**
* 頁面的初始數據
*/
data: {
fours: [1, 2], //爲了生成2個swiper
currentIndex: 0,
number1: 0,
number2: 0,
size: 10,
count1: -1,
count2: -1,
list1: [],
list2: [],
isXingZheng: false,
trigger: true,
isPreview:false
},
/**
* 生命週期函數--監聽頁面加載
*/
onLoad: function (options) {
},
queryData() {
let number = 0;
let status="2";
if (this.data.currentIndex == 0) {
status="2";
number = this.data.number1;
} else if (this.data.currentIndex == 1) {
status="3";
number = this.data.number2;
}
var path = "/api/receives";
var params = {
number: number,
size: this.data.size,
status: status
};
tyhttp.post({
path: path,
params: params,
success: res => {
if (this.data.currentIndex == 0) {
this.setData({
number1: res.number,
count1: res.totalElements
});
if (this.data.number1 == 0) {
this.setData({
list1: []
});
}
if(res.content&&res.content.length>0){
this.setData({
list1: this.data.list1.concat(res.content),
number1: ++this.data.number1
});
}
} else if (this.data.currentIndex == 1) {
this.setData({
number2: res.number,
count2: res.totalElements
});
if (this.data.number2 == 0) {
this.setData({
list2: []
});
}
if(res.content&&res.content.length>0){
this.setData({
list2: this.data.list2.concat(res.content),
number2: ++this.data.number2
});
}
}
wx.stopPullDownRefresh();
this.setData({
trigger: false
});
},
fail: err => {
wx.showToast({
title: err,
icon: "none"
})
wx.stopPullDownRefresh();
this.setData({
trigger: false
});
},
isLoading: true,
});
},
/**
* 生命週期函數--監聽頁面初次渲染完成
*/
onReady: function () {
},
/**
* 生命週期函數--監聽頁面顯示
*/
onShow: function () {
let roleCode = wx.getStorageSync('roleCode');
if (roleCode.indexOf(getApp().globalData.xingZheng) != -1) {
this.setData({
isXingZheng: true
});
}
this.onPullDownRefresh();
},
lower(e) {
console.log(e)
this.onReachBottom();
},
/**
* 自定義scroll下拉刷新
*/
pullRefresh() {
this.onPullDownRefresh();
},
pulling() {
console.log('pulling');
},
abort() {
console.log('abort');
},
restore() {
console.log('restore');
},
/**
* 生命週期函數--監聽頁面隱藏
*/
onHide: function () {
},
/**
* 生命週期函數--監聽頁面卸載
*/
onUnload: function () {
},
/**
* 頁面相關事件處理函數--監聽用戶下拉動作
*/
onPullDownRefresh: function () {
if (this.data.currentIndex == 0) {
this.setData({
number1: 0
})
} else if (this.data.currentIndex == 1) {
this.setData({
number2: 0
})
}
this.queryData();
},
/**
* 頁面上拉觸底事件的處理函數
*/
onReachBottom: function () {
if (this.data.currentIndex == 0) {
if (this.data.count1 > this.data.list1.length) {
this.queryData();
}
} else if (this.data.currentIndex == 1) {
if (this.data.count2 > this.data.list2.length) {
this.queryData();
}
}
},
/**
* 用戶點擊右上角分享
*/
onShareAppMessage: function (options) {
},
//用戶點擊tab時調用
titleClick: function (e) {
this.setData({
//拿到當前索引並動態改變
currentIndex: e.currentTarget.dataset.idx
})
if (this.data.currentIndex == 0) {
if (this.data.number1 == 0 && (this.data.list1 == null || this.data.list1.length == 0)) {
this.queryData();
}
} else if (this.data.currentIndex == 1) {
if (this.data.number2 == 0 && (this.data.list2 == null || this.data.list2.length == 0)) {
this.queryData();
}
}
},
//swiper切換時會調用
pagechange: function (e) {
this.setData({
currentIndex: e.detail.current,
});
if (this.data.currentIndex == 0) {
if (this.data.number1 == 0 && (this.data.list1 == null || this.data.list1.length == 0)) {
this.queryData();
}
} else if (this.data.currentIndex == 1) {
if (this.data.number2 == 0 && (this.data.list2 == null || this.data.list2.length == 0)) {
this.queryData();
}
}
},
modify: function (e) {
let item = e.currentTarget.dataset.item;
this.doHandle(item);
},
doHandle(item) {
var url = ''
if (this.data.isXingZheng) {
url = '../mid-handling/mid-handling?item=' + JSON.stringify(item);
} else {
url = '../handling/handling?item=' + JSON.stringify(item);
}
wx.navigateTo({
url: url
})
}
})
空頁面目錄
代碼就不用寫了吧，wxml放張圖片就ok了。