特效-暂存
This commit is contained in:
zpc
parent
3954f0162c
commit
a103146953
3
components.d.ts
vendored
3
components.d.ts
vendored
|
|
@ -10,12 +10,13 @@ declare module 'vue' {
|
||||||
export interface GlobalComponents {
|
export interface GlobalComponents {
|
||||||
Container: typeof import('./components/guyu/home/container.vue')['default']
|
Container: typeof import('./components/guyu/home/container.vue')['default']
|
||||||
GoodsItem: typeof import('./components/guyu/home/goods-item.vue')['default']
|
GoodsItem: typeof import('./components/guyu/home/goods-item.vue')['default']
|
||||||
|
GoodsList: typeof import('./components/guyu/home/goods-list.vue')['default']
|
||||||
Notice: typeof import('./components/guyu/home/notice.vue')['default']
|
Notice: typeof import('./components/guyu/home/notice.vue')['default']
|
||||||
Recommend: typeof import('./components/guyu/home/recommend.vue')['default']
|
Recommend: typeof import('./components/guyu/home/recommend.vue')['default']
|
||||||
RouterLink: typeof import('vue-router')['RouterLink']
|
RouterLink: typeof import('vue-router')['RouterLink']
|
||||||
RouterView: typeof import('vue-router')['RouterView']
|
RouterView: typeof import('vue-router')['RouterView']
|
||||||
Search: typeof import('./components/guyu/home/search.vue')['default']
|
Search: typeof import('./components/guyu/home/search.vue')['default']
|
||||||
StickySwiperNextItem: typeof import('./components/sticky-swiper-next-item/sticky-swiper-next-item.vue')['default']
|
|
||||||
Swiper: typeof import('./components/guyu/home/swiper.vue')['default']
|
Swiper: typeof import('./components/guyu/home/swiper.vue')['default']
|
||||||
|
Tabs: typeof import('./components/guyu/home/tabs.vue')['default']
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
143
components/guyu/home/goods-list.vue
Normal file
143
components/guyu/home/goods-list.vue
Normal file
|
|
@ -0,0 +1,143 @@
|
||||||
|
<!-- 在这个文件对每个tab对应的列表进行渲染 -->
|
||||||
|
<template>
|
||||||
|
<view class="content">
|
||||||
|
<!-- 这里设置了z-paging加载时禁止自动调用reload方法，自行控制何时reload（懒加载）-->
|
||||||
|
<z-paging ref="paging" v-model="dataList" @query="queryList" use-page-scroll :scrollable="false"
|
||||||
|
: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>
|
||||||
|
</z-paging>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
// v-model绑定的这个变量不要在分页请求结束中自己赋值！！！
|
||||||
|
dataList: [],
|
||||||
|
height: 0,
|
||||||
|
hideEmptyView: true,
|
||||||
|
completeFunc: null
|
||||||
|
}
|
||||||
|
},
|
||||||
|
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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
/* 注意，1、父节点需要固定高度，z-paging的height:100%才会生效 */
|
||||||
|
/* 注意，2、请确保z-paging与同级的其他view的总高度不得超过屏幕宽度，以避免超出屏幕高度时页面的滚动与z-paging内部的滚动冲突 */
|
||||||
|
.content {
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.item {
|
||||||
|
position: relative;
|
||||||
|
height: 150rpx;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
padding: 0rpx 30rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.item-detail {
|
||||||
|
padding: 5rpx 15rpx;
|
||||||
|
border-radius: 10rpx;
|
||||||
|
font-size: 28rpx;
|
||||||
|
color: white;
|
||||||
|
background-color: #007AFF;
|
||||||
|
}
|
||||||
|
|
||||||
|
.item-line {
|
||||||
|
position: absolute;
|
||||||
|
bottom: 0rpx;
|
||||||
|
left: 0rpx;
|
||||||
|
height: 1px;
|
||||||
|
width: 100%;
|
||||||
|
background-color: #eeeeee;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
126
components/guyu/home/tabs.vue
Normal file
126
components/guyu/home/tabs.vue
Normal file
|
|
@ -0,0 +1,126 @@
|
||||||
|
<template>
|
||||||
|
<view class="tabs-container">
|
||||||
|
<view class="tabs-wrapper">
|
||||||
|
<template v-for="(item, index) in list" :key="index">
|
||||||
|
<view class="tab-item-wrapper" :style="{ width: getLableWidth(item.name) }">
|
||||||
|
<view class="tab-item" @click="clickTab(index)">
|
||||||
|
<text class="tab-text myZt-500w">{{ item.name }}</text>
|
||||||
|
</view>
|
||||||
|
<view style="position: relative;width:50%;height: 100%;overflow: hidden;top: -100%;"
|
||||||
|
:style="{ width: getNextWidth(index) }">
|
||||||
|
<view style="" :style="{ width: getLableWidth(item.name) }">
|
||||||
|
<view class="tab-item tab-item-active" @click="clickTab(index)">
|
||||||
|
<text class="tab-text myZt-500w">{{ item.name }}</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
<script setup>
|
||||||
|
import { onMounted, ref } from 'vue';
|
||||||
|
|
||||||
|
const props = defineProps({
|
||||||
|
list: {
|
||||||
|
type: Array,
|
||||||
|
default: () => []
|
||||||
|
},
|
||||||
|
current: {
|
||||||
|
type: Number,
|
||||||
|
default: 0
|
||||||
|
}
|
||||||
|
});
|
||||||
|
onMounted(() => {
|
||||||
|
|
||||||
|
})
|
||||||
|
const getLableWidth = (name) => {
|
||||||
|
let t = name.length * 20 + 40;
|
||||||
|
if (t < 80) {
|
||||||
|
t = 80;
|
||||||
|
}
|
||||||
|
return t + "rpx";
|
||||||
|
}
|
||||||
|
const getNextWidth = (currendIndex) => {
|
||||||
|
if (swiperDx.value == 0) {
|
||||||
|
return "0%";
|
||||||
|
}
|
||||||
|
if (swiperDx.value < 0) {
|
||||||
|
|
||||||
|
}
|
||||||
|
if (currendIndex == props.current) {
|
||||||
|
return ((swiperDx.value / systemWidth).toFixed(2) * 100) + "%";
|
||||||
|
}
|
||||||
|
return "0%";
|
||||||
|
|
||||||
|
}
|
||||||
|
// computed()
|
||||||
|
|
||||||
|
const systemWidth = parseInt(uni.getSystemInfoSync().screenWidth * 0.96);
|
||||||
|
const emit = defineEmits(['change']);
|
||||||
|
|
||||||
|
// 方法
|
||||||
|
const clickTab = (index) => {
|
||||||
|
emit("change", index)
|
||||||
|
};
|
||||||
|
|
||||||
|
let swiperDx = ref(0);
|
||||||
|
let throttleTimer = null;
|
||||||
|
const setDx = (dx) => {
|
||||||
|
if (!throttleTimer) {
|
||||||
|
swiperDx.value = parseInt(dx);
|
||||||
|
console.log(swiperDx.value, dx, systemWidth, getNextWidth(props.current));
|
||||||
|
throttleTimer = setTimeout(() => {
|
||||||
|
throttleTimer = null;
|
||||||
|
}, 20);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const unlockDx = () => {
|
||||||
|
swiperDx.value = 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 暴露方法给父组件
|
||||||
|
defineExpose({
|
||||||
|
setDx,
|
||||||
|
unlockDx
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.tabs-container {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tabs-wrapper {
|
||||||
|
width: 100%;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
margin-top: 32.64rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tab-item-wrapper {
|
||||||
|
min-width: 80rpx;
|
||||||
|
margin-right: 26.39rpx;
|
||||||
|
text-align: center;
|
||||||
|
line-height: 40rpx;
|
||||||
|
height: 50rpx;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tab-item {
|
||||||
|
border-radius: 50rpx;
|
||||||
|
background-color: transparent;
|
||||||
|
border: 1rpx solid #9A8F79;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.tab-item-active {
|
||||||
|
background-color: #F5D677;
|
||||||
|
border: 1rpx solid transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tab-text {
|
||||||
|
font-size: 22rpx;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -1,142 +0,0 @@
|
||||||
<!-- 在这个文件对每个tab对应的列表进行渲染 -->
|
|
||||||
<template>
|
|
||||||
<view class="content">
|
|
||||||
<!-- 这里设置了z-paging加载时禁止自动调用reload方法，自行控制何时reload（懒加载）-->
|
|
||||||
<z-paging ref="paging" v-model="dataList" @query="queryList" use-page-scroll :scrollable="false" :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>
|
|
||||||
</z-paging>
|
|
||||||
</view>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
export default {
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
// v-model绑定的这个变量不要在分页请求结束中自己赋值！！！
|
|
||||||
dataList: [],
|
|
||||||
height: 0,
|
|
||||||
hideEmptyView: true,
|
|
||||||
completeFunc: null
|
|
||||||
}
|
|
||||||
},
|
|
||||||
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;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style>
|
|
||||||
/* 注意，1、父节点需要固定高度，z-paging的height:100%才会生效 */
|
|
||||||
/* 注意，2、请确保z-paging与同级的其他view的总高度不得超过屏幕宽度，以避免超出屏幕高度时页面的滚动与z-paging内部的滚动冲突 */
|
|
||||||
.content {
|
|
||||||
height: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.item {
|
|
||||||
position: relative;
|
|
||||||
height: 150rpx;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: space-between;
|
|
||||||
padding: 0rpx 30rpx;
|
|
||||||
}
|
|
||||||
|
|
||||||
.item-detail {
|
|
||||||
padding: 5rpx 15rpx;
|
|
||||||
border-radius: 10rpx;
|
|
||||||
font-size: 28rpx;
|
|
||||||
color: white;
|
|
||||||
background-color: #007AFF;
|
|
||||||
}
|
|
||||||
|
|
||||||
.item-line {
|
|
||||||
position: absolute;
|
|
||||||
bottom: 0rpx;
|
|
||||||
left: 0rpx;
|
|
||||||
height: 1px;
|
|
||||||
width: 100%;
|
|
||||||
background-color: #eeeeee;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
@ -1,29 +1,28 @@
|
||||||
<!-- 滑动切换选项卡+吸顶演示(上一个tab数据不保留，滚动流畅) -->
|
<!-- 滑动切换选项卡+吸顶演示(上一个tab数据不保留，滚动流畅) -->
|
||||||
<template>
|
<template>
|
||||||
<view class="content">
|
<view>
|
||||||
<z-paging ref="pagePaging" refresher-only @onRefresh="onRefresh" @scrolltolower="scrolltolower"
|
<z-paging ref="pagePaging" refresher-only @onRefresh="onRefresh" @scrolltolower="scrolltolower"
|
||||||
@scroll="scroll">
|
@scroll="scroll">
|
||||||
|
<view class="content">
|
||||||
|
<guyu-home-search style="width: 100%;"></guyu-home-search>
|
||||||
|
<!-- 公告 -->
|
||||||
|
<guyu-home-notice :notice-info="homeData?.noticeInfo" />
|
||||||
|
<!-- 轮播图 -->
|
||||||
|
<guyu-home-swiper :advert-list="homeData?.advertList" style="width: 100%;" />
|
||||||
|
<!-- 推荐位 -->
|
||||||
|
<guyu-home-recommend :rec-list="homeData?.recList" @item-click="toDetails" style="width: 100%;" />
|
||||||
|
|
||||||
<view class="banner-view" style="height: 250rpx;">
|
|
||||||
<view style="font-size: 40rpx;font-weight: 700;">这是一个banner</view>
|
|
||||||
<view style="font-size: 24rpx;margin-top: 5rpx;">下方tab滚动时可吸附在顶部</view>
|
|
||||||
</view>
|
|
||||||
<view>
|
|
||||||
<!-- 小程序中直接修改组件style为position: sticky;无效，需要在组件外层套一层view -->
|
<!-- 小程序中直接修改组件style为position: sticky;无效，需要在组件外层套一层view -->
|
||||||
<view class="bar-view" style="z-index:97;position: sticky;top :0;background-color: #fff;">
|
<view class="bar-view" style="z-index:97;position: sticky;top :0;background-color: #fff;">
|
||||||
<view :style="{ height: tabsBarHeight + 'px' }" class="status-bar">
|
<view :style="{ height: tabsBarHeight + 'px' }" class="status-bar"> </view>
|
||||||
|
<guyu-home-tabs ref="tabs" :list="homeData.categories" @change="tabsChange" :current="current" />
|
||||||
</view>
|
|
||||||
<z-tabs ref="tabs" :current="current" :list="tabList" @change="tabsChange" />
|
|
||||||
</view>
|
</view>
|
||||||
<swiper class="swiper" :style="[{ height: swiperHeight + 'px' }]" :current="current"
|
<swiper class="swiper" :style="[{ height: swiperHeight + 'px' }]" :current="current"
|
||||||
@transition="swiperTransition" @animationfinish="swiperAnimationfinish">
|
@transition="swiperTransition" @animationfinish="swiperAnimationfinish">
|
||||||
<swiper-item class="swiper-item" v-for="(item, index) in tabList" :key="index">
|
<swiper-item class="swiper-item" v-for="(item, index) in tabList" :key="index">
|
||||||
<!-- 这里的sticky-swiper-next-item为demo中为演示用定义的组件，列表及分页代码在sticky-swiper-next-item组件内 -->
|
<guyu-home-goods-list ref="swiperList" :tabIndex="index" :currentIndex="current"
|
||||||
<!-- 请注意，sticky-swiper-next-item非z-paging内置组件，在自己的项目中必须自己创建，若未创建则会报组件不存在的错误 -->
|
|
||||||
<stickySwiperNextItemVue ref="swiperList" :tabIndex="index" :currentIndex="current"
|
|
||||||
@heightChanged="heightChanged">
|
@heightChanged="heightChanged">
|
||||||
</stickySwiperNextItemVue>
|
</guyu-home-goods-list>
|
||||||
</swiper-item>
|
</swiper-item>
|
||||||
</swiper>
|
</swiper>
|
||||||
</view>
|
</view>
|
||||||
|
|
@ -31,108 +30,114 @@
|
||||||
</view>
|
</view>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script setup>
|
||||||
|
import { ref, onMounted } from 'vue';
|
||||||
|
import {
|
||||||
|
homeData,
|
||||||
|
isLoading,
|
||||||
|
error,
|
||||||
|
preloadHomeData,
|
||||||
|
refreshHomeData
|
||||||
|
} from '@/common/server/home';
|
||||||
|
// 状态变量
|
||||||
|
const swiperHeight = ref(0);
|
||||||
|
const tabList = ref(['测试1', '测试2', '测试3', '测试4']);
|
||||||
|
const current = ref(0); // tabs组件的current值，表示当前活动的tab选项
|
||||||
|
const tabsBarHeight = ref(0);
|
||||||
|
const statusBarHeight = ref(uni.getSystemInfoSync().statusBarHeight);
|
||||||
|
const isQuerying = ref(false);
|
||||||
|
|
||||||
import stickySwiperNextItemVue from '../../components/sticky-swiper-next-item/sticky-swiper-next-item.vue';
|
// 组件引用
|
||||||
export default {
|
const pagePaging = ref(null);
|
||||||
components: {
|
const tabs = ref(null);
|
||||||
stickySwiperNextItemVue
|
const swiperList = ref(null);
|
||||||
},
|
|
||||||
data() {
|
onLoad(() => {
|
||||||
let statusBarHeight = uni.getSystemInfoSync().statusBarHeight;
|
|
||||||
return {
|
});
|
||||||
swiperHeight: 0,
|
// 初始化加载
|
||||||
tabList: ['测试1', '测试2', '测试3', '测试4'],
|
onMounted(() => {
|
||||||
current: 0, // tabs组件的current值，表示当前活动的tab选项
|
if (!homeData.value) preloadHomeData();
|
||||||
swiperHeight: 0,
|
});
|
||||||
tabsBarHeight: 0,
|
// 方法
|
||||||
observer: null,
|
const scroll = (e) => {
|
||||||
statusBarHeight,
|
// #ifdef MP
|
||||||
isQuerying: false
|
if (e.detail.scrollTop < 700 && statusBarHeight.value > 0) {
|
||||||
|
if (isQuerying.value) {
|
||||||
|
return;
|
||||||
}
|
}
|
||||||
},
|
isQuerying.value = true;
|
||||||
methods: {
|
const query = uni.createSelectorQuery();
|
||||||
scroll(e) {
|
query.select('.bar-view').boundingClientRect(rect => {
|
||||||
// #ifdef MP
|
if (rect) {
|
||||||
if (e.detail.scrollTop < 700 && this.statusBarHeight > 0) {
|
// 判断元素是否粘滞
|
||||||
if (this.isQuerying) {
|
if (rect.top <= 0 && tabsBarHeight.value == 0) {
|
||||||
return;
|
tabsBarHeight.value = statusBarHeight.value;
|
||||||
|
} else if (rect.top > 30 && statusBarHeight.value > 0) {
|
||||||
|
tabsBarHeight.value = 0;
|
||||||
}
|
}
|
||||||
this.isQuerying = true;
|
|
||||||
const query = uni.createSelectorQuery().in(this);
|
|
||||||
query.select('.bar-view').boundingClientRect(rect => {
|
|
||||||
if (rect) {
|
|
||||||
// 判断元素是否粘滞
|
|
||||||
if (rect.top <= 30) {
|
|
||||||
this.tabsBarHeight = this.statusBarHeight;
|
|
||||||
} else if (rect.top > 30 && this.statusBarHeight > 0) {
|
|
||||||
this.tabsBarHeight = 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
this.isQuerying = false;
|
|
||||||
|
|
||||||
}).exec();
|
|
||||||
}
|
}
|
||||||
// #endif
|
isQuerying.value = false;
|
||||||
},
|
}).exec();
|
||||||
// tabs通知swiper切换
|
|
||||||
tabsChange(index) {
|
|
||||||
this._setCurrent(index);
|
|
||||||
},
|
|
||||||
// 下拉刷新时，通知当前显示的列表进行reload操作
|
|
||||||
onRefresh() {
|
|
||||||
this.$refs.swiperList[this.current].reload(() => {
|
|
||||||
//当当前显示的列表刷新结束，结束当前页面的刷新状态
|
|
||||||
this.$refs.pagePaging.endRefresh();
|
|
||||||
});
|
|
||||||
},
|
|
||||||
// 当滚动到底部时，通知当前显示的列表加载更多
|
|
||||||
scrolltolower() {
|
|
||||||
this.$refs.swiperList[this.current].doLoadMore();
|
|
||||||
},
|
|
||||||
// swiper滑动中
|
|
||||||
swiperTransition(e) {
|
|
||||||
this.$refs.tabs.setDx(e.detail.dx);
|
|
||||||
},
|
|
||||||
// swiper滑动结束
|
|
||||||
swiperAnimationfinish(e) {
|
|
||||||
this._setCurrent(e.detail.current);
|
|
||||||
this.$refs.tabs.unlockDx();
|
|
||||||
},
|
|
||||||
// 设置swiper的高度
|
|
||||||
heightChanged(height) {
|
|
||||||
if (height === 0) {
|
|
||||||
// 默认swiper高度为屏幕可用高度-tabsView高度-slot="top"内view的高度
|
|
||||||
// 注意：uni.upx2px(80)不是固定的，它等于slot="top"内view的高度，如果slot="top"内view的高度不为80rpx，则需要修改这个值
|
|
||||||
height = uni.getSystemInfoSync().windowHeight - uni.upx2px(80);
|
|
||||||
}
|
|
||||||
this.swiperHeight = height;
|
|
||||||
},
|
|
||||||
_setCurrent(current) {
|
|
||||||
if (current !== this.current) {
|
|
||||||
//切换tab时，将上一个tab的数据清空
|
|
||||||
this.$refs.swiperList[this.current].clear();
|
|
||||||
}
|
|
||||||
this.current = current;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
// #endif
|
||||||
|
};
|
||||||
|
|
||||||
|
// tabs通知swiper切换
|
||||||
|
const tabsChange = (index) => {
|
||||||
|
_setCurrent(index);
|
||||||
|
};
|
||||||
|
|
||||||
|
// 下拉刷新时，通知当前显示的列表进行reload操作
|
||||||
|
const onRefresh = () => {
|
||||||
|
swiperList.value[current.value].reload(() => {
|
||||||
|
//当当前显示的列表刷新结束，结束当前页面的刷新状态
|
||||||
|
pagePaging.value.endRefresh();
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
// 当滚动到底部时，通知当前显示的列表加载更多
|
||||||
|
const scrolltolower = () => {
|
||||||
|
swiperList.value[current.value].doLoadMore();
|
||||||
|
};
|
||||||
|
|
||||||
|
// swiper滑动中
|
||||||
|
const swiperTransition = (e) => {
|
||||||
|
tabs.value.setDx(e.detail.dx);
|
||||||
|
};
|
||||||
|
|
||||||
|
// swiper滑动结束
|
||||||
|
const swiperAnimationfinish = (e) => {
|
||||||
|
_setCurrent(e.detail.current);
|
||||||
|
tabs.value.unlockDx();
|
||||||
|
};
|
||||||
|
|
||||||
|
// 设置swiper的高度
|
||||||
|
const heightChanged = (height) => {
|
||||||
|
if (height === 0) {
|
||||||
|
// 默认swiper高度为屏幕可用高度-tabsView高度-slot="top"内view的高度
|
||||||
|
// 注意：uni.upx2px(80)不是固定的，它等于slot="top"内view的高度，如果slot="top"内view的高度不为80rpx，则需要修改这个值
|
||||||
|
height = uni.getSystemInfoSync().windowHeight - uni.upx2px(80);
|
||||||
|
}
|
||||||
|
swiperHeight.value = height;
|
||||||
|
};
|
||||||
|
|
||||||
|
const _setCurrent = (currentVal) => {
|
||||||
|
if (currentVal !== current.value) {
|
||||||
|
//切换tab时，将上一个tab的数据清空
|
||||||
|
swiperList.value[current.value].clear();
|
||||||
|
}
|
||||||
|
current.value = currentVal;
|
||||||
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style>
|
<style lang="scss" scoped>
|
||||||
.banner-view {
|
.content {
|
||||||
background-color: #007AFF;
|
width: 96%;
|
||||||
color: white;
|
margin-left: 2%;
|
||||||
display: flex;
|
background-color: url('@@:static/bg.png');
|
||||||
flex-direction: column;
|
background-size: 100% 100%;
|
||||||
align-items: center;
|
background-repeat: no-repeat;
|
||||||
justify-content: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.paging-content {
|
|
||||||
flex: 1;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.swiper {
|
.swiper {
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue
Block a user