1、文档加载完成时显示第一页的数据，当滚动条下拉触到底部时加载下一页且数据追加到上一页中。
（这个例子包含了tab切换，使用push() 方法实现）
<template>
<view class="container prohibition">
<view class="demo" :style="'height:' + demo.height + 'px;' + 'padding-top:' + demo.top + 'px;padding-bottom:10rpx'">
<view class="left" :style="'top:' + demo.top + 'px'">
<view class="iconfont icon-zuo" @tap='backleft'></view>
</view>
<view class="clr_fff">我的订单</view>
</view>
<view class="pd_t123">
<!-- 顶部导航栏 -->
<view class="horizonal-tab">
<scroll-view scroll-x="true" scroll-with-animation class="scroll-tab">
<block v-for="(item,index) in tabBars" :key="index">
<view class="scroll-tab-item" :class="{'active': tabIndex==index}" @tap="toggleTab(index)">
{{item.name}}
<view class="scroll-tab-line"></view>
</view>
</block>
</scroll-view>
</view>
<!-- 内容区 -->
<view class="">
<!-- 滑块视图 -->
<view class="content">
<view class="items">
<view class="item" v-for="(items,index1) in queryList" :key="index1">
<view class="orderid">
<text class="title">订单号：{{items.order_no}}</text>
<view>
<image class="sucessImg" src="https://test134.vrapp.chot.cn/mini/picture/135_57.png" mode="widthFix"></image>
</view>
</view>
<view class="infor uni-flex">
<view>
<image class="orderPrdImg" mode="widthFix" @error="errImg" :src="items.goods_logo"></image>
</view>
<view class="infordt">
<view class="title">{{items.goods_title}}</view>
<view class="price">¥{{ items.price_real }}元/天</view>
<view class="num">x{{ items.number_goods }}</view>
</view>
</view>
<view class="pay">
实付款：¥{{items.price_real * items.number_goods}}
</view>
<view class="btn">
<button @tap="order_detail(index1)">查看订单</button>
<button>再次购买</button>
<button v-show="hidden == false">立即评价</button>
</view>
</view>
</view>
<uni-load-more :status="status" :content-text="contentText" />
</view>
</view>
</view>
</view>
</template>
<script>
import uniLoadMore from '../../components/uni-load-more/uni-load-more.vue';
export default {
components: {
uniLoadMore
},
data() {
return {
tabIndex: 0,
/* 选中标签栏的序列,默认显示第一个 */
page: 1,
pageSize: 3,
hidden: false,
status: 'more',
contentText: {
contentdown: '上拉加载更多',
contentrefresh: '加载中.....',
contentnomore: '没有更多数据啦'
},
tabBars: [{
name: '全部',
id: 'guanzhu'
},
{
name: '待付款',
id: 'tuijian'
},
{
name: '预约成功',
id: 'redian'
},
{
name: '已完成',
id: 'tiyu'
}
],
demo: {
top: 0,
height: 0
},
data: {},
queryList: [],
newArrayData: []
}
},
onLoad() {
var status = ''
this.getOrderList(status);// 默认显示第一页的数据即可
},
created() {
const demo = uni.getMenuButtonBoundingClientRect()
this.demo.top = demo.top
this.demo.height = demo.height
},
onReachBottom(e) {
this.page++; //滚动条触到底部时page+1
if(this.tabIndex==0){
var status = '';
this.getOrderListMore(status); //加载的数据
}else if(this.tabIndex==1){
var status = 2;
this.getOrderListMore(status); //加载的数据
}else if(this.tabIndex==2){
var status = 1;
this.getOrderListMore(status); //加载的数据
}else if(this.tabIndex==3){
var status = 5;
this.getOrderListMore(status); //加载的数据
}
},
methods: {
backleft(e) {
uni.navigateBack();
},
order_detail(index) {
uni.setStorageSync('order_no', this.queryList[index].order_no);
uni.navigateTo({
url: '../orderDetail/orderDetail'
})
},
errImg() {
this.queryList.forEach((val) => {
if (val.goods_logo.length == 29) { // 图片不完整路径
val.goods_logo = 'https://test134.vrapp.chot.cn/mini/picture/orderImg.png';
}
if (val.number_goods == null || val.goods_title == null || val.price_real == null) {
val.number_goods = 1;
val.price_real = 0;
val.goods_title = '居家生活料理套餐'
}
});
},
navsHandleClick(i) {
console.log(i);
this.current = i;
},
intervalChange(e) {
this.current = e.detail.current;
},
//切换选项卡
toggleTab(index) {
this.tabIndex = index;
this.page = 1; // 切换tab时page从1开始
if (this.tabIndex == 1) {
this.hidden = true;
} else {
this.hidden = false;
}
switch (this.tabIndex) {
case 1:
var status = 2 // 待付款
this.getOrderList(status);
break;
case 2:
var status = 1 // 预约成功
this.getOrderList(status);
break;
case 3:
var status = 5 // 已完成
this.getOrderList(status);
break;
default:
var status = '' // 默认显示全部列表
this.getOrderList(status);
break;
}
},
//滑动切换swiper
tabChange(e) {
console.log(e);
this.tabIndex = e.detail.current;
},
//获取订单信息
async getOrderList(status) {
const mid = uni.getStorageSync('mid');
let data = {
operate: 'Order.index',
mid: 1,
page: this.page,
status: status
}
const res = await this.$myRequset({
url: '/api',
method: "POST",
data: data
})
this.queryList = res.data.data.list.list;
let pages = Math.ceil(res.data.data.list.count / this.pageSize);
if (this.page == pages) {
this.status = "nomore";
}
},
async getOrderListMore(status) {
const mid = uni.getStorageSync('mid');
let data = {
operate: 'Order.index',
mid: 1,
page: this.page,
status: status
}
const res = await this.$myRequset({
url: '/api',
method: "POST",
data: data
})
for(var i=0;i<res.data.data.list.list.length;i++){
this.queryList.push(res.data.data.list.list[i]); // 加载的数据追加在上一页后面
}
let pages = Math.ceil(res.data.data.list.count / this.pageSize);
if (this.page == pages) {
this.status = "nomore";
}
}
}
}
</script>
下面的Demo相对较为简单，代码较为简单，接口是加载一次调用一次，但是直接调用方法不用写两遍。
<template>
<view>
<view class="demo" :style="'height:' + demo.height + 'px;' + 'padding-top:' + demo.top + 'px;padding-bottom:10rpx'">
<view class="left" :style="'top:' + demo.top + 'px'">
<view class="iconfont icon-zuo" @tap='backleft'></view>
</view>
<view class="top_title">健康百科</view>
</view>
<view class="pd-t135">
<view class="head_cont">
<image :src="fullImg"></image>
<text class="head_title">{{full_title}}</text>
</view>
</view>
<view class="list">
<view class="uni-padding-wrap backWhite wauto80" v-for="(item,index) in infoList" :key="index">
<view class="uni-flex info_item">
<view class="info">
<view class="title">
<span class="tag">{{item.label}}</span>
<text>{{ item.title }}</text>
</view>
<view class="des">
<text class="newsdata">{{ item.create_time }}</text>
<image class="w23" src="../../static/images/news_eye.png"></image> <text class="newsdata">{{ item.number }}</text>
</view>
</view>
<view class="imgRignt">
<image class="newsImg" :src="item.thumb"></image>
</view>
</view>
</view>
<uni-load-more :status="status" :content-text="contentText" />
</view>
</view>
</template>
<script>
import uniLoadMore from '../../components/uni-load-more/uni-load-more.vue';
export default {
name: "news",
components: {
uniLoadMore
},
data() {
return {
demo: {
top: 0,
height: 0
},
infoList: [],
fullImg: '',
full_title: '',
contentText: {
contentdown: '上拉加载更多',
contentrefresh: '加载中.....',
contentnomore: '没有更多数据啦'
},
page: 1,
status: 'more',
pageSize: 1,
}
},
onLoad() {
this.getList();
},
created() {
const demo = uni.getMenuButtonBoundingClientRect()
this.demo.top = demo.top
this.demo.height = demo.height
uni.setNavigationBarColor({
frontColor: '#000000',
backgroundColor: '#000000'
})
},
onReachBottom() {
this.page++;
if (this.status != 'more') {
return false;
}
this.status = 'more'; //设置sataus是更多
this.getList(); //加载的数据
},
methods: {
backleft(e) {
uni.navigateBack();
},
async getList() {
const res = await this.$myRequset({
url: '/api',
data: {
operate: 'News.index',
page: this.page
}
});
let banner = res.data.data.list.one;
this.full_title = banner.title;
this.fullImg = banner.thumb;
let resList = res.data.data.list.list;
let list = this.setTime(resList);
this.infoList = this.infoList.concat(list);
for (let i = 0; i < this.infoList.length; i++) {
if (this.infoList[i].label === '') {
this.infoList[i].label = '生活'
} else {
this.infoList[i].label = this.infoList[i].label.substr(0, 2);
}
}
let pages = Math.ceil(res.data.data.list.count / this.pageSize);
if (this.page == pages) {
this.status = "nomore";
}
},
setTime: function(items) {
var newItems = [];
items.forEach(e => {
newItems.push({
title: e.title,
label: e.label,
thumb: e.thumb,
create_time: e.create_time,
number: e.number
});
});
return newItems;
},
}
}
</script>