您的位置:首页 > 编程学习 > > 正文

vue组件轮播(vue+rem自定义轮播图效果)

更多 时间:2021-10-22 07:27:34 类别:编程学习 浏览量:2968

vue组件轮播

vue+rem自定义轮播图效果

使用vue+rem自定义轮播图的实现,供大家参考,具体内容如下

单位使用rem进行页面布局,在动态计算轮播图整体宽度时,需要把px转换成rem,挺麻烦的。

效果如下:如果当前图片不是第一张和最后一张,刚好可以看到当前图片上一张和下一张的一部分。

vue组件轮播(vue+rem自定义轮播图效果)

具体代码如下

  • <template>
        <li class="constructionUp">
            <li class="pub-hd">
                <h2>施工升级包</h2>
                <h3>额外服务项目</h3>
            </li>
            <li id="activityli">
                <ul num="0" id="activityUl">
                   <li class="activityLi" v-for="(v,i) in listData" :key="i" @touchstart.capture="touchStart" @touchend.capture="touchEnd">
                        <img src="static/imgs/package/bitmap.jpg" alt="vue组件轮播(vue+rem自定义轮播图效果)" border="0" />
    
  • 关于vue.js组件的教程,请大家点击专题vue.js组件学习教程进行学习。

    更多vue学习教程请阅读专题《vue实战教程》

    以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持开心学习网。

    标签:vue rem 轮播图
    您可能感兴趣