vue 实现导航栏宫格导航左右滚动效果 记录：
效果如下：
代码
html部分
<div id="maxDiv">
<div class="classilf_div" @scroll.passive="getScroll($event)" >
<ul ref="moveBox" v-drag >
<li v-for="(item1,index1)in categorieList" :key="index1" @click="go_beds('/beds_items',item1.name,item1._id)" >
<div class="border_box" > <img :src="item1.thumbnail_imageurl" alt="">
<div class="text_Box">{{item1.name}}
<div class="pageX">
<div class="pageX_box">
<div class="playBg" v-if="left_tiao">
<div class="playBg2" v-if="!left_tiao">
</template>
script部分
我这边用的是自定义指令 v-drag ，记得给移动的元素添加定位哦！
directives: {
drag:{
bind:function (el) {
let odiv =el; //获取目标元素
//算出鼠标相对元素的位置
odiv.onmousedown=(e)=>{
// console.log(odiv.pageX);
let disX = e.clientX - odiv.offsetLeft;
odiv.onmousemove = (e)=>{//鼠标按下并移动的事件
this.ddd=true
//用鼠标的位置减去鼠标相对元素的位置，得到元素的位置
let left = e.clientX - disX;
this.positionX =top;
//移动当前元素
odiv.style.left = left +'px';
};
odiv.onmouseup = (e) => {
document.onmousemove =null;
document.onmouseup =null;
let left = e.clientX - disX;
console.log(odiv.clientLeft);
};
}
}
}
},
获取左右滚动条的距离：注意html中的 @scroll.passive="getScroll($event)" 这是获取滚动条高度的方法
getScroll(event) {
// 滚动条距离左边的距离scrollBottom
let scrollBottom =
event.target.scrollWidth -
event.target.scrollLeft -
event.target.clientWidth;
// console.log(event, event.target.scrollWidth, event.target.scrollLeft, event.target.clientWidth)
if(scrollBottom<50){
this.left_tiao=false;
}else{
this.left_tiao=true;
}
// console.log(scrollBottom);
},
其实很简单，这样的话就可以实现左右滑动了，最简单的方法 ，下面的小黑条左右跟随移动我用两个div显示隐藏！
