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显示隐藏！

看完就点个赞把！！谢谢