仿淘宝、京东首页icons横向滑动效果

一、效果展示

淘宝:

在这里插入图片描述

京东:

在这里插入图片描述

二、话不多说,直接上demo

  1. 案例效果

在这里插入图片描述

  1. 代码
<template>
    <div class="demo-page">
        <h1>滚动效果</h1>
        <div class='icons-slide-wrapper'>
            <div class="icons-container" ref="iconsContainer">
                <div class="icon-block" v-for="(p, blockIndex) in filterList" :key="blockIndex">
                    <a class="icon-item" v-for="(item, itemIndex) in p" :key="item.id || itemIndex" :href="item.route" @click="toggleIconHandler(item)">
                        <div class="item-img">
                            <img :src="item.icon" alt="">
                        </div>
                        <div class="item-name">{{ item.name }}</div>
                    </a>
                </div>
            </div>
            <div class="indicator-container" v-if="demoList && demoList.length > 10">
                <div class="indicator-nav" ref="indicatorContainer">
                    <div class="nav-slide" ref="navSlide"></div>
                </div>
            </div>
        </div>
        
    </div>
</template>

<script>

export default {
    data () {
        return {
            demoList: [
                {
                    id: 1,
                    icon: 'https://gw.alicdn.com/imgextra/i2/O1CN01qrrUAN1wRjrhtfk6Q_!!6000000006305-2-tps-183-144.png_q90.jpg_.webp',
                    name: '摇现金',
                    route: 'https://m.caihuoxia.com/u/hunter-market/index'
                },
                {
                    id: 2,
                    icon: 'https://gw.alicdn.com/imgextra/i2/O1CN01qrrUAN1wRjrhtfk6Q_!!6000000006305-2-tps-183-144.png_q90.jpg_.webp',
                    name: '百亿补贴'
                },
                {
                    id: 3,
                    icon: 'https://gw.alicdn.com/imgextra/i2/O1CN01qrrUAN1wRjrhtfk6Q_!!6000000006305-2-tps-183-144.png_q90.jpg_.webp',
                    name: '芭芭农场'
                },
                {
                    id: 4,
                    icon: 'https://gw.alicdn.com/imgextra/i2/O1CN01qrrUAN1wRjrhtfk6Q_!!6000000006305-2-tps-183-144.png_q90.jpg_.webp',
                    name: '水排序'
                },
                {
                    id: 5,
                    icon: 'https://gw.alicdn.com/imgextra/i2/O1CN01qrrUAN1wRjrhtfk6Q_!!6000000006305-2-tps-183-144.png_q90.jpg_.webp',
                    name: '饿了么'
                },
                {
                    id: 6,
                    icon: 'https://gw.alicdn.com/imgextra/i2/O1CN01qrrUAN1wRjrhtfk6Q_!!6000000006305-2-tps-183-144.png_q90.jpg_.webp',
                    name: '天天特卖'
                },
                {
                    id: 7,
                    icon: 'https://gw.alicdn.com/imgextra/i2/O1CN01qrrUAN1wRjrhtfk6Q_!!6000000006305-2-tps-183-144.png_q90.jpg_.webp',
                    name: '家电清洗'
                },
                {
                    id: 8,
                    icon: 'https://gw.alicdn.com/imgextra/i2/O1CN01qrrUAN1wRjrhtfk6Q_!!6000000006305-2-tps-183-144.png_q90.jpg_.webp',
                    name: '活动日历'
                },
                {
                    id: 9,
                    icon: 'https://gw.alicdn.com/imgextra/i2/O1CN01qrrUAN1wRjrhtfk6Q_!!6000000006305-2-tps-183-144.png_q90.jpg_.webp',
                    name: '领淘金币'
                },
                {
                    id: 10,
                    icon: 'https://gw.alicdn.com/imgextra/i2/O1CN01qrrUAN1wRjrhtfk6Q_!!6000000006305-2-tps-183-144.png_q90.jpg_.webp',
                    name: '全部频道'
                },
                {
                    id: 11,
                    icon: 'https://gw.alicdn.com/imgextra/i2/O1CN01qrrUAN1wRjrhtfk6Q_!!6000000006305-2-tps-183-144.png_q90.jpg_.webp',
                    name: '摇现金'
                },
                {
                    id: 12,
                    icon: 'https://gw.alicdn.com/imgextra/i2/O1CN01qrrUAN1wRjrhtfk6Q_!!6000000006305-2-tps-183-144.png_q90.jpg_.webp',
                    name: '百亿补贴'
                },
                {
                    id: 13,
                    icon: 'https://gw.alicdn.com/imgextra/i2/O1CN01qrrUAN1wRjrhtfk6Q_!!6000000006305-2-tps-183-144.png_q90.jpg_.webp',
                    name: '芭芭农场'
                },
                {
                    id: 14,
                    icon: 'https://gw.alicdn.com/imgextra/i2/O1CN01qrrUAN1wRjrhtfk6Q_!!6000000006305-2-tps-183-144.png_q90.jpg_.webp',
                    name: '水排序'
                },
                {
                    id: 15,
                    icon: 'https://gw.alicdn.com/imgextra/i2/O1CN01qrrUAN1wRjrhtfk6Q_!!6000000006305-2-tps-183-144.png_q90.jpg_.webp',
                    name: '饿了么'
                },
                {
                    id: 16,
                    icon: 'https://gw.alicdn.com/imgextra/i2/O1CN01qrrUAN1wRjrhtfk6Q_!!6000000006305-2-tps-183-144.png_q90.jpg_.webp',
                    name: '天天特卖'
                },
                {
                    id: 17,
                    icon: 'https://gw.alicdn.com/imgextra/i2/O1CN01qrrUAN1wRjrhtfk6Q_!!6000000006305-2-tps-183-144.png_q90.jpg_.webp',
                    name: '家电清洗'
                },
                {
                    id: 18,
                    icon: 'https://gw.alicdn.com/imgextra/i2/O1CN01qrrUAN1wRjrhtfk6Q_!!6000000006305-2-tps-183-144.png_q90.jpg_.webp',
                    name: '活动日历'
                },
                {
                    id: 19,
                    icon: 'https://gw.alicdn.com/imgextra/i2/O1CN01qrrUAN1wRjrhtfk6Q_!!6000000006305-2-tps-183-144.png_q90.jpg_.webp',
                    name: '领淘金币'
                },
                {
                    id: 20,
                    icon: 'https://gw.alicdn.com/imgextra/i2/O1CN01qrrUAN1wRjrhtfk6Q_!!6000000006305-2-tps-183-144.png_q90.jpg_.webp',
                    name: '全部频道'
                },
            ]
        }
    },
    methods: {
        toggleIconHandler (item) {
            console.log(item,'toggleIconHandlertoggleIconHandlertoggleIconHandler')
        }

    },
    created () {

    },
    computed: {
        filterList () {
            const groupedData = []
            const groupSize = 10 // 每组的大小
            for (let i = 0; i < this.demoList.length; i += groupSize) {
                groupedData.push(this.demoList.slice(i, i + groupSize))
            }
            return groupedData
        }
    },
    mounted () {
        // 获取元素引用
        const iconsContainer = this.$refs.iconsContainer
        const indicatorContainer = this.$refs.indicatorContainer
        const navSlide = this.$refs.navSlide

        // 添加滚动事件监听器
        this.scrollListener = () => {
            const scrollLeft = iconsContainer.scrollLeft
            const containerWidth = iconsContainer.clientWidth
            const totalWidth = iconsContainer.scrollWidth
            const indicatorNavWidth = indicatorContainer.clientWidth

            // 计算比例
            const ratio = containerWidth / totalWidth

            // 计算 nav-slide 的宽度和位置
            const navSlideWidth = indicatorNavWidth * ratio
            const maxScrollLeft = totalWidth - containerWidth
            // 当前滚动位置相对于最大滚动位置的比例
            const adjustedScrollLeft = Math.min(scrollLeft, maxScrollLeft)

            // 动态设置 nav-slide 的宽度和位置
            navSlide.style.width = navSlideWidth + "px"
            // 通过 (indicatorNavWidth - navSlideWidth) 确保 nav-slide 不会超出右侧边界。
            navSlide.style.transform = `translateX(${(adjustedScrollLeft / maxScrollLeft) * (indicatorNavWidth - navSlideWidth)}px)`
        }

        // 添加事件监听器
        if (this.demoList && this.demoList.length > 10) {
            iconsContainer.addEventListener("scroll", this.scrollListener)
        }
    },
    beforeDestroy () {
        // 移除事件监听器
        if (this.demoList && this.demoList.length > 10) {
            const iconsContainer = this.$refs.iconsContainer
            iconsContainer.removeEventListener("scroll", this.scrollListener)

        }
    },

}
</script>
<style lang="less" scoped>
.demo-page {
    margin: 0;
    padding: 0;
    overflow: hidden;
    background: #dedede;
    height: 100vh;
    padding: 12px;
}

