好久都没更新过了，大概有一年时间没写过了，这一年实在是太松懈了，遇到点新的东西就想写下来，但是都是没什么时间，等有时间了就忘记了...可能这一年留给生活的时间更多一点叭
大概是上个月，遇上了个点击左右滚动这么一个小交互，本人对于动态交互这些东西一直都不怎么擅长，不然也不至于一个左右点击滚动也要记下来，当然本次记录也是想给大家提供个参考。写的时候百度了挺多的，但是都挺复杂的，本人没啥耐心，第一眼看着复杂的基本上就不会往下看了，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：元素左侧已滚动的距离，即位于元素左边界与元素中当前可见内容的最左端之间的距离
2.scrollWidth:元素的整体宽度，包括由于溢出而无法展示在网页的不可见部分
3.clientWidth:元素的可视宽度
data(){
return{
// 定时器（方便清除）
timer:null
}
}
- 向左滚动
leftSlide(){
// 保存滚动盒子左侧已滚动的距离
let left=this.$refs.wrapperCon.scrollLeft
let num=0
clearInterval(this.timer)
this.timer=null
this.timer=setInterval(()=>{
// !left:已经滚动到最左侧
// 一次性滚动距离（可调节）
if(!left||num>=300){
// 停止滚动
clearInterval(this.timer)
this.timer=null
return
}
// 给滚动盒子元素赋值向左滚动距离
this.$refs.wrapperCon.scrollLeft=left-=30
// 保存向左滚动距离（方便判断一次性滚动多少距离）
num+=30
},20)
// 20：速度（可调节）
},
- 向右滚动
rightSlide(){
// 保存滚动盒子左侧已滚动的距离
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(()=>{
// 已经滚动距离+可见宽度
// left+clientWidth>=scrollWidth：滚动到最右侧
// num>=300一次性滚动距离
if(left+clientWidth>=scrollWidth||num>=300){
clearInterval(this.timer)
return
}
// 给滚动盒子元素赋值向左滚动距离
this.$refs.wrapperCon.scrollLeft=left+=30
// 保存向左滚动距离（方便判断一次性滚动多少距离）
num+=30
},20)
// 20：速度（可调节）
}
这就完成了，简简单单啊朋友们！！！！
♥♥ 比心♥♥
