好久都沒更新過了岸军，大概有一年時間沒寫過了踱蠢，這一年實在是太松懈了，遇到點新的東西就想寫下來，但是都是沒什么時間臀玄，等有時間了就忘記了...可能這一年留給生活的時間更多一點叭
大概是上個月内斯，遇上了個點擊左右滾動這么一個小交互匆笤，本人對于動態(tài)交互這些東西一直都不怎么擅長纷跛，不然也不至于一個左右點擊滾動也要記下來，當(dāng)然本次記錄也是想給大家提供個參考惋戏。寫的時候百度了挺多的领追，但是都挺復(fù)雜的，本人沒啥耐心响逢，第一眼看著復(fù)雜的基本上就不會往下看了绒窑，so，干脆自己寫一套吧舔亭，本人感覺本人的這個思路些膨，算得上是很簡單的了！钦铺！
-
首先呢订雾，先寫好樣式，左右滾動矛洞，肯定就是橫向的了
分配一下每個元素的角色
element.png
html
<div id="click-scroll-X">
<span class="left_btn" @click="leftSlide">《</span>
<div class="scroll_wrapper" ref="wrapperCon">
<div class="scroll_list">
<div class="item" v-for="(i, idx) in 10" :key="idx">
我是子元素{{ idx }}
</div>
</div>
</div>
<div class="right_btn" @click="rightSlide">》</div>
</div>
css
#click-scroll-X {
display: flex;
align-items: center;
.left_btn,.right_btn {
font-size: 30px;
cursor: pointer;
}
.scroll_wrapper {
width: 600px;
overflow-x: scroll;
padding: 20px 0;
.scroll_list{
display: flex;
align-items: center;
justify-content: space-between;
.item {
width: 100px;
height: 100px;
display: flex;
align-items: center;
justify-content: center;
border: 1px solid red;
box-sizing: border-box;
flex-shrink: 0;
}
}
}
- 接下來了解一下需要用到的屬性
1.scrollLeft：元素左側(cè)已滾動的距離洼哎，即位于元素左邊界與元素中當(dāng)前可見內(nèi)容的最左端之間的距離
2.scrollWidth:元素的整體寬度，包括由于溢出而無法展示在網(wǎng)頁的不可見部分
3.clientWidth:元素的可視寬度
data(){
return{
// 定時器（方便清除）
timer:null
}
}
- 向左滾動
leftSlide(){
// 保存滾動盒子左側(cè)已滾動的距離
let left=this.$refs.wrapperCon.scrollLeft
let num=0
clearInterval(this.timer)
this.timer=null
this.timer=setInterval(()=>{
// !left:已經(jīng)滾動到最左側(cè)
// 一次性滾動距離（可調(diào)節(jié)）
if(!left||num>=300){
// 停止?jié)L動
clearInterval(this.timer)
this.timer=null
return
}
// 給滾動盒子元素賦值向左滾動距離
this.$refs.wrapperCon.scrollLeft=left-=30
// 保存向左滾動距離（方便判斷一次性滾動多少距離）
num+=30
},20)
// 20：速度（可調(diào)節(jié)）
},
- 向右滾動
rightSlide(){
// 保存滾動盒子左側(cè)已滾動的距離
let left=this.$refs.wrapperCon.scrollLeft
// 保存元素的整體寬度
let scrollWidth=this.$refs.wrapperCon.scrollWidth
// 保存元素的可見寬度
let clientWidth=this.$refs.wrapperCon.clientWidth
let num=0
clearInterval(this.timer)
this.timer=setInterval(()=>{
// 已經(jīng)滾動距離+可見寬度
// left+clientWidth>=scrollWidth：滾動到最右側(cè)
// num>=300一次性滾動距離
if(left+clientWidth>=scrollWidth||num>=300){
clearInterval(this.timer)
return
}
// 給滾動盒子元素賦值向左滾動距離
this.$refs.wrapperCon.scrollLeft=left+=30
// 保存向左滾動距離（方便判斷一次性滾動多少距離）
num+=30
},20)
// 20：速度（可調(diào)節(jié)）
}
這就完成了沼本，簡簡單單啊朋友們Ｘ汀！３檎住识补！
?? 比心??
