shang/guyu
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

滑动特效

Browse Source
This commit is contained in:
zpc 2025-07-25 02:50:17 +08:00
parent a103146953
commit 87c6fe7112
4 changed files with 332 additions and 56 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
components.d.ts vendored
View File

@ -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']
}

176
components/guyu/home/tabs.vue
View File

@ -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
View 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>

4
pages/home/home-page.vue
View File

@ -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">