暂存
This commit is contained in:
zpc
parent
9d9aa3d006
commit
d98c40d8a2
|
|
@ -6,106 +6,121 @@
|
|||
:hide-empty-view="hideEmptyView" :refresher-enabled="false" @contentHeightChanged="contentHeightChanged"
|
||||
:auto="false" :auto-clean-list-when-reload="false">
|
||||
<!-- 如果希望其他view跟着页面滚动，可以放在z-paging标签内 -->
|
||||
<view class="item" v-for="(item, index) in dataList" :key="index">
|
||||
<view class="item-title">{{ item.title }}</view>
|
||||
<view class="item-detail">{{ item.detail }}</view>
|
||||
<view class="item-line"></view>
|
||||
<view class="grid-container">
|
||||
<view v-for="(item, index) in dataList" :key="index">
|
||||
<guyu-home-goods-item :goods-item="item" />
|
||||
<!-- <view class="item-title">{{ item.title }}</view>
|
||||
<view class="item-detail">{{ item.detail }}</view>
|
||||
<view class="item-line"></view> -->
|
||||
</view>
|
||||
</view>
|
||||
|
||||
</z-paging>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
// v-model绑定的这个变量不要在分页请求结束中自己赋值！！！
|
||||
dataList: [],
|
||||
height: 0,
|
||||
hideEmptyView: true,
|
||||
completeFunc: null
|
||||
}
|
||||
<script setup>
|
||||
import { ref, watch, nextTick, defineProps, defineExpose } from 'vue';
|
||||
|
||||
// 定义props
|
||||
const props = defineProps({
|
||||
// 当前组件的index，也就是当前组件是swiper中的第几个
|
||||
tabIndex: {
|
||||
type: Number,
|
||||
default: 0
|
||||
},
|
||||
props: {
|
||||
// 当前组件的index，也就是当前组件是swiper中的第几个
|
||||
tabIndex: {
|
||||
type: Number,
|
||||
default: function () {
|
||||
return 0
|
||||
}
|
||||
},
|
||||
// 当前swiper切换到第几个index
|
||||
currentIndex: {
|
||||
type: Number,
|
||||
default: function () {
|
||||
return 0
|
||||
}
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
currentIndex: {
|
||||
handler(newVal) {
|
||||
if (newVal === this.tabIndex) {
|
||||
// 懒加载，当滑动到当前的item时，才去加载
|
||||
this.$nextTick(() => {
|
||||
setTimeout(() => {
|
||||
this.$refs.paging.reload();
|
||||
}, 100);
|
||||
})
|
||||
}
|
||||
},
|
||||
immediate: true
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
queryList(pageNo, pageSize) {
|
||||
// 组件加载时会自动触发此方法，因此默认页面加载时会自动触发，无需手动调用
|
||||
// 这里的pageNo和pageSize会自动计算好，直接传给服务器即可
|
||||
// 模拟请求服务器获取分页数据，请替换成自己的网络请求
|
||||
const params = {
|
||||
pageNo: pageNo,
|
||||
pageSize: pageSize,
|
||||
type: this.tabIndex + 1
|
||||
}
|
||||
let c = [];
|
||||
for (let i = 0; i < 10; i++) {
|
||||
c.push({
|
||||
title: '测试' + i,
|
||||
detail: '详情' + i
|
||||
})
|
||||
}
|
||||
this.$refs.paging.complete(c);
|
||||
this.hideEmptyView = false;
|
||||
//请求结束，调用父组件的下拉刷新结束回调函数，使得父组件中的z-paging下拉刷新结束
|
||||
if (this.completeFunc) {
|
||||
this.completeFunc();
|
||||
}
|
||||
},
|
||||
// 页面通知当前子组件刷新列表
|
||||
reload(completeFunc) {
|
||||
// 先把父组件下拉刷新的回调函数存起来
|
||||
this.completeFunc = completeFunc;
|
||||
// 调用z-paging的reload方法
|
||||
this.$refs.paging.reload();
|
||||
},
|
||||
// 当列表高度改变时，通知页面的swiper同步更改高度
|
||||
contentHeightChanged(height) {
|
||||
const finalHeight = this.dataList.length ? height : 0;
|
||||
// 限制内容最小高度为屏幕可见高度减z-tabs高度。注意，页面中有使用slot="top"插入的view，则此处的minHeight还应该减去slot="top"插入的view的高度
|
||||
const minHeight = uni.getSystemInfoSync().windowHeight - uni.upx2px(80);
|
||||
this.$emit('heightChanged', Math.max(finalHeight, minHeight));
|
||||
},
|
||||
// 页面通知当前子组件加载更多数据
|
||||
doLoadMore() {
|
||||
this.$refs.paging.doLoadMore();
|
||||
},
|
||||
// 页面通知当前子组件清除数据
|
||||
clear() {
|
||||
this.$refs.paging.clear();
|
||||
this.hideEmptyView = true;
|
||||
}
|
||||
// 当前swiper切换到第几个index
|
||||
currentIndex: {
|
||||
type: Number,
|
||||
default: 0
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
// 定义emit
|
||||
const emit = defineEmits(['heightChanged']);
|
||||
|
||||
// 响应式数据
|
||||
// v-model绑定的这个变量不要在分页请求结束中自己赋值！！！
|
||||
const dataList = ref([]);
|
||||
const height = ref(0);
|
||||
const hideEmptyView = ref(true);
|
||||
const completeFunc = ref(null);
|
||||
const paging = ref(null);
|
||||
|
||||
// 监听currentIndex变化
|
||||
watch(
|
||||
() => props.currentIndex,
|
||||
(newVal) => {
|
||||
if (newVal === props.tabIndex) {
|
||||
// 懒加载，当滑动到当前的item时，才去加载
|
||||
nextTick(() => {
|
||||
setTimeout(() => {
|
||||
paging.value.reload();
|
||||
}, 100);
|
||||
});
|
||||
}
|
||||
},
|
||||
{ immediate: true }
|
||||
);
|
||||
|
||||
// 组件方法
|
||||
// 组件加载时会自动触发此方法，因此默认页面加载时会自动触发，无需手动调用
|
||||
const queryList = (pageNo, pageSize) => {
|
||||
// 这里的pageNo和pageSize会自动计算好，直接传给服务器即可
|
||||
// 模拟请求服务器获取分页数据，请替换成自己的网络请求
|
||||
const params = {
|
||||
pageNo: pageNo,
|
||||
pageSize: pageSize,
|
||||
type: props.tabIndex + 1
|
||||
}
|
||||
let c = [];
|
||||
for (let i = 0; i < 10; i++) {
|
||||
c.push({
|
||||
title: '测试' + i,
|
||||
detail: '详情' + i
|
||||
})
|
||||
}
|
||||
paging.value.complete(c);
|
||||
hideEmptyView.value = false;
|
||||
//请求结束，调用父组件的下拉刷新结束回调函数，使得父组件中的z-paging下拉刷新结束
|
||||
if (completeFunc.value) {
|
||||
completeFunc.value();
|
||||
}
|
||||
};
|
||||
|
||||
// 页面通知当前子组件刷新列表
|
||||
const reload = (completeFn) => {
|
||||
// 先把父组件下拉刷新的回调函数存起来
|
||||
completeFunc.value = completeFn;
|
||||
// 调用z-paging的reload方法
|
||||
paging.value.reload();
|
||||
};
|
||||
|
||||
// 当列表高度改变时，通知页面的swiper同步更改高度
|
||||
const contentHeightChanged = (height) => {
|
||||
const finalHeight = dataList.value.length ? height : 0;
|
||||
// 限制内容最小高度为屏幕可见高度减z-tabs高度。注意，页面中有使用slot="top"插入的view，则此处的minHeight还应该减去slot="top"插入的view的高度
|
||||
const minHeight = uni.getSystemInfoSync().windowHeight - uni.upx2px(80);
|
||||
emit('heightChanged', Math.max(finalHeight, minHeight));
|
||||
};
|
||||
|
||||
// 页面通知当前子组件加载更多数据
|
||||
const doLoadMore = () => {
|
||||
paging.value.doLoadMore();
|
||||
};
|
||||
|
||||
// 页面通知当前子组件清除数据
|
||||
const clear = () => {
|
||||
paging.value.clear();
|
||||
hideEmptyView.value = true;
|
||||
};
|
||||
|
||||
// 将方法暴露给父组件
|
||||
defineExpose({
|
||||
reload,
|
||||
doLoadMore,
|
||||
clear
|
||||
});
|
||||
</script>
|
||||
|
||||
<style>
|
||||
|
|
@ -140,4 +155,14 @@ export default {
|
|||
width: 100%;
|
||||
background-color: #eeeeee;
|
||||
}
|
||||
|
||||
.grid-container {
|
||||
width: 100%;
|
||||
display: grid;
|
||||
/* 3列等宽 */
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
/* 间距 */
|
||||
gap: 20rpx;
|
||||
padding: 20rpx 0rpx;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -2,8 +2,7 @@
|
|||
<view class="tabs-container">
|
||||
<view class="tabs-wrapper">
|
||||
<template v-for="(item, index) in slideLableList" :key="index">
|
||||
<view class="tab-item-wrapper" @click="clickTab(index)"
|
||||
:style="{ width: item.width }">
|
||||
<view class="tab-item-wrapper" @click="clickTab(index)" :style="{ width: item.width }">
|
||||
<SlideLabel ref="slideLabels" :defaultColor="item.active ? '#F5D677' : '#fff'">
|
||||
<text class="tab-text myZt-500w">{{ item.name }}</text>
|
||||
</SlideLabel>
|
||||
|
|
@ -94,7 +93,7 @@ const getLableWidth = (name) => {
|
|||
return t + "rpx";
|
||||
}
|
||||
|
||||
const systemWidth = parseInt(uni.getSystemInfoSync().screenWidth * 0.96);
|
||||
const systemWidth = parseInt(uni.getWindowInfo().screenWidth * 0.96);
|
||||
const emit = defineEmits(['change']);
|
||||
let isClick = false;
|
||||
// 点击标签
|
||||
|
|
|
|||
|
|
@ -188,6 +188,7 @@ defineExpose({
|
|||
.right-cover {
|
||||
height: 100%;
|
||||
top: 0;
|
||||
/* border-radius: 25rpx; */
|
||||
}
|
||||
|
||||
.left-cover {
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user