vue手写卡片式轮播

最新推荐文章于 2025-06-18 14:38:14 发布
最新推荐文章于 2025-06-18 14:38:14 发布
阅读量2.5k 收藏 13
点赞数 1
CC 4.0 BY-SA版权
文章标签： vue.js 前端 javascript
原文链接：https://www.jianshu.com/p/9170280de06c

先看效果：

5个卡片要计算各自的高度，宽度，利用相对定位计算出各自的位置
然后transition过渡来实现动画效果
由于开头卡片和末尾卡片的滑动整体性，我在config5数组开头和末尾加了2个隐藏的样式。使得有个滑出屏幕的效果

下面是代码：

<template>
<div>
  <transition name="fade">
    <div @touchend='end' @touchstart='start' @touchmove='move' class="swiper">
      <div @click="chooseItem(item,index)" v-for="(item, index) in imgs" :style="config5[index]" :key="item.cover">
        <img :src="item.cover" style="width: 100%; height: 100%;">
      </div>
    </div>
  </transition>
  <h1 @click="prev">上一个</h1>
    <h1 @click="next">下一个</h1>
    <h1>当前：{{ centerInfo.id }}</h1>
  </div>
</template>
<script>
export default {
    name: 'zt',
    data() {
        return {
            loading: true,
            currentIndex: 3, //当前中间imgs数组中index
            centerInfo: '', // 当前中间信息
            startX: '',
            endX: '',
            imgs: [
                {
                    id: '莱因哈特1',
                    index: 0,
                    cover:
                        'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1572888260036&di=875bc88905bf4b6923784df1589edb0b&imgtype=0&src=http%3A%2F%2Fi-1.itobike.com%2F2017%2F5%2F26%2Ff6038942-393f-441e-9380-a2f1607c3385.jpg'
                },
                {
                    id: '安娜2',
                    index: 1,
                    cover:
                        'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1572888297322&di=9d5d97f952329ccf2277b2033b129d5d&imgtype=0&src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201803%2F28%2F20180328101238_VHiji.jpeg'
                },
                {
                    id: '卢西奥3',
                    index: 2,
                    cover:
                        'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1573483062&di=9d6983ba28c123896b27148e313ada65&imgtype=jpg&er=1&src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201608%2F15%2F20160815133037_4YAfh.jpeg'
                },
                {
                    id: 'DVA4',
                    index: 3,
                    cover:
                        'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1572888405708&di=3381891cd042db432083ed2446ddf446&imgtype=0&src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201805%2F06%2F20180506201144_JPTd3.thumb.700_0.jpeg'
                },
                {
                    id: '莫伊拉5',
                    index: 4,
                    cover:
                        'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1572888441984&di=47544529365104e11276d639838741c3&imgtype=0&src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201801%2F06%2F20180106221938_58EGv.thumb.224_0.jpeg'
                },
                {
                    id: '裂空6',
                    index: 5,
                    cover:
                        'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1572888482891&di=5416c6abf187547cd329377dc1092fff&imgtype=0&src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201610%2F20%2F20161020175323_auiK8.thumb.700_0.jpeg'
                },
                {
                    id: '麦克雷7',
                    index: 6,
                    cover:
                        'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1572888500984&di=f415feaef2c02b497e9d3801743b8e49&imgtype=0&src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201711%2F26%2F20171126191812_4x8RV.thumb.700_0.jpeg'
                },
                {
                    id: '士兵76  8',
                    index: 7,
                    cover:
                        'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1573056788040&di=dbf1954ad8ba1bee16afd9f47d763512&imgtype=0&src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201704%2F24%2F20170424202013_hveir.jpeg'
                },
                {
                    id: '狂鼠9',
                    index: 8,
                    cover:
                        'http://ztd00.photos.bdimg.com/ztd/w=700;q=50/sign=ea29fa95c13d70cf4cfaa80dc8e7a03d/42166d224f4a20a4d334946b98529822720ed070.jpg'
                },
                {
                    id: '死神 10',
                    index: 9,
                    cover:
                        'http://www.agri35.com/UploadFiles/img_2_4163694432_214245738_26.jpg'
                },
                {
                    id: '禅雅塔 11',
                    index: 10,
                    cover:
                        'http://pic2.zhimg.com/v2-1c9b73f260ea2652dcdedfc782fde90d_b.jpg'
                },
                {
                    id: '黑百合 12',
                    index: 11,
                    cover:
                        'http://b-ssl.duitang.com/uploads/item/201710/14/20171014134122_KmPQy.jpeg'
                }
            ],
            previous: 0,
            config5: [
                {
                    id: '-A',
                    position: 'absolute',
                    width: '22%',
                    height: '72%',
                    top: '19.2%',
                    left: '-22%',
                    opacity: 0,
                    zIndex: 0,
                    transition: '.4s'
                },
                {
                    id: 'A',
                    position: 'absolute',
                    width: '22%',
                    height: '72%',
                    top: '19.2%',
                    left: '0%',
                    opacity: 1,
                    zIndex: 1,
                    transition: '.4s'
                },
                {
                    id: 'B',
                    position: 'absolute',
                    width: '28%',
                    height: '82%',
                    top: '14%',
                    left: '13%',
                    opacity: 1,
                    zIndex: 2,
                    transition: '.4s'
                },
                {
                    id: 'center',
                    position: 'absolute',
                    width: '45%',
                    height: '100%',
                    top: '0px',
                    left: '50%',
                    marginLeft: '-22.5%',
                    opacity: 1,
                    zIndex: 4,
                    transition: '.4s'
                },
                {
                    id: 'D',
                    position: 'absolute',
                    width: '28%',
                    height: '82%',
                    top: '14%',
                    left: '61.8%',
                    opacity: 1,
                    zIndex: 2,
                    transition: '.4s'
                },
                {
                    id: 'E',
                    position: 'absolute',
                    width: '22%',
                    height: '72%',
                    top: '19.2%',
                    left: '78%',
                    opacity: 1,
                    zIndex: 1,
                    transition: '.4s'
                },
                {
                    id: 'E+',
                    position: 'absolute',
                    width: '22%',
                    height: '72%',
                    top: '19.2%',
                    left: '100%',
                    opacity: 0,
                    zIndex: 0,
                    transition: '.4s'
                }
            ]
        };
    },
    methods: {
        // 获取数据
        async getData() {
            this.$nextTick(() => {
                this.loading = false;
            });
        },
        // 滑动上一个
        prev(index) {
            // this.imgs.unshift(this.imgs.pop());
            this.config5.push(this.config5.shift());
            this.currentIndex = this.currentIndex - 1;
            if (this.currentIndex < 0) {
                this.currentIndex = this.imgs.length - 1;
            }
            this.centerCard();
            this.centerIndex('prev');
        },
        // 滑动下一个
        next() {
            // this.imgs.push(this.imgs.shift());
            this.config5.unshift(this.config5.pop());
            this.currentIndex = this.currentIndex + 1;
            if (this.currentIndex > this.imgs.length - 1) {
                this.currentIndex = 0;
            }
            this.centerCard();
            this.centerIndex('next');
            // console.log(this.currentIndex);
        },
        // 开始移动端滑动屏幕
        start(event) {
            this.startX = event.changedTouches[0].clientX;
            this.startY = event.changedTouches[0].clientY;
        },
        // 连续滑动
        move(event) {
            this.endY = event.changedTouches[0].clientY;
            this.endX = event.changedTouches[0].clientX;
            this.stopDefault(event);
// 如果是滑动，注解（223行到231行）这段。如果是连续滑动，放开（223行到231行）注解
            this.interval = this.endX - this.startX;
            if (this.interval > 40) {
                this.startX = this.endX;
                this.prev();
            }
            if (this.interval < -40) {
                this.startX = this.endX;
                this.next();
            }
        },
        // 滑动
        end(event) {
// 如果是滑动，放开（236行到238行）的注解。如果是连续滑动，注解（236行到238行）
            // this.endY = event.changedTouches[0].clientY;
            // this.endX = event.changedTouches[0].clientX;
            // this.formatSwiper();
        },
        formatSwiper() {
            if (this.startX > this.endX) {
                console.log('左边滑动');
                if (this.startX > this.endX + 40) {
                    this.next();
                }
            } else {
                console.log('右边滑动');
                if (this.endX > this.startX + 40) {
                    this.prev();
                }
            }
        },
        // 阻止touchmove的横向默认事件（ios快捷操作会关闭页面）
        stopDefault(event) {
            let differenceY = this.endY - this.startY;
            let differenceX = this.endX - this.startX;
            if (Math.abs(differenceX) > Math.abs(differenceY)) {
                event.preventDefault();
            }
        },
        // 当前imgs在位置上的index（并非img数组的index）
        centerIndex(val) {
            if (val == 'prev') {
                for (let val of this.imgs) {
                    if (val.index == this.imgs.length - 1) {
                        val.index = 0;
                    } else {
                        val.index = val.index + 1;
                    }
                }
            } else {
                for (let val of this.imgs) {
                    if (val.index == 0) {
                        val.index = this.imgs.length - 1;
                    } else {
                        val.index = val.index - 1;
                    }
                }
            }
        },
        // 点击
        chooseItem(item, index) {
            let cycles = item.index;
            if (item.index < 3) {
                for (let i = 0; i < 3 - cycles; i++) {
                    console.log(item.index);
                    this.prev();
                }
            } else if (item.index > 3) {
                for (let i = -1; i < item.index - 3; i++) {
                    this.next();
                }
            } else if (item.index == 3) {
                console.log('投票');
            }
        },
        // 计算中间卡片信息
        centerCard() {
            this.centerInfo = this.imgs[this.currentIndex];
            this.$emit('centerInfo', this.centerInfo);
            // this.$emit('centerInfo', this.centerInfo);
            // console.log(this.imgs[2].id);
        },

        addCardStyle() {
            if (this.imgs.length > 7) {
                let addtime = this.imgs.length - 7;
                for (let i = 0; i < addtime; i++) {
                    console.log('add');
                    this.config5.push({
                        id: 'center',
                        position: 'absolute',
                        width: '45%',
                        height: '100%',
                        top: '0px',
                        left: '50%',
                        marginLeft: '-22.5%',
                        opacity: 0,
                        transition: '.1s'
                    });
                }
            }
        }
    },
    created() {
        this.getData();
        this.centerCard(); // 获取中间卡片信息
        this.addCardStyle();// 加入样式位置的index
    }
};
</script>

