uniapp下拉加载更多

于 2024-06-26 14:56:44 发布
阅读量146 收藏
点赞数 2
文章标签： uni-app 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zzuli111/article/details/135704565
版权

代码如下（示例）：

<template>
	<view class="boxes">
		<view class="zhuangtai"></view>
		<!-- <Back title="订单列表"></Back> -->
		<!-- #ifdef H5 -->
		<view class="title">
			<view class="backs" @click="goBack">
				<uni-icons type="back" size="16" color="#fff"></uni-icons>
			</view>
			<view class="titleText">历史账单</view>
		</view>
		<!-- #endif -->
		<!-- <Back title="历史账单"></Back> -->
		<view class="box-container">
			<!--  cards  -->
			<view class="total-box">
				<view class="total-title">
					<view>缴费总金额</view>
					<view class="money-box">￥{{ totalMoney  | numberToCurrency}}</view>
				</view>
				<view class="line"></view>
				<view class="total-title">
					<view>缴费总笔数</view>
					<view class="money-box">{{billNum}}笔</view>
				</view>
			</view>
			<!--  筛选  -->
			<view class="root">
				<zb-dropdown-menu style="width: 100%" active-color="#006b5b">
					<zb-dropdown-item name="first" :options="optionDate" v-model="dateDrop" @change="dateChange">
					</zb-dropdown-item>
					<zb-dropdown-item name="two" :options="optionSubject" v-model="subjectDrop" @change="ed">
					</zb-dropdown-item>
				</zb-dropdown-menu>
				<!-- <ren-dropdown-filter :from="historyPay" :filterData='options' :defaultIndex='defaultIndex' @ed='ed'>
				</ren-dropdown-filter> -->
			</view>
			<view class="nodata" v-if="records.length == 0">
				<view class="pic">
					<image
						src="http://whsle-hopdata-dev.oss-cn-hangzhou.aliyuncs.com/upload/20230227/0d348b94eda04578710f322e6a6cae48.png" />
					<view style="color: #aaa;">暂无数据</view>
				</view>
			</view>
			<scroll-view v-else class="scrollBox" scroll-y @scrolltolower='Scroll()'>
				<view class="card" v-for="(item) in records" :key="item.index">
					<view class="money-con">
						<view>实付：<text style="color: #E58D00;">￥{{item.actualAmount | numberToCurrency}}</text></view>
						<view>应付：<text style="color: #E58D00;">￥{{item.money | numberToCurrency}}</text></view>
					</view>
					<view class="time-box dushu" v-if="item.type == 6 || item.type ==  7">
						<view>用量：{{item.dosage}}</view>
					</view>
					<view class="time-box dushu" v-if="item.type == 6 || item.type ==  7">
						<view>上期读数：{{item.beforeMeterValue}}</view>
						<view>本期读数：{{item.presentMeterValue}}</view>
					</view>
					<!-- <view v-if="item.feeStartTime != '' && item.feeEndTime != ''" class="time-box">
						费用周期：{{ item.feeStartTime.substring(0,10) }} 至
						{{ item.feeEndTime.substring(0,10) }}
					</view> -->
					<view v-if="item.feeDesc!==''" class="time-box">
						{{ item.feeDesc}}
					</view>
					<view class="time-box">创建时间：{{ item.createTime }}</view>
					<view class="time-box">支付时间：{{item.payEndTime}}</view>
				</view>
			</scroll-view>

			<!-- <view class="bottom-box">
				<span>共{{records.length}}条记录</span>
				<span>共计：{{ totalMoney  | money}}元</span>
			</view> -->
		</view>
	</view>
</template>

