目錄
1.實現效果
2.基礎代碼演示
2.1js代碼
2.1css樣式
2.3實現效果
3.實現點擊切換
3.2效果圖如下
3.3發現問題
3.3.1不循環
3.3.2循環
1.實現效果
2.基礎代碼演示
2.1js代碼
<div class="out-box"><div class="test-swiper"><div class="swiper-box"><div class="swiper-item" v-for="(item,index) in 7" :key="index"><img src="" alt=""><p>學習+積累</p></div></div></div><button class="button-one one">上一張</button><button class="button-one two">下一張</button></div>2.1css樣式
.out-box{position: relative;width: 100%;.test-swiper{background-color: #d3d8e2;width: 1200px;margin:0 auto;height: 500px;position: relative;overflow: hidden;.swiper-box{position: absolute;display: flex;.swiper-item{width: 400px;height: 400px;background-color: #B7CBEA;margin:50px 100px;}}}.button-one{background-color: rgb(174, 165, 166);position: absolute;top: 50%;width: 50px;height: 50px;border-radius: 100%;}.one{left: 430px;}.two{right:430px;}
}2.3實現效果
3.實現點擊切換
3.1給button添加事件,transform和切換效果
<div class="out-box"><div class="test-swiper"><div class="swiper-box" :style="{transform:`translateX(${translateXtest}px)`,transition: 'transform 0.5s ease-in-out' }"><div class="swiper-item" v-for="(item,index) in testList" :key="index"><img src="" alt=""><p>學習+積累</p></div></div></div><button class="button-one one" @click="onPre">上一張</button><button class="button-one two" @click="onNext">下一張</button>
</div>export defatult{data(){return{ testList:[{},{},{},{}]testIndex:0}}
}computed: {translateXtest(){// 計算需要移動的距離return -this.testIndex * (400 + 200);},
}onPre(){if(this.testIndex>0){ this.testIndex--}
},
onNext(){if(this.testIndex<this.testList.length-1){ this.testIndex++}
}3.2效果圖如下
3.3發現問題
發現數組長度只有3,當觸發最后一次onNext操作時候,出現空白,如何解決
3.3.1不循環
一次顯示2張圖片,添加條件testIndex<testList.length-2
onNext(){
? ? ? if(this.testIndex<this.testList.length-2){this.testIndex++}
? ? }
3.3.2循環
可以當到最后顯示testList最后一個數據時,讓數組拼接
onNext(){this.testIndex++if(this.testIndex>this.testList.length){this.testList=this.testList.concat(this.testList)}
}4.完整代碼
<div class="out-box"><div class="test-swiper"><div class="swiper-box" :style="{ transform:`translateX(${translateXtest}px)`,transition: 'transform 0.5s ease-in-out' }"><div class="swiper-item" v-for="(item,index) in testList" :key="index"><img src="" alt=""><p>學習+積累{{ index }}</p></div></div></div><button class="button-one one" @click="onPrev">上一張</button><button class="button-one two" @click="onNext">下一張</button>
</div>export defatult{data(){return{ testList:[{},{},{},{}]testIndex:0}}
}computed: {translateXtest(){// 計算需要移動的距離return -this.testIndex * (400 + 200);},
}onPre(){if(this.testIndex>0){ this.testIndex--}
},
onNext(){if(this.testIndex<this.testList.length-2){this.testIndex++}
}.out-box{position: relative;width: 100%;.test-swiper{background-color: #d3d8e2;width: 1200px;margin:0 auto;height: 500px;position: relative;overflow: hidden;.swiper-box{position: absolute;display: flex;.swiper-item{width: 400px;height: 400px;background-color: #B7CBEA;margin:50px 100px;}}}.button-one{background-color: rgb(174, 165, 166);position: absolute;top: 50%;width: 50px;height: 50px;border-radius: 100%;}.one{left: 430px;}.two{right:430px;}
}如果有好的循環方式,歡迎留言
)
