本篇内容主要讲解“vue+rem自定义轮播图效果实现”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“vue+rem自定义轮播图效果实现”吧!
使用vue+rem自定义轮播图的实现，供大家参考，具体内容如下
单位使用rem进行页面布局，在动态计算轮播图整体宽度时，需要把px转换成rem，挺麻烦的。
效果如下：如果当前图片不是第一张和最后一张，刚好可以看到当前图片上一张和下一张的一部分。
具体代码如下
<template>
<div class="constructionUp">
<div class="pub-hd">
<h3>施工升级包</h3>
<h4>额外服务项目</h4>
</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;
h3{
font-size: 0.32rem;
color: #606771;
}
h4{
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+rem自定义轮播图效果实现”有了更深的了解，不妨来实际操作一番吧！这里是亿速云网站，更多相关内容可以进入相关频道进行查询，关注我们，继续学习！
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