.icons-slide-wrapper {
    height: auto;
    width: 100%;
    background-color: #FFFFFF;
    overflow: hidden;

    .icons-container {
        display: flex;
        overflow: hidden;
        overflow-x: auto;
        flex-wrap: nowrap;

        .icon-block {
            width: 100%;
            display: flex;
            flex-wrap: wrap;
            flex: 0 0 auto;
            margin-right: 10px;

            .icon-item {
                box-sizing: border-box;
                width: 62px;
                height: 62px;
                padding: 0 0px 3px;
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                background-color: #f4f4f4;
                margin-right: 10px;
                margin-bottom: 12px;


                .item-img {
                    width: 42px;
                    height: 42px;

                    img {
                        width: 100%;
                        height: 42px;
                        object-fit: cover;
                    }
                }

                .item-name {
                    margin-top: 6px;
                    font-size: 12px;
                    transform: scale(0.91, 0.91);
                    font-family: PingFangSC, PingFang SC;
                    font-weight: 400;
                    color: #5E5E5E;
                    line-height: 11px;
                    max-width: 58px;
                    overflow: hidden;
                    white-space: nowrap;
                    text-overflow: ellipsis;

                }
            }

            .icon-item:nth-child(5n) {
                margin-right: 0;
            }
        }

        .icon-block:last-child {
            margin-right: 0;
        }

    }

    .icons-container::-webkit-scrollbar {
        width: 0;
        /* 隐藏垂直滚动条 */
        height: 0;
        /* 隐藏水平滚动条 */
    }

    .icons-container::-webkit-scrollbar-thumb {
        background-color: transparent;
        /* 隐藏滚动条thumb */
    }

    .indicator-container {
        display: flex;
        width: 100%;
        justify-content: center;

        .indicator-nav {
            width: 28px;
            height: 2px;
            background: #D8D8D8;
            border-radius: 3px;

            .nav-slide {
                height: 2px;
                width: 14px;
                border-radius: 3px;
                background-color: #fe4c1a;
                will-change: transform;
            }
        }
    }
}
</style>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/247663.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

