vue+rem自定义轮播图效果
更新时间:2021年6月29日 10:00 点击:2992
使用vue+rem自定义轮播图的实现,供大家参考,具体内容如下
单位使用rem进行页面布局,在动态计算轮播图整体宽度时,需要把px转换成rem,挺麻烦的。
效果如下:如果当前图片不是第一张和最后一张,刚好可以看到当前图片上一张和下一张的一部分。
具体代码如下
<template> <div class="constructionUp"> <div class="pub-hd"> <h2>施工升级包</h2> <h3>额外服务项目</h3> </div> <div id="activityDiv"> <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"> <div class="liText"> <p class="liTtitle">{{v.lititle}}</p> <p class="liDes">1、开工后,客户、设计师、项目管家三方进行现场交底,若有个性化项目变更,执行正常的客户变更手续(参照:客户变更告知书);</p> <p class="liDes">2、交底后,若客户原因要求个性化项目变更,除了承担个性化项目的费用外,还要增/次的调拨费用。</p> <p class="liPrice"> <span class="title1">主题包价格:¥</span> <span class="title2">4500</span> <span class="title3">元</span> </p> </div> </li> </ul> <div class="pointerDiv"> <span :class="[currantIndex ===0 ? 'active' : '', 'pointer']"></span> <span :class="[currantIndex ===1 ? 'active' : '', 'pointer']"></span> <span :class="[currantIndex ===2 ? 'active' : '', 'pointer']"></span> </div> </div> </div> </template> <script> export default { data () { return { listData: [{lititle: '旧房改造'}, {lititle: '旧房改造2'}, {lititle: '旧房改造3'}], liWidth: 0, liNum: 0, startX: 0, endX: 0, currantIndex: 0, test: false } }, mounted () { this.initUlWidth() }, methods: { initUlWidth () { // 初始化 ul的宽度 let pit = document.documentElement.clientWidth / 750 // 当前手机屏幕和750屏幕的比例 let oldWidth = document.getElementsByClassName('activityLi')[0].offsetWidth // 单个li的宽度 let marginR = getComputedStyle(document.getElementsByClassName('activityLi')[0], null)['marginRight'] // 获取单个的marginRight,带px let marginNum = parseInt(marginR.replace('px', '')) this.liWidth = oldWidth + marginNum // 单个宽度+maringRight let liCount = parseInt(document.getElementsByClassName('activityLi').length)// li的个数 this.liNum = liCount let ULpx = oldWidth * liCount + (liCount - 1) * marginNum // 最后一个margin不算 document.getElementById('activityUl').style.width = ULpx / pit + 'px'// 除以比率,让当前div宽度与2倍设计比例一样,设置ul的长度最后那个margin不算 }, touchStart (e) { // 记录初始位置 e.preventDefault() // 阻止默认事件,滚动等 this.startX = e.touches[0].clientX // 记录滑动开始的位置 }, touchEnd (e) { e.preventDefault() // 阻止默认事件 // 记录结束位置 this.endX = e.changedTouches[0].clientX // 左滑 if (this.startX - this.endX > 30) { console.log('左滑') if (this.currantIndex >= this.liNum - 1) { // 不做操作 } else { this.currantIndex++ document.getElementById('activityUl').style.left = -this.currantIndex * this.liWidth + 'px' } } // 右滑 if (this.startX - this.endX < -30) { if (this.currantIndex === 0) { // 不做操作 } else { this.currantIndex-- document.getElementById('activityUl').style.left = -this.currantIndex * this.liWidth + 'px' } } this.startX = 0 this.endX = 0 } } } </script> <style lang="less" scoped> @import "~less/base.less"; .constructionUp{ width: 100%; .pub-hd{ padding: 0.8rem 0 0.6rem 0; text-align: center; background-color: #ffffff; h2{ font-size: 0.32rem; color: #606771; } h3{ margin-top: 0.26rem; font-size: 0.24rem; color: #b9bec4; } } #activityDiv{ padding-left: 0.4rem; background-color: #ffffff; overflow: hidden; #activityUl{ position: relative; left: 0; height: 8.06rem; transition:all .35s ease-in-out; background-color: #ffffff; .activityLi{ float: left; width: 6.7rem; height: 8.06rem; &:not(:last-child){ margin-right: 0.3rem; } box-shadow: 0 5px 25px 0 rgba(0,0,0,.4); img{ width: 100%; height: 3.6rem; } .liText{ padding: 0 0.4rem; text-align: left; .liTtitle{ padding: 0.48rem 0 0.36rem 0; font-size: 0.34rem; color: #000000; } .liDes{ font-size: 0.2rem; color:#b5b5b5; } } .liPrice{ height: 0.28rem; line-height: 0.28rem; color: @c-main; //颜色换一下就好 vertical-align: bottom; margin-top: 0.8rem; .title1{ display: inline-block; font-size: 0.22rem; } .title2{ display: inline-block; font-size: 0.35rem; } .title3{ display: inline-block; font-size: 0.22rem; } } } } .pointerDiv{ width: 100%; height: 1.54rem; background-color: #ffffff; display: flex; align-items: center; justify-content: center; .pointer{ display: inline-block; width: 0.16rem; height: 0.16rem; background-color: #cccccc; border-radius: 100%; &:nth-child(2){ margin:0 0.4rem; } &.active{ background-color: @c-main; } } } } } </style>
关于vue.js组件的教程,请大家点击专题vue.js组件学习教程进行学习。
更多vue学习教程请阅读专题《vue实战教程》
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持猪先飞。
下一篇: Vue 大文件上传和断点续传的实现
相关文章
- 这篇文章主要介绍了Vue基于localStorage存储信息代码实例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下...2020-11-16
- 这篇文章主要介绍了vue中activated的用法,帮助大家更好的理解和使用vue框架,感兴趣的朋友可以了解下...2021-01-03
- 这篇文章主要介绍了vue 监听 Treeselect 选择项的改变操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-09-01
基于vue-simple-uploader封装文件分片上传、秒传及断点续传的全局上传插件功能
这篇文章主要介绍了基于vue-simple-uploader封装文件分片上传、秒传及断点续传的全局上传插件,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下...2021-02-23Antd-vue Table组件添加Click事件,实现点击某行数据教程
这篇文章主要介绍了Antd-vue Table组件添加Click事件,实现点击某行数据教程,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-11-17- 这篇文章主要介绍了vue 实现动态路由的方法,文中示例代码非常详细,帮助大家更好的理解和学习,感兴趣的朋友可以了解下...2020-07-06
- 这篇文章主要介绍了vue treeselect获取当前选中项的label实例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-09-01
- 这篇文章主要介绍了Vue组件跨层级获取组件操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-07-28
- 这篇文章主要介绍了vue 获取到数据但却渲染不到页面上的解决方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2020-11-19
- 这篇文章主要给大家介绍了关于Vue中slot-scope的深入理解,这个教程非常适合初学者,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2021-04-17
vuejs element table 表格添加行,修改,单独删除行,批量删除行操作
这篇文章主要介绍了vuejs element table 表格添加行,修改,单独删除行,批量删除行操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-07-18antdesign-vue结合sortablejs实现两个table相互拖拽排序功能
这篇文章主要介绍了antdesign-vue结合sortablejs实现两个table相互拖拽排序功能,本文通过实例图文相结合给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下...2021-01-09- 这篇文章主要介绍了vue+高德地图实现地图搜索及点击定位操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-09-09
Vue 列表页带参数进详情页的操作(router-link)
这篇文章主要介绍了Vue 列表页带参数进详情页的操作(router-link),具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-11-13- 这篇文章主要介绍了Vue 3.0 中 jsx 语法使用,帮助大家更好的理解和使用vue框架,感兴趣的朋友可以了解下...2020-11-13
- 距离 Vue 3.0 正式版发布已经有一段时间了,关于vue3组件库相关的问题还是挺多人感兴趣的,这篇文章主要给大家介绍了关于vue3如何按需加载第三方组件库的相关资料,需要的朋友可以参考下...2021-06-02
- 这篇文章主要介绍了vue cli4.0项目引入typescript的方法,本文通过示例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下...2020-07-17
- 这篇文章主要为大家详细介绍了vue实现同时设置多个倒计时,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2021-05-20
vue项目页面嵌入代码块vue-prism-editor的实现
这篇文章主要介绍了vue项目页面嵌入代码块vue-prism-editor的实现,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下...2020-10-30- 这篇文章主要给大家介绍了关于vue中jsonp插件的使用方法示例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2020-09-10