滑动特效

components.d.ts

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

components/guyu/home/tabs.vue

@@ -1,26 +1,21 @@
 <template>
     <view class="tabs-container">
         <view class="tabs-wrapper">
-            <template v-for="(item, index) in list" :key="index">
+            <template v-for="(item, index) in slideLableList" :key="index">
-                <view class="tab-item-wrapper" :style="{ width: getLableWidth(item.name) }">
+                <view class="tab-item-wrapper" :style="{ width: item.width }">
-                    <view class="tab-item" @click="clickTab(index)">
+                    <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>
+                    </SlideLabel>
-                    <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';
+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) {
+    if (!slideLabels.value || slideLabels.value.length === 0 || isClick) return;
-        swiperDx.value = parseInt(dx);
+    // console.log('滑动处理了');
-        console.log(swiperDx.value, dx, systemWidth, getNextWidth(props.current));
+
-        throttleTimer = setTimeout(() => {
+    // 计算滑动百分比(0-100)
-            throttleTimer = null;
+    const absDx = Math.abs(dx);
-        }, 20);
+    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 {

components/guyu/page/slide-label.vue

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

pages/home/home-page.vue

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