需求:接口仅请求一次(即不做分页,并且做虚拟列表),且有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()才解决问题。