滑动特效
This commit is contained in:
zpc
parent
a103146953
commit
87c6fe7112
2
components.d.ts
vendored
2
components.d.ts
vendored
|
|
@ -16,6 +16,8 @@ declare module 'vue' {
|
|||
RouterLink: typeof import('vue-router')['RouterLink']
|
||||
RouterView: typeof import('vue-router')['RouterView']
|
||||
Search: typeof import('./components/guyu/home/search.vue')['default']
|
||||
SlideLabel: typeof import('./components/guyu/page/slide-label.vue')['default']
|
||||
SlideLable: typeof import('./components/guyu/page/slide-lable.vue')['default']
|
||||
Swiper: typeof import('./components/guyu/home/swiper.vue')['default']
|
||||
Tabs: typeof import('./components/guyu/home/tabs.vue')['default']
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,26 +1,21 @@
|
|||
<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)">
|
||||
<template v-for="(item, index) in slideLableList" :key="index">
|
||||
<view class="tab-item-wrapper" :style="{ width: item.width }">
|
||||
<SlideLabel ref="slideLabels"
|
||||
style="width: 100%;height:40rpx;border-radius: 50rpx;border: 1rpx solid #9A8F79;"
|
||||
:defaultColor="item.active ? '#F5D677' : '#fff'" @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>
|
||||
</SlideLabel>
|
||||
</view>
|
||||
</template>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
<script setup>
|
||||
import { onMounted, ref } from 'vue';
|
||||
import { onMounted, ref, watch, nextTick } from 'vue';
|
||||
import SlideLabel from '@/components/guyu/page/slide-label.vue';
|
||||
|
||||
const props = defineProps({
|
||||
list: {
|
||||
|
|
@ -30,11 +25,68 @@ const props = defineProps({
|
|||
current: {
|
||||
type: Number,
|
||||
default: 0
|
||||
},
|
||||
});
|
||||
|
||||
// 滑动方向：1表示向右滑，-1表示向左滑，0表示初始状态
|
||||
let slideDirection = ref(0);
|
||||
// 标签列表
|
||||
let slideLableList = ref([]);
|
||||
// 滑块组件引用
|
||||
let slideLabels = ref([]);
|
||||
|
||||
// 初始化和更新slideLableList的函数
|
||||
const initSlideLableList = () => {
|
||||
slideLableList.value = props.list.map((item, index) => {
|
||||
return {
|
||||
name: item.name,
|
||||
width: getLableWidth(item.name),
|
||||
active: index === props.current,
|
||||
data: item
|
||||
}
|
||||
});
|
||||
|
||||
// 确保DOM更新后再操作SlideLabel实例
|
||||
nextTick(() => {
|
||||
updateLabelsState();
|
||||
});
|
||||
}
|
||||
|
||||
// 监听props.list的变化
|
||||
watch(() => props.list, () => {
|
||||
initSlideLableList();
|
||||
}, { deep: true });
|
||||
|
||||
// 监听current变化，处理标签切换
|
||||
watch(() => props.current, (newCurrent, oldCurrent) => {
|
||||
if (newCurrent !== oldCurrent && slideLableList.value.length > 0) {
|
||||
// 更新激活状态
|
||||
slideLableList.value.forEach((item, index) => {
|
||||
item.active = index === newCurrent;
|
||||
});
|
||||
|
||||
// nextTick(() => {
|
||||
// updateLabelsState();
|
||||
// });
|
||||
}
|
||||
});
|
||||
onMounted(() => {
|
||||
|
||||
// 更新所有标签状态
|
||||
const updateLabelsState = () => {
|
||||
if (!slideLabels.value || slideLabels.value.length === 0) return;
|
||||
|
||||
// 重置所有标签状态
|
||||
slideLabels.value.forEach((label, index) => {
|
||||
if (label && label.reset) {
|
||||
label.reset();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
initSlideLableList();
|
||||
})
|
||||
|
||||
const getLableWidth = (name) => {
|
||||
let t = name.length * 20 + 40;
|
||||
if (t < 80) {
|
||||
|
|
@ -42,43 +94,72 @@ const getLableWidth = (name) => {
|
|||
}
|
||||
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']);
|
||||
|
||||
// 方法
|
||||
let isClick = false;
|
||||
// 点击标签
|
||||
const clickTab = (index) => {
|
||||
emit("change", index)
|
||||
};
|
||||
console.log('点击标签');
|
||||
if (index == props.current) {
|
||||
return;
|
||||
}
|
||||
isClick = true;
|
||||
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);
|
||||
if (!slideLabels.value || slideLabels.value.length === 0 || isClick) return;
|
||||
// console.log('滑动处理了');
|
||||
|
||||
// 计算滑动百分比(0-100)
|
||||
const absDx = Math.abs(dx);
|
||||
const percent = Math.min(100, Math.round((absDx / systemWidth) * 100));
|
||||
|
||||
// 确定滑动方向
|
||||
const direction = dx > 0 ? 1 : (dx < 0 ? -1 : 0);
|
||||
slideDirection.value = direction;
|
||||
|
||||
const currentIndex = props.current;
|
||||
|
||||
if (direction > 0 && currentIndex + 1 < slideLableList.value.length) {
|
||||
// 向右滑动 - 当前标签颜色消失，下一标签颜色出现
|
||||
const nextIndex = currentIndex + 1;
|
||||
|
||||
// 当前标签从右侧被透明覆盖
|
||||
slideLabels.value[currentIndex]?.coverFromLeft('#fff', percent);
|
||||
|
||||
// 下一个标签从左侧被颜色覆盖
|
||||
slideLabels.value[nextIndex]?.coverFromLeft('#F5D677', percent);
|
||||
|
||||
} else if (direction < 0 && currentIndex > 0) {
|
||||
// 向左滑动 - 当前标签颜色消失，前一标签颜色出现
|
||||
const prevIndex = currentIndex - 1;
|
||||
|
||||
// 当前标签从左侧被透明覆盖
|
||||
slideLabels.value[currentIndex]?.coverFromRight('#fff', percent);
|
||||
|
||||
// 前一个标签从右侧被颜色覆盖
|
||||
slideLabels.value[prevIndex]?.coverFromRight('#F5D677', percent);
|
||||
}
|
||||
}
|
||||
|
||||
// 滑动结束，重置状态
|
||||
const unlockDx = () => {
|
||||
swiperDx.value = 0;
|
||||
slideDirection.value = 0;
|
||||
if (isClick) {
|
||||
isClick = false;
|
||||
}
|
||||
// 更新所有标签状态
|
||||
nextTick(() => {
|
||||
updateLabelsState();
|
||||
|
||||
// 确保当前选中的标签显示正确的颜色
|
||||
slideLableList.value.forEach((item, index) => {
|
||||
item.active = index === props.current;
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
// 暴露方法给父组件
|
||||
|
|
@ -105,19 +186,6 @@ defineExpose({
|
|||
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 {
|
||||
|
|
|
|||
206
components/guyu/page/slide-label.vue
Normal file
206
components/guyu/page/slide-label.vue
Normal file
|
|
@ -0,0 +1,206 @@
|
|||
<template>
|
||||
<view class="slide-label" :style="containerStyle">
|
||||
<!-- 默认颜色背景 -->
|
||||
<view class="color-bg default-color" :style="{ background: defaultColor }"></view>
|
||||
|
||||
<!-- 右侧覆盖颜色 -->
|
||||
<view class="color-bg right-cover" :style="rightCoverStyle" v-if="showRightCover"></view>
|
||||
|
||||
<!-- 左侧覆盖颜色 -->
|
||||
<view class="color-bg left-cover" :style="leftCoverStyle" v-if="showLeftCover"></view>
|
||||
|
||||
<!-- 内容层 -->
|
||||
<view class="content-layer">
|
||||
<slot>{{ content }}</slot>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, computed } from 'vue';
|
||||
|
||||
// 定义组件属性
|
||||
const props = defineProps({
|
||||
// 默认颜色
|
||||
defaultColor: {
|
||||
type: String,
|
||||
default: '#FFFFFF'
|
||||
},
|
||||
// 显示文本
|
||||
content: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
// 高度
|
||||
height: {
|
||||
type: [Number, String],
|
||||
default: '80rpx'
|
||||
},
|
||||
// 圆角
|
||||
borderRadius: {
|
||||
type: [Number, String],
|
||||
default: '8rpx'
|
||||
},
|
||||
// 文字颜色
|
||||
textColor: {
|
||||
type: String,
|
||||
default: '#000000'
|
||||
}
|
||||
});
|
||||
|
||||
// 发出事件
|
||||
const emit = defineEmits(['coverChange']);
|
||||
|
||||
// 右侧覆盖颜色状态
|
||||
const rightCoverColor = ref('');
|
||||
const rightCoverPercent = ref(0);
|
||||
const showRightCover = ref(false);
|
||||
|
||||
// 左侧覆盖颜色状态
|
||||
const leftCoverColor = ref('');
|
||||
const leftCoverPercent = ref(0);
|
||||
const showLeftCover = ref(false);
|
||||
|
||||
// 容器样式
|
||||
const containerStyle = computed(() => {
|
||||
return {
|
||||
height: typeof props.height === 'number' ? `${props.height}rpx` : props.height,
|
||||
borderRadius: typeof props.borderRadius === 'number' ? `${props.borderRadius}rpx` : props.borderRadius,
|
||||
color: props.textColor
|
||||
};
|
||||
});
|
||||
|
||||
// 右侧覆盖层样式
|
||||
const rightCoverStyle = computed(() => {
|
||||
return {
|
||||
background: rightCoverColor.value,
|
||||
width: `${rightCoverPercent.value}%`,
|
||||
right: 0
|
||||
};
|
||||
});
|
||||
|
||||
// 左侧覆盖层样式
|
||||
const leftCoverStyle = computed(() => {
|
||||
return {
|
||||
background: leftCoverColor.value,
|
||||
width: `${leftCoverPercent.value}%`,
|
||||
left: 0
|
||||
};
|
||||
});
|
||||
|
||||
/**
|
||||
* 从右侧覆盖颜色
|
||||
* @param {String} color 新颜色
|
||||
* @param {Number} percent 覆盖百分比(0-100)
|
||||
*/
|
||||
function coverFromRight(color, percent = 0) {
|
||||
// 确保百分比在有效范围内
|
||||
const safePercent = Math.max(0, Math.min(100, percent));
|
||||
|
||||
// 设置覆盖颜色
|
||||
rightCoverColor.value = color;
|
||||
rightCoverPercent.value = safePercent;
|
||||
|
||||
// 显示覆盖层
|
||||
showRightCover.value = safePercent > 0;
|
||||
|
||||
// 如果覆盖层宽度为0，隐藏它
|
||||
if (safePercent === 0) {
|
||||
showRightCover.value = false;
|
||||
}
|
||||
|
||||
// 触发覆盖变化事件
|
||||
emit('coverChange', {
|
||||
direction: 'right',
|
||||
color: color,
|
||||
percent: safePercent
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* 从左侧覆盖颜色
|
||||
* @param {String} color 新颜色
|
||||
* @param {Number} percent 覆盖百分比(0-100)
|
||||
*/
|
||||
function coverFromLeft(color, percent = 0) {
|
||||
// 确保百分比在有效范围内
|
||||
const safePercent = Math.max(0, Math.min(100, percent));
|
||||
|
||||
// 设置覆盖颜色
|
||||
leftCoverColor.value = color;
|
||||
leftCoverPercent.value = safePercent;
|
||||
|
||||
// 显示覆盖层
|
||||
showLeftCover.value = safePercent > 0;
|
||||
|
||||
// 如果覆盖层宽度为0，隐藏它
|
||||
if (safePercent === 0) {
|
||||
showLeftCover.value = false;
|
||||
}
|
||||
|
||||
// 触发覆盖变化事件
|
||||
emit('coverChange', {
|
||||
direction: 'left',
|
||||
color: color,
|
||||
percent: safePercent
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* 重置所有覆盖层
|
||||
*/
|
||||
function reset() {
|
||||
rightCoverPercent.value = 0;
|
||||
leftCoverPercent.value = 0;
|
||||
showRightCover.value = false;
|
||||
showLeftCover.value = false;
|
||||
}
|
||||
|
||||
// 暴露方法
|
||||
defineExpose({
|
||||
coverFromRight,
|
||||
coverFromLeft,
|
||||
reset
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.slide-label {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.color-bg {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
transition: width 0.3s ease-out;
|
||||
}
|
||||
|
||||
.default-color {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.right-cover {
|
||||
height: 100%;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.left-cover {
|
||||
height: 100%;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.content-layer {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -10,12 +10,12 @@
|
|||
<!-- 轮播图 -->
|
||||
<guyu-home-swiper :advert-list="homeData?.advertList" style="width: 100%;" />
|
||||
<!-- 推荐位 -->
|
||||
<guyu-home-recommend :rec-list="homeData?.recList" @item-click="toDetails" style="width: 100%;" />
|
||||
<guyu-home-recommend :rec-list="homeData?.recList" style="width: 100%;" />
|
||||
|
||||
<!-- 小程序中直接修改组件style为position: sticky;无效，需要在组件外层套一层view -->
|
||||
<view class="bar-view" style="z-index:97;position: sticky;top :0;background-color: #fff;">
|
||||
<view :style="{ height: tabsBarHeight + 'px' }" class="status-bar"> </view>
|
||||
<guyu-home-tabs ref="tabs" :list="homeData.categories" @change="tabsChange" :current="current" />
|
||||
<guyu-home-tabs ref="tabs" :list="homeData?.categories" @change="tabsChange" :current="current" />
|
||||
</view>
|
||||
<swiper class="swiper" :style="[{ height: swiperHeight + 'px' }]" :current="current"
|
||||
@transition="swiperTransition" @animationfinish="swiperAnimationfinish">
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user