使用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 v-for='(v,i) in listData' :key='i' @touchstart.capture='touchStart' @touchend.capture='touchEnd'> <img src='http://www.b3g6.com/bcjs/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實戰教程》

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持好吧啦網。