vue列表左右箭头滑动 vue+typescript实现左右箭头翻页，类似轮播图效果

最新推荐文章于 2023-04-23 10:14:31 发布

迷路时你就往前走i

最新推荐文章于 2023-04-23 10:14:31 发布

阅读量3.4k

点赞数 6

分类专栏： Vue 文章标签： vue.js typescript

本文链接：https://blog.csdn.net/weixin_45803033/article/details/117594036

版权

本文介绍了如何使用Vue.js和TypeScript创建一个类似轮播图效果的左右箭头翻页功能。通过HTML、CSS和TypeScript代码示例，展示了如何自定义内容并实现切换效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

今天的内容是在工作终于到的问题，先上图吧：
在这里插入图片描述
这个是iview-design官网的tabs切换里面的内容，红色圈住的部分就是今天的内容，左右箭头可以切换，内容可以自定义。

html代码：

<div class="content-item">
    		<!-- 左箭头 -->
            <a href="javascript:;" v-if="qulityList.length>4" class="prev" @click="translateLeft">
                <i class="el-icon-arrow-left"></i>
            </a>
    		<!-- 中间部分的内容 -->
            <div class="content-item-box" id="amount">
                <div class="content-item-nav" :style="{transform: 'translateX(calc(('+amountWidth+' + 15px) * '+num+'))'}">
                    <!-- 这一部分的内容自己可以根据自己的需要自定义 -->
                    <div
                        class="amount"
                        v-for="(item, index) in qulityList"
                        :key="index"
                        @click="getDetail(item)"

最低0.47元/天解锁文章