【Java代码审计】SQL注入篇

【Java代码审计】SQL注入篇 1.Java执行SQL语句的几种方式2.Java SQL注入SQL语句参数直接动态拼接预编译依然采用拼接order by注入%和_模糊查询MyBatis中使用存在风险的语法 3.Java常规注入代码审计思路4.二次注入代码审计 1.Java执行SQL语句的几种方式 1、JDBC Statement执行S…

java综合实验-图书管理系统

二、实验项目内容&#xff08;实验题目&#xff09; 1. 使用Java编程语言进行实验。 2. 采用面向对象的思想进行系统设计。 3. 实现基本的图书管理功能&#xff0c;包括添加图书、删除图书、查询图书信息等。 4. 要求有良好的用户交互界面。 步骤参考&#xff1a; 步骤一…

ChatGPT使用:一个发包机器人的提示词

发包机器人&#xff1a; 设想&#xff1a;目前项目组有n条打包线会输出多个包&#xff0c;用户想获取最新的包是比较困难的&#xff0c;难点在于 1. 分支多&#xff1a;trunk&#xff0c;release&#xff0c;outer等&#xff0c;至少有3个分支&#xff1b; 2. 多平台&#x…

数据分析的基本步骤

了解过数据分析的概念之后&#xff0c;我们再来说下数据分析的常规步骤。 明确目标 首先我们要确定一个目标&#xff0c;即我们要从数据中得到什么。比如我们要看某个指标A随时间的变化趋势&#xff0c;以期进行简单的预测。 数据收集 当确定了目标之后&#xff0c;就有了取…

音乐制作软件Ableton Live 11 mac功能特点

Ableton Live 11 mac是一款数字音频工作站软件&#xff0c;用于音乐制作、录音、混音和现场演出是一款流行的音乐制作软件。 Ableton Live 11 mac特点和功能 Comping功能&#xff1a;Live 11增加了Comping功能&#xff0c;允许用户在不同的录音轨道上进行多次录音&#xff0c;…

前端离开后端就不能开发项目了吗?

前端离开后端就不能开发项目了吗&#xff1f; 经常在技术社区中看到后端个个都能代替前端&#xff0c;前端却代替不了后端&#xff01; 后端有多牛&#xff0c;前端有多菜&#xff01;嗯.......事实真的如此吗&#xff1f;前端一个人在没有服务器、数据库的情况下到底能不能开发…

怎么把图片转文字?这几个图片转文字方法一定要知道!

怎么把图片转文字&#xff1f;无论是从书籍、网络还是社交媒体上&#xff0c;我们经常需要从图片中提取文字来进行复制、编辑或翻译。手动操作耗时耗力&#xff0c;效率低下&#xff0c;那么怎么把图片转文字呢&#xff1f;今天我将介绍三种不同的方法来实现图片转文字。 图片转…

Python之time模块详解

python3中time模块的用法及说明 python中&#xff0c;导入time模块使用的命令是 import time 可以使用以下命令查看time模块内置的能够使用的方法&#xff1a; dir(time) 可以使用以下命令查看time模块中每个内置方法的说明&#xff1a; help(time.time_method) 比如time模块下…