<script>
	import ZbDropdownMenu from '../../components/zb-dropdown-menu/zb-dropdown-menu.vue'
	import ZbDropdownItem from '../../components/zb-dropdown-item/zb-dropdown-item.vue'
	import {
		getList,
		getTotal,
		getFeeSubject
	} from "@/api/shop/paymentManagement";
	import {
		shopDetail
	} from '@/api/mine/shopManagement/shopDetail';
	import Back from "@/components/back";

	export default {
		name: "historyPayment",
		props: {},
		components: {
			Back,
			ZbDropdownMenu,
			ZbDropdownItem
		},
		data() {
			return {
				historyPay: 'historyPay',
				defaultIndex: [0, 0],
				startDates: '',
				endDates: '',
				optionDate: [{
						text: "本月",
						value: "1",
					},
					{
						text: "近3个月",
						value: "2",
					},
					{
						text: "近6个月",
						value: "3",
					}, {
						text: "本年",
						value: "4",
					}
				],
				optionSubject: [{
					text: "全部",
					value: "",
				}],
				dateDrop:'1',
				subjectDrop:'',
				options: [
					[{
							text: "本月",
							value: "1",
						},
						{
							text: "近3个月",
							value: "2",
						},
						{
							text: "近6个月",
							value: "3",
						}, {
							text: "本年",
							value: "4",
						}
					],
					[{
						text: "全部",
						value: "",
					}]
				],
				texts: "全部时间",
				single: "2021-04-3",
				showPicker: true,
				value1: "",
				status: "",
				records: [],
				current: 1,
				size: 10,
				loading: false,
				finished: false,
				flag: false,
				total: 0,
				totalMoney: 0,
				merchantId: '',
				tPageJump: 1,
				tRecInpage: 10,
				loading: false,
				finished: false,
				merchantName: '',
				merchantPhone: '',
				storeName: '',
				storeCode: '',
				flag: false,
				timeType: '1',
				billNum:'',
			}
		},
		onLoad() {
			this.getShopDetail()
		},
		onShow() {
			this.records = []
			this.options = [
				[{
						text: "本月",
						value: "1",
					},
					{
						text: "近3个月",
						value: "2",
					},
					{
						text: "近6个月",
						value: "3",
					}, {
						text: "本年",
						value: "4",
					}
				],
				[{
					text: "全部",
					value: "",
				}]
			]
			this.optionDate= [{
					text: "本月",
					value: "1",
				},
				{
					text: "近3个月",
					value: "2",
				},
				{
					text: "近6个月",
					value: "3",
				}, {
					text: "本年",
					value: "4",
				}
			]
			this.optionSubject = [{
				text: "全部",
				value: "",
			}]
			this.billNum = ''
			this.getFeeSubjectAndAccountInfo()
		},
		methods: {
			getFeeSubjectAndAccountInfo() {
				getFeeSubject().then(res => {
					console.log(res, '费用科目')
					if (res.code == 200) {
						res.data.forEach(item => {
							item.text = item.subjectName
							item.value = item.id
							this.optionSubject.push(item)
						})
					}
				})
			},
			getTotal() {
				getTotal({
					merchantId: this.merchantId,
					merchantName: this.merchantName,
					merchantPhone: this.merchantPhone,
					status: [1, 2, 9],
					subjectId: this.status,
					timeType: this.timeType,
				}).then(res => {
					console.log(res, 'get total')
					this.totalMoney = res.data.totalMoney
					this.billNum = res.data.billNum
				})
			},
			goBack() {
				uni.navigateBack({
					delta: 1
				})
			},
			change(e) {
				this.single = e;
				console.log("-change事件:", e);
			},
			ed(e) {
				console.log(e, 'eee204')
				this.status = e.subjectId
				// this.timeType = e[0][0].value
				// this.endDates = this.$moment(new Date()).format("YYYY-MM-DD")
				// if(e[0][0].value == 1){
				// 	// 本月
				// 	this.startDates = this.$moment().startOf('month').format('YYYY-MM-DD')
				// }else if(e[0][0].value == 2){
				// 	// 近3月
				// 	this.startDates = this.$moment().subtract(3, 'month').format('YYYY-MM-DD')
				// }else if(e[0][0].value == 3){
				// 	// 近6月
				// 	this.startDates = this.$moment().subtract(6, 'month').format('YYYY-MM-DD')
				// }else if(e[0][0].value == 4){
				// 	// 本年
				// 	this.startDates = this.$moment().startOf('year').format('YYYY-MM-DD')
				// }
				// console.log(this.startDates,'开始日期')
				// console.log(this.endDates,'结束日期')
				this.search()

			},
			dateChange(e) {
				console.log(e,'eeee')
				this.timeType = e.value
				// if (e == '全部时间') {
				// 	this.createTime = ''
				// } else {
				// 	this.createTime = e
				// }
				this.search()
			},
			//点击查询按钮
			search() {
				this.tPageJump = 1;
				this.records = [];
				this.finished = false;
				this.getHistory();
				this.getTotal()
			},
			getShopDetail() {
				shopDetail().then(res => {
					this.merchantId = res.data.merchantId
					this.merchantName = res.data.merchantName
					this.merchantPhone = res.data.merchantPhone
					this.storeName = res.data.storeName
					this.getHistory()
					this.getTotal()
				})
			},
			//滚动加载更多
			Scroll() {
				if (this.flag === false && this.finished === false) {
					//避免多次请求 加锁 该次请求完成 才能再次发起请求
					this.flag = true;
					this.tPageJump++;
					this.getHistory()
				}
			},
			getHistory() {
				// "订单状态 0-待付款 1-已付款 2-支付中 4-未完全支付 5-逾期 6-免租 7-往期 8-支付失败 9-取消"
				getList({
					merchantName: this.merchantName,
					// startDate: this.createTime ? this.createTime + ' 00:00:00' : '',
					subjectId: this.status,
					pageNum: this.tPageJump,
					phone: this.merchantPhone,
					pageSize: this.tRecInpage,
					status: [1, 2, 9],
					timeType: this.timeType,
					// merchantId: this.merchantId,
					// date: this.createTime,
					// billType: this.status,
				}).then(res => {
					console.log(res, 'res 179')
					// this.totalPage = res.data.commonPageOutVo.totalPage;
					if (this.tPageJump >= res.data.totalPage) {
						this.finished = true;
						this.more = 'noMore'
					}
					this.flag = false;
					this.records = [...this.records, ...res.data.result];
					// console.log(res, 'ressss')
					// this.records = res.data.data
					// this.total = res.data.totalSize
					// this.totalMoney = res.data.totalMoney
				})
			},
			//日历确认按钮
			setToggle() {
				this.$refs.item.toggle();
				this.texts = "全部时间";
				this.createTime = "";
				this.getHistory()
			},
			setCurrent(val) {
				this.$refs.item.toggle();
				this.texts = this.$moment(val).format("YYYY/MM");
				this.createTime = this.$moment(val).format("YYYY-MM");
				this.getHistory()
			},
		},
	}
