z-paging仅使用下拉刷新,并且切换tab的时候自动滚动到顶部

需求:接口仅请求一次(即不做分页,并且做虚拟列表),且有tab切换。
官方文档:https://z-paging.zxlee.cn/start/use.html#%E4%BB%85%E4%BD%BF%E7%94%A8%E4%B8%8B%E6%8B%89%E5%88%B7%E6%96%B0%E7%A4%BA%E4%BE%8B

<template>
	<view class="page bg-fff">
		<z-paging
			ref="prizePaging" 
			use-virtual-list 
			:auto="false"
			cell-height-mode="dynamic"
			:loading-more-enabled="false"
			:show-refresher-when-reload="true"
			@onRefresh="init">
			<template #top>
				<!-- tabs -->
				<view class="pt-32 pl-32 pb-32 coupon-scroll">
					<scroll-view :scroll-x="true" class="scroll-scroll">
						<view 
							class="scrolls-item mr-32 br-16 plr-32 f-28"
							v-for="(item,index) in couponTabs" :key="index"
							:class="tabsIndex == index ? 'col-p item-active' : 'col-1e1'"
							@click="tabsChange(item,index)"
							>
							<view class="flex a-c j-c item-height bold">
								{{item.name}}({{item.num||0}})
							</view>
						</view>
					</scroll-view>
				</view>
			</template>
			<template #cell="{item,index}">
				<view class="pb-24 pl-32 pr-32">
					...
				</view>
			</template>
		</z-paging>
	</view>
</template>

use-virtual-list:使用虚拟列表
:auto=“false” :不使用z-paging的自动加载方法(@query)
cell-height-mode=“dynamic”:虚拟列表高度不固定
:loading-more-enabled=“false”:不启用加载更多数据
:show-refresher-when-reload=“true”:列表刷新时自动显示下拉刷新view
@onRefresh:下拉刷新的回调方法

tabsChange(){
	...
	this.$refs.prizePaging.reload();//请求列表
},
//获取列表数据
init(){
	...
}

ps:刚开始未设置show-refresher-when-reload,并且tabsChange是直接调用init(),导致第一个tab滑动到某个位置,切换第二个tab未自动滚动到顶部,用户体验很不好。
后面设置了show-refresher-when-reload还是一样的情况。直到后面凑巧的用this.$refs.prizePaging.reload()替换init()才解决问题。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值