elementui + vue2实现表格行的上下移动

场景&#xff1a; 如上&#xff0c;要实现表格行的上下移动 实现&#xff1a; <el-dialogappend-to-bodytitle"条件编辑":visible.sync"dialogVisible"width"60%"><el-table :data"data1" border style"width: 100%&q…

Python之random模块详解

python的random模块 random模块是python中一个生成随机数的模块。 random不是python解释器内置的模块。 导入random模块的方法是&#xff1a; import random 如果只使用random模块中的单个方法的话&#xff0c;也可以使用 from random import method_name 例如&#xff1a; …

中医处方软件西医电子处方系统,一键生成处方单可设置配方模板教程

一、前言 有的诊所是中医和西医都有&#xff0c;医师是全科医师&#xff0c;那么所使用的软件既要能开中药处方也要能开西药处方&#xff0c;而且可以通过一键生成配方&#xff0c;则可以节省很多时间。 下面就以 佳易王诊所卫生室电子处方为例说明 如上图&#xff0c;如果是…

Python Pandas 如何给DataFrame增加一行/多行 数据(第6讲)

Python Pandas 如何给DataFrame增加一行/多行 数据(第6讲)         🍹博主 侯小啾 感谢您的支持与信赖。☀️ 🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ…

【Linux】进程周边004之进程的调度与切换(领略Linux系统进程调度算法的神奇)

&#x1f440;樊梓慕&#xff1a;个人主页 &#x1f3a5;个人专栏&#xff1a;《C语言》《数据结构》《蓝桥杯试题》《LeetCode刷题笔记》《实训项目》《C》《Linux》 &#x1f31d;每一个不曾起舞的日子&#xff0c;都是对生命的辜负 目录 前言 1.进程切换 2.进程调度 2.…

十四 动手学深度学习v2计算机视觉 ——转置矩阵

文章目录 基本操作填充、步幅和多通道再谈转置卷积不填充&#xff0c;步幅为1填充为p&#xff0c;步幅为1填充为p&#xff0c;步幅为s 基本操作 填充、步幅和多通道 填充&#xff1a; 与常规卷积不同&#xff0c;在转置卷积中&#xff0c;填充被应用于的输出&#xff08;常规卷…

ospf 知识总结

ospf 知识总结 一、ospf的概念 - 开放式最短路径优先协议&#xff0c;是广泛使用的一种动态路由协议&#xff0c;它属于链路状态路由协议&#xff0c;是一个内部网关协议&#xff08;IGP&#xff09;&#xff0c;用于在单一自治系统&#xff08;AS&#xff09;内决策路由。 - …

OpenHarmony - 应用开发入门指南

一、了解OpenHarmony OpenHarmony是由开放原子开源基金会(OpenAtom Foundation)孵化及运营的开源项目, 目标是面向全场景、全连接、全智能时代, 搭建一个智能终端设备操作系统的框架和平台, 促进万物互联产业的繁荣发展。 开放原子开源基金会&#xff1a; 由阿里巴巴、百度、华…

数据分析为何要学统计学(7)——什么问题适合使用t检验?

t检验&#xff08;Students t test&#xff09;&#xff0c;用于通过小样本&#xff08;样本容量n < 30&#xff09;对总体均值水平进行无差异推断。 t检验要求样本不能超过两组&#xff0c;且每组样本总体服从正态分布&#xff08;对于三组以上样本的&#xff0c;要用方差…

yolov8实战第二天——yolov8训练结果分析(保姆式解读)

yolov8实战第一天——yolov8部署并训练自己的数据集&#xff08;保姆式教程&#xff09;-CSDN博客 我们在上一篇文章训练了一个老鼠的yolov8检测模型&#xff0c;训练结果如下图&#xff0c;接下来我们就详细解析下面几张图。 一、混淆矩阵 正确挑选&#xff08;正确&#…

CompletableFuture原理解析

文章目录 一、 Callable、Future介绍1. 简介2. 底层原理 二、 FutureTask介绍1. 简介2. 底层原理 三、CompletionService1. 简介2. 原理3. 源码分析4. 总结 四、CompletableFuture1. 简介2. 案例3. 源码分析 一、 Callable、Future介绍 1. 简介 Future 是用于表示异步计算结果…

美客多、亚马逊卖家借助自养号测评增加销量和提升店铺排名的方法

在跨境电商的浩瀚领域中&#xff0c;成功打造并运营一个具有竞争力的店铺如同航行在大海中的一艘船&#xff0c;需要精准的航向和持续的努力。亚马逊&#xff0c;美客多这个广袤的电商平台&#xff0c;如同一片繁星点点的海域&#xff0c;需要卖家们以巧妙的策略和专注的态度航…