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

于 2023-12-15 16:25:52 发布
阅读量604 收藏 11
点赞数 8
文章标签： vue.js 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_41086056/article/details/135020263
版权

一、效果展示

淘宝：

在这里插入图片描述

京东：

在这里插入图片描述

二、话不多说，直接上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>
零度碳酸-
关注
获取物流信息并动态展示（仿淘宝物流信息）
chueia的博客
12-11 1万+
最终效果如图所示 前端代码如下 div class="track-rcol">             div class="track-list">                 ul>                     li class="first">                         i class="node-i
IOS仿京东菜单功能实现
10-12
IOS仿京东菜单功能实现
ios-仿京东首页模块滚动视图.zip
07-11
仿京东首页模块滚动视图
嵌套滑动的简单应用——仿京东淘宝首页
最新发布
tmacfrank的博客
06-10 834
系列文章目录 View 的绘制与事件分发（一）——视图层级与布局加载 例如：第一章 Python 机器学习入门之pandas的使用 一、pandas是什么？ 示例：pandas 是基于NumPy 的一种工具，该工具是为了解决数据分析任务而创建的。 二、使用步骤 1.引入库 代码如下（示例）： import numpy as np import pandas as pd import matplotlib.pyplot as plt import seaborn as sns import warnings
仿京东 首页i+购物车+详情页i
wsj19970717的博客
07-30 621
//配置支持Rxjava2 implementation 'com.squareup.retrofit2:adapter-rxjava2:+' implementation 'io.reactivex.rxjava2:rxjava:+' implementation 'io.reactivex.rxjava2:rxandroid:+' //banner i...
仿京东首页沉浸式以及滑动效果
09-13
仿京东首页，代码很简单，请自行看。
Android仿淘宝、京东Banner滑动查看图文详情
小马快跑的博客
10-01 2237
本文基于ViewPager2实现的Banner效果，进而实现了仿淘宝、京东Banner滑动至最后一页时继续滑动来查看图文详情的效果。
几行代码实现一个横向滑动指示器(淘宝首页分类样式)
鲨鱼不会飞的博客
12-19 1840
前言部分 一个类似淘宝首页分类的效果,可以横向滑动.但是不viewpager的那种效果. 地址放到文末了 内容部分 思路: 横向滑动的滑块需要跟随RecyclerView滑动. 我们可以让滑块和RecyclerView一起滑动,但是由于滑块下的轨道和RecyclerView的长度不一致的,所以需要转化一下RecyclerView的滑动距离. 通过一个比例尺性质的参数,实现滑块和Recycl...
iOS 仿淘宝,上拉进入详情页面
烽火连城的博客
12-04 3608
今天做的主要是一个模仿淘宝,上拉进入商品详情的功能,主要是通过 tableView 与 webView 一起来实现的,当然也可根据自己的需要把 webView 替换成你想要的 [objc] view plain copy   //   //  ViewController.m   //  仿淘宝,上拉进入详情   //   //  Create
jQuery仿淘宝鼠标悬停动画图标导航特效
10-24
本教程将探讨如何利用jQuery来实现一个仿淘宝的鼠标悬停动画图标导航特效，这个特效可以提升用户体验，使网站更具吸引力。 首先，我们需要了解jQuery的基本用法。jQuery的核心功能包括选择器（用于选取HTML元素）、...
ios-仿淘宝首页布局.zip
07-11
仿淘宝首页布局 https://github.com/gitxiyue/TaoBaoHomeDemo
ios-仿京东分类页面实现.zip
07-11
商品分类 列表二级和三级菜单
ios-仿京东商品详情页.zip
07-11
仿京东淘宝的商品详情页的上拉下拉效果
iOS仿京东地址选择
11-23
Object-C 实现仿京东选择地址效果!Object-C 实现仿京东选择地址效果!
iOS仿淘宝商品详情页
08-15
仿淘宝商品详情页
icons
04-01
在IT领域，图标（Icons）是用户界面设计中不可或缺的一部分，它们以图形方式代表各种功能、应用程序或数据，使得用户能够快速识别并交互。"icons.rar"文件可能包含了一系列图标资源，以及关于如何使用和设计图标的...
jQuery仿淘宝icon动画图标特效.zip
07-04
"jQuery仿淘宝icon动画图标特效.zip"是一个示例项目，旨在演示如何使用jQuery来创建与淘宝网站相似的图标悬停动画效果。这个项目是针对前端开发者的，特别是那些希望提升用户体验并为他们的网站添加视觉吸引力的人。...
iOS 模仿淘宝的首页UI
努力，可能成功！放弃，注定失败！
04-19 6344
要看UICollectionView的可以关了 全程都是tableview加button和autolayout 最近用autolayout真是越来越顺手了 Level:菜鸟 环境：Xcode7.3 iOS9.3 效果： 6s.gif 顶部轮播就不弄了。 好用的轮播传送： https://github.com/gsdios/SDCycleScrollView 图片
iOS开发 -- UIScrollView 仿京东金融首页效果
陈经风的博客
05-14 1511
京东金融效果如下： 代码地址：https://github.com/bybyWind/ImitateJDjrApp.git 先搭建三个UIScrollVIew: @property(nonatomic,strong)UIScrollView *bgScrollView;//背景ScollView @property(nonatomic,strong)UIScrollView *top...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值