</script>

<style scoped>
	.boxes {
		height: 100vh;
		overflow: scroll;
	}

	.box-container {
		/* margin-top: 88rpx; */
	}

	.dropdown {
		/* margin-top: 88rpx; */
	}

	.dropdown>>>.van-dropdown-menu__bar {
		height: 90rpx;
		line-height: 90rpx;
		background-color: #fafafa;
		box-shadow: none;
		/*border-bottom: 1rpx solid #eee;*/
	}

	.dropdown>>>.van-dropdown-menu__title {
		font-size: 32rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #333333;
		height: 90rpx;
		line-height: 90rpx;
	}

	/* #ifdef H5 */
	.cards {
		max-height: calc(100vh - 240rpx);
		overflow: auto;
		padding: 70rpx 0;
	}

	/* #endif */


	.card {
		width: 640rpx;
		background: #ffffff;
		box-shadow: 0rpx 2rpx 30rpx 0rpx rgba(0, 0, 0, 0.06);
		border-radius: 10rpx;
		margin: 24rpx auto 0;
		padding: 32rpx 24rpx 32rpx;
		/*height: 247rpx;*/
		font-size: 32rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #333333;
		position: relative;
	}

	.feiyong-box {
		display: flex;
		justify-content: space-between;
		margin-bottom: 24rpx;
		margin-top: 24rpx;
	}

	.time-box {
		margin-top: 24rpx;
	}

	.bottom-box {
		position: absolute;
		bottom: 0;
		width: 100%;
		height: 77rpx;
		background: #EDEDED;
		font-size: 32rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #333333;
		display: flex;
		justify-content: space-around;
		align-items: center;
	}

	.title {
		height: 88rpx;
		line-height: 88rpx;
		padding: 0rpx 40rpx;
		box-sizing: border-box;
		text-align: left;
		/* margin-bottom: 24rpx; */
		font-size: 36rpx;
		color: #fff;
		background-color: #11b690;
	}

	.backs uni-icons {
		width: 26rpx;
		height: 26rpx;
		color: #333333;
		vertical-align: middle;
		margin-left: -2rpx;
	}

	.backs {
		display: inline-block;
		margin-right: 4rpx;
		line-height: 80rpx;
		vertical-align: middle;
	}

	.backs .t-icon {
		width: 26rpx;
		height: 26rpx;
		color: #333333;
		vertical-align: middle;
	}

	.titleText {
		height: 100%;
		font-size: 36rpx;
		display: inline-block;
		vertical-align: middle;
		line-height: 90rpx;
	}

	.pic {
		text-align: center;
	}

	.nodata {
		padding-top: 88rpx;
		font-size: 28rpx;
	}

	/* #ifdef MP-WEIXIN */
	.scrollBox {
		height: calc(100vh - 280rpx);
		/* margin-top: 70rpx; */
		/* padding-top: 80rpx; */
		/* background-color: pink; */
	}

	/* #endif */

	/* #ifdef H5 */
	.scrollBox {
		height: calc(100vh - 370rpx);
		/* margin-top: 70rpx; */
		/* padding-top: 80rpx; */
		/* background-color: pink; */
	}

	/* #endif */

	.money-con {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.total-box {
		display: flex;
		align-items: center;
		justify-content: space-between;
		width: 100%;
		background: #11B690;
		padding: 24rpx 44rpx 48rpx;
		box-sizing: border-box;
		font-size: 28rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: rgba(255, 255, 255, 0.8);
		text-align: center;
	}

	.line {
		width: 2rpx;
		height: 100rpx;
		background: rgba(255, 255, 255, 0.8);
	}

	.money-box {
		font-size: 40rpx;
		font-family: DINAlternate-Bold, DINAlternate;
		font-weight: 500;
		color: #FFFFFF;
		margin-top: 16rpx;
		text-align: center;
	}

	.total-title {
		text-align: center;
		flex: 1;
	}

	.dushu {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-bottom: 24rpx;
	}
</style>
Honey!
关注
  • 2
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
uniapp实现下拉刷新及上拉加载更多的完整代码（app，H5，小程序均可使用）
11-14
内容概要：uniapp实现下拉刷新及上拉加载更多的完整代码（app，H5，小程序均可使用），下载后解压，使用HBuilder导入项目即可运行。 适合人群：少许编程基础人员即可. 适应场景：需要使用uniapp开发移动端时，涉及列表数据下拉刷新及上拉加载列表更多数据（分页）的场景。
uniapp 底部加载更多
最新发布
mind_me的博客
06-12 348
如果是需要实现触底分页的查询，需要判断逻辑，是否到达最后一页，有多种实现方式，这里我的逻辑是，在页面中添加一个全局变量，包含分页的页码、页大小、是否可以继续请求数据，在请求之前先判断是否可以继续请求，不需要则不请求，以下是全局变量参数。具体的逻辑根据自己的需求修改，大原则就是判断是否可以请求数据和分页页码的递增；
uniapp滚动加载 下拉刷新
2303_76218115的博客
06-01 1万+
在日常开发中，滚动加载和下拉刷新是非常常见的功能，页面数据过多时，需要滚动加载优化性能，本篇技术分享博客将介绍如何在uniapp中实现滚动加载和下拉刷新。至此，我们已经成功地实现了滚动加载和下拉刷新两种常见的移动端功能。大家可以进行扩充或者留言交流！通过以上示例代码，我们可以看到uniapp提供了非常方便的API来实现这些功能，使得开发者可以更加专注于业务逻辑的实现。
uniapp实现下拉刷新及上拉（分页）加载更多（app，H5，小程序均可使用）
热门推荐
LeeBrook0的博客
11-16 1万+
开门见山地说，在移动端开发中，80%的项目都会涉及到列表展示，而有了列表不可避免的需求就是列表的下拉刷新和上拉加载更多。本篇文章主要介绍在使用uniapp开发移动端的过程中，比较好用的一个下拉及上拉组件，节约大家选择组件的时间，其完美适配uniapp，并可以实现一套代码打包成app，H5及小程序使用。这样就可以实现一个简单的下拉刷新和上拉加载更多，当然这个组件有更多的方法及支持更多的拓展功能，在此就不一一介绍了，主要是分享一个基础的入门方法给大家。引入成功后，我们就可以在界面中使用我们的组件了。
uniapp下拉刷新和上拉加载更多
m0_50663823的博客
09-28 1803
uniapp下拉刷新和上拉加载更多
uniapp上拉加载更多与下拉刷新
前端小陈的成长记录
06-14 4292
uniapp上拉加载更多、下拉刷新、数据深拷贝
uniapp新闻列表-上拉刷新-下拉加载更多.zip
12-08
【uniapp新闻列表-上拉刷新-下拉加载更多】是一个基于uniapp框架开发的应用功能模块，主要用于构建具有动态加载和刷新功能的新闻列表。uniapp是一个多端开发框架，它允许开发者用一种语言（Vue.js）编写代码，然后...
下拉刷新，上拉加载更多.zip
09-17
在移动应用开发中，"下拉刷新，上拉加载更多"是常见的交互设计模式，尤其在列表或数据流展示中非常普遍。这个功能允许用户通过简单的手势更新内容（下拉刷新）或者查看更多的数据（上拉加载更多）。下面将详细探讨这...
小程序swiper实现tab切换--下拉刷新、上拉加载更多.zip
07-23
本项目中，开发者利用Swiper和Swiper-Item组件，结合下拉刷新和上拉加载更多的功能，构建了一个交互性强、用户体验良好的小程序界面。 1. **Swiper组件**： Swiper是微信小程序中的一个容器组件，可以用来展示一...
uniapp基于z-paging实现页面下拉刷新、上拉加载，分页加载案例
11-19
它通过监听用户的滚动事件，自动触发下拉刷新和上拉加载更多数据的动作。这使得开发者无需手动处理滚动细节，从而集中精力于业务逻辑。 在实现这个案例时，我们需要以下几个关键步骤： 1. **安装z-paging插件**：...
uni-app如何实现上拉加载更多和下拉刷新效果
Gik99的博客
04-16 672
uni-app如何实现上拉加载更多和下拉刷新效果
uniapp实现下拉刷新和上拉加载更多(暂时没有数据)
Tianxiaoxixi的博客
06-17 1738
uniapp实现下拉刷新和上拉加载更多(暂时没有数据)
vue、uniapp 下拉刷新和加载更多
m0_62063072的博客
01-18 567
【代码】vue 下拉刷新和加载更多。
小程序-uni-app：scroll-view/区域滚动、下拉刷新、上拉加载更多
snowball的博客
07-24 6279
开发环境：小程序、uniapp + vue3 + ts实现功能：列表页面实现，区域滚动、下拉刷新、上拉加载更多，效果如图：正常：下拉刷新：
uniapp简单实现下拉刷新和上拉加载更多，uni-app实现上拉加载更多
weixin_43992507的博客
03-13 1789
uniapp简单实现下拉刷新和上拉加载更多，uni-app实现上拉加载更多
uniapp 上拉加载更多 和下拉刷新
localhost
07-18 508
uniapp 上拉加载更多 和下拉刷新
uniapp 下拉刷新、上拉加载更多、最常见的节流场景
abs_botton的博客
03-16 1590
首先在pages.josn文件内的pages数组中找到你向加下拉刷新的页面。 找到后添加： { "path": "pages/equipment/equipment", "style": { "navigationBarTitleText": "设备", "enablePullDownRefresh": true, //开启下拉刷新 "onReachBottomDistance": 50 //开始上拉加载更多，设置底部的触发距离，现在属性值是50就是距离
uniapp二次开发uni-scroll-view下拉刷新和上拉加载更多的功能
csdndddsd的博客
11-15 862
在pages目录下选择你需要添加下拉刷新功能的页面，打开该页面的vue文件。这样，我们就完成了上拉加载更多功能的实现。这样，我们就完成了下拉刷新功能的实现。4、上拉加载更多功能的实现。1、下拉刷新功能的实现。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值