<style lang="less" scoped>
.swiper {
    width: 100%;
    border: 1px red solid;
    height: 400px;
    position: relative;
    overflow: hidden;
    div {
        opacity: 0;
    }
}
</style>

关键就在于config5这个对象中，作为动态的css效果，计算好各个卡片位置，然后:style动态获取样式
可以手动调节样式大小，位置。
当然如果需要展示3个卡片或者7个卡片的话，是需要再次计算各个卡片位置的。

作者：德日班勒
链接：https://www.jianshu.com/p/9170280de06c
来源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

【Vue】手写一个轮播图组件
weixin_44707049的博客
05-15 1460
先上效果图 完整代码 <script setup lang="ts"> import {ref, defineProps} from "vue"; // 定义组件属性 const props = defineProps({ list: { // 要轮播的图片的数组 type: Array as () => Array<Object>, required: true, default: () => { return [] }
vue手写一个卡片化层叠轮播 五张 三张
sumimg的博客
09-06 6091
项目需求，需要写一个卡片化层叠的轮播，找了下插件都没有合适的，于是写了一个展示5个卡片的轮播 先看效果图： 5个卡片要计算各自的高度，宽度，利用相对定位计算出各自的位置 然后transition过渡来实现动画效果 由于开头卡片和末尾卡片的滑动整体性，我在config5数组开头和末尾加了2个隐藏的样式。使得有个滑出屏幕的效果 下面是我的代码： <template> <div> <transition name="fade"> <div @touchend
vue实现的轮播图
12-03
vue实现的一个轮播图示例 创建vue实例，data里面存放轮播图的路径 此插件应用了一些vue的简单的事件绑定，列表循环以及显示隐藏 同时为了使图片轮播交互效果更好，还使用了过渡（vue官网有详细介绍） 可以在标签内设置 enter-active-class 和 leave-active-class来产生轮播平滑的效果 或者可以在css中设置：（设置的transition-group的name="image"）
vue使用Swiper插件实现卡片化轮播图
前端菜菜DayDayUp的博客
02-27 2658
vue使用Swiper插件实现卡片化轮播图
vue3实现轮播渲染多张图每张进行放大缩小拖拽功能互不影响
yzm521314的博客
06-18 248
注意：getUrl方法是vite处理静态资源图片的，由于是本地为了测试，你们拿例子的时候注意点可以去掉这个方法放你们本地路径渲染。
vue卡片轮播，
m0_74215758的博客
01-21 202
/ 如果是滑动，注解（223行到231行）这段。// 如果是滑动，放开（236行到238行）的注解。// 加入样式位置的index。centerInfo: '', // 当前中间信息。console.log('左边滑动');console.log('右边滑动');id: '士兵76 8',console.log('投票');id: '禅雅塔 11',id: '黑百合 12',id: '莱因哈特1',id: '死神 10',id: '卢西奥3',id: '莫伊拉5',id: '麦克雷7',
vue卡片轮播图
qq_43145310的博客
08-03 1656
vue 卡片轮播图
vue手写卡片模式轮播图，无缝切换，每个card设置间距
qq_39534956的博客
07-17 1780
vue轮播图卡片模式有间距无缝切换
轮播图的五种写法（原生、vue2、vue3、react类组件，react函数组件）
温暖前端的博客
02-10 2264
轮播图效果是一种在网页或应用程序中展示多张图片或内容的方式，通常以水平或垂直的方式循环播放。本文使用原生、vue2、vue3、react类组件，react函数组件五种写法实现了简单的轮播图效果，需要更多轮播效果需要再增加样式或者动画。淡入淡出效果：每张图片渐渐淡入显示，然后渐渐淡出消失，过渡效果平滑。（使用CSS的@keyframes和animation属性）创建一个@keyframes，定义两个关键帧，一个是初始状态，一个是结束状态，其中透明度从0到1，将该动画应用到需要淡入淡出的元素上，使用。
Vue实战篇二十七：实现走马灯效果的商品轮播图
我的博客
05-21 3346
我们有时候需要在有限空间内，循环播放同一类型的图片、文字等内容。比如首页轮播图片，商品信息循环播放等，这种效果统称为<kbd>走马灯</kbd>。
vue-awesome-swiper插件书写移动端基本的轮播图
柳宁依的博客
07-14 2240
安装：利用vue-cli这个工具创建一个vue项目，然后在项目中安装这个插件，详细方式可见官网，我用的是npm安装npm install vue-awesome-swiper --save引入这个插件：一般情况下可能多个页面要使用到轮播图，就全局引入这个插件，当然如果只需要局部用这个插件可以局部引用。我使用的是全局引用。在main.js文件中添加下面三句（即引入了这个轮播插件）：import Vu...
卡片式轮播图（XBanner）
10-10
卡片式轮播图
Vue3 动画_卡片循环滚动轮播效果
2301_76513773的博客
02-06 1540
1.从接口获取展示用的数据data后，算出每个被渲染出的卡片应有的。3.代表Y轴位移的数一旦触底/到顶后回归初始值。，每过一段时间，数组每个值加或减一定的偏移量；控制卡片组滚动,来完成动画效果。，保存到一个代表Y轴位移的数；即在不变换的情况下是。
vue2 中 使用Swiper多张卡片轮播图，解决vue-element固定三张卡片式。
weixin_58101575的博客
03-27 4950
vue实现多张卡片轮播图。
vue2 实现自定义卡片轮播图 swiper
suzhiwei_boke的博客
08-03 5671
1.npm i swiper@4 （注意swiper是有很多版本的，每个版本的兼容性都不一样，现在下载的话都默认是vue3的版本，所以vue2的话下载4版本就可以了）在vue2的版本下更新公司官网解决方案的轮播图效果，主要难点是在现有的element-ui无法实现ui设计的平滑卡片视图轮播效果。寻找实现方案：发现swiper插件满足现有需求，可定制化各种轮播图效果，有时间可以其原生的代码。2.在用到的组件中输入，然后就可以用了，具体代码可以看一下部分。...
vue手写轮播图
浮生的博客
11-05 869
代码如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Docu
手写vue轮播图
zhaohan___的博客
12-09 566
这是效果图，上边的vue是脚手架自动生成的 github地址 https://github.com/1142235090/vue-banner_template
vue2-手写轮播图
qq_45915072的博客
01-11 1122
轮播图5长展示，点击指示器向右移动一个图片，每隔2秒移动一张照片！
Vue实现轮播图
qq_64867440的博客
06-19 936
我实现的效果是自动轮播，三秒钟转换一次，故没有左右滑动，如果需要滑动效果需要自己添加相应的动作元素。
uniapp的UI组件有哪些
最新发布
06-28
<think>嗯，用户需要UniApp框架中可用的UI组件列表。用户明确要求的是"常用UI组件"，结合引用内容来看，用户可能正在开发跨平台应用，需要选择适合的UI框架提高开发效率。 用户提供的引用信息很关键。引用[1]提到UniApp组件由视图和逻辑构成，引用[2][3][4]则列举了多个流行UI框架。需要特别注意版本兼容性：用户可能用Vue2或Vue3，这会影响框架选择。比如引用[2]强调uView-UI仅支持Vue2，而uViewPlus支持Vue3。 从引用[3][4]看，组件库分为三类：官方内置组件（如view、scroll-view）、扩展组件库（如uni-ui）、第三方UI框架（如图鸟UI）。应该按这个逻辑组织回答，先基础后扩展。 用户可能关心实际应用场景，比如是否支持小程序或APP。引用[2][4]提到图鸟UI支持多端，这点值得强调。性能方面，引用[3]指出uni-ui经过官方优化，这对大型项目很重要。 需要提醒用户注意框架活跃度。引用[4]给出GitHub star数是个好指标，比如uViewPlus的362星虽然不多但较新。最后要给出选择建议：轻量选uni-ui，Vue2用uView，Vue3考虑uViewPlus或图鸟UI。 相关问题的设计要覆盖用户后续可能的需求：如何选择组件库、官方组件用法、定制化开发等。特别是引用[3]提到自定义组件开发，这可能是高级用户关心的点。</think>以下是 UniApp 框架中常用的 UI 组件分类及推荐组件库，结合官方能力和主流生态整理： ### 一、UniApp 内置基础组件 UniApp 直接封装了小程序规范的基础组件（如 `view`、`text`、`button`、`input`、`scroll-view` 等），可直接使用无需额外安装，满足基础开发需求[^1][^3]。 --- ### 二、官方扩展组件库：uni-ui > **特点**：由 DCloud 官方维护，与 UniApp 深度集成，**性能优化好**，支持多端兼容。 > **组件示例**： > - `uni-card`：卡片组件 > - `uni-icons`：图标库 > - `uni-table`：表格组件 > - `uni-swipe-action`：滑动操作 > - `uni-collapse`：折叠面板 > **适用场景**：需要官方支持、追求稳定性和跨平台一致性的项目[^3][^4]。 --- ### 三、热门第三方 UI 框架 #### 1. uView UI (Vue2 推荐) ★★★★☆ - **优势**：组件丰富（70+），社区活跃，文档完善 - **组件亮点**： `u-grid`（宫格）、`u-calendar`（日历）、`u-upload`（增强上传） - **局限**：**仅支持 Vue2** [官网链接](https://www.uviewui.com/) [^2][^4] #### 2. uView Plus (Vue3 推荐) ★★★★☆ - **定位**：uView 的 Vue3 升级版，适配 UniApp + Vue3 项目 - **特性**：TypeScript 支持，组合式 API [官网链接](https://uview-plus.jiangruyi.com/) [^4] #### 3. 图鸟 UI (TuniaoUI) ★★★★☆ - **优势**：提供 **100+ 组件及炫酷模板**，支持 APP/H5/小程序 - **特色组件**： `tn-form`（表单验证）、`tn-data-view`（数据可视化）、`tn-steps`（步骤条） - **适用**：需要快速搭建复杂界面的项目 [官网链接](https://vue3.tuniaokj.com/) [^2][^4] #### 4. First UI ★★★☆☆ - **特点**：轻量级，专注交互细节，提供暗黑模式 - **代表组件**： `f-notice-bar`（通告栏）、`f-swiper`（轮播图）、`f-signature`（手写板） - **场景**：中小型应用快速开发 [官网链接](https://doc.firstui.cn/) --- ### 四、选择建议 | 场景 | 推荐方案 | |---------------------|-------------------| | Vue2 项目 | uView UI | | Vue3 项目 | uView Plus/图鸟 UI| | 轻量需求/官方兼容性 | uni-ui | | 丰富模板/动效需求 | 图鸟 UI | > **注**：以上组件库均通过 `npm` 安装，例如安装 uni-ui： > ```bash > npm install @dcloudio/uni-ui > ``` --- ### 相关问题 1. **如何在 UniApp 项目中正确引入 uView UI 组件？** 2. **uni-ui 和第三方 UI 框架在性能上有哪些差异？** 3. **UniApp 开发中如何自定义符合业务需求的 UI 组件？** 4. **图鸟 UI 的模板功能如何提升开发效率？** 5. **Vue2 项目迁移到 Vue3 时，UI 组件库需要做哪些调整？** > 引用说明：组件分类依据 UniApp 官方文档[^1]，框架对比参考社区评测[^2][^4]，集成方案详见开发实践指南[^3]。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值