|
|
@@ -1,10 +1,10 @@
|
|
|
<template>
|
|
|
<view class="content">
|
|
|
- <!-- :enable-back-to-top="currentIndex===tabIndex" 在微信小程序上可以多加这一句，因为默认是允许点击返回顶部的，但是这个页面有多个scroll-view，会全部返回顶部，所以需要控制是当前index才允许点击返回顶部 -->
|
|
|
+ <!-- :enable-back-to-top="current_index===tab_index" 在微信小程序上可以多加这一句，因为默认是允许点击返回顶部的，但是这个页面有多个scroll-view，会全部返回顶部，所以需要控制是当前index才允许点击返回顶部 -->
|
|
|
<!-- 如果当前页已经加载过数据或者当前切换到的tab是当前页，才展示当前页数据（懒加载） -->
|
|
|
- <z-paging v-if="firstLoaded || isCurrentPage" ref="paging" v-model="dataList" @query="queryList" :fixed="false">
|
|
|
+ <z-paging v-if="first_loaded || is_currentPage" ref="paging" v-model="data_list" @query="queryList" :fixed="false">
|
|
|
<!-- 如果希望其他view跟着页面滚动，可以放在z-paging标签内 -->
|
|
|
- <view class="item" v-for="(item,index) in dataList" :key="index" @click="itemClick(item)">
|
|
|
+ <view class="item" v-for="(item,index) in data_list" :key="index" @click="itemClick(item)">
|
|
|
<view class="item-title">{{item.title}}</view>
|
|
|
<view class="item-detail">{{item.detail}}</view>
|
|
|
<view class="item-line"></view>
|
|
|
@@ -15,32 +15,30 @@
|
|
|
|
|
|
<script setup lang="ts">
|
|
|
import { nextTick, ref, watch } from 'vue';
|
|
|
-
|
|
|
- let dataList = ref([]) //v-model绑定的这个变量不要在分页请求结束中自己赋值！！！
|
|
|
- let firstLoaded = ref(false) //当前组件是否已经加载过了
|
|
|
- let isCurrentPage = ref(false) //是否滚动到当前页
|
|
|
+
|
|
|
+ let data_list = ref([]) //v-model绑定的这个变量不要在分页请求结束中自己赋值！！！
|
|
|
+ let first_loaded = ref(false) //当前组件是否已经加载过了
|
|
|
+ let is_currentPage = ref(false) //是否滚动到当前页
|
|
|
const paging = ref(null) //$ref:paging
|
|
|
-
|
|
|
+
|
|
|
const props = defineProps({
|
|
|
- tabIndex: Number, //当前组件的index，也就是当前组件是swiper中的第几个
|
|
|
- currentIndex:Number, // 当前swiper切换到第几个index
|
|
|
+ tab_index: Number, //当前组件的index，也就是当前组件是swiper中的第几个
|
|
|
+ current_index:Number, // 当前swiper切换到第几个index
|
|
|
})
|
|
|
- watch(()=>props.currentIndex, (new_v,old_v)=>{
|
|
|
- if(new_v === props.tabIndex){
|
|
|
+ watch(()=>props.current_index, (new_v,old_v)=>{
|
|
|
+ if(new_v === props.tab_index){
|
|
|
// 懒加载，当滑动到当前的item时，才去加载
|
|
|
- if(!firstLoaded.value){
|
|
|
+ if(!first_loaded.value){
|
|
|
// 这里需要延迟渲染z-paging的原因是为了避免在一些平台上立即渲染可能引发的底层报错问题
|
|
|
nextTick(()=>{
|
|
|
setTimeout(() => {
|
|
|
- isCurrentPage.value = true
|
|
|
+ is_currentPage.value = true
|
|
|
}, 100);
|
|
|
})
|
|
|
}
|
|
|
}
|
|
|
},{immediate:true})
|
|
|
|
|
|
-
|
|
|
-
|
|
|
function queryList(pageNo:number, pageSize:number) {
|
|
|
// console.log('pageNo=',pageNo,'pageSize=',pageSize)
|
|
|
let tem_list = []
|
|
|
@@ -50,7 +48,7 @@
|
|
|
}
|
|
|
setTimeout(()=>{
|
|
|
paging.value.complete(tem_list)
|
|
|
- firstLoaded.value = true
|
|
|
+ first_loaded.value = true
|
|
|
},500)
|
|
|
}
|
|
|
|
future