vue 盒子水平滚动（滚轮事件+轮播）

最新推荐文章于 2024-01-26 15:57:25 发布

天青色！

最新推荐文章于 2024-01-26 15:57:25 发布

阅读量595

点赞数

文章标签： vue.js elementui javascript

本文链接：https://blog.csdn.net/weixin_49692963/article/details/125912779

版权

html:

<div class="Ptitle">
                    <div class="item-Total">
                        <el-button type="primary" icon="el-icon-arrow-left" @click="ldLeftChange"></el-button>
                        <div class="lb-box" id="ksBox" @mousewheel="ONMouseWheel($event)">
                            <div class="box3" id="lbBox" :style="'left:'+lbBox.left+'px'" ref="outsideWrap" >
                                <div :class="ldActive == i.id ? 'item-ld img' : 'item-ld'" v-for="i in ldList" :key="i.id"  @click="changeLd(i.id)">
                                    <el-tooltip class="item" effect="dark" :content="i.wzbm" placement="top-start">
                                        <div>{{ i.wzmc}}{{i.wzbm}}</div>
                                    </el-tooltip>
                                </div>
                            </div>
                        </div>
                        <el-button type="primary" @click="ldRightChange"><i class="el-icon-arrow-right el-icon--right"></i></el-button>
                    </div>
                </div>

css:

.Ptitle{
   height: 0.56rem;
   margin-bottom: .2rem;
   background: rgba(0,149,255,0.20);
   display: flex;
   justify-content: space-between;
   align-items: center;
}
.item-Total{
   width: 100%;
   height: 0.56rem;
   display: flex;
}
.lb-box {
    flex: 1;
    overflow: hidden;
    position: relative;
}
.box3 {
    position: absolute;
    top: 0;
    left: 0;
    padding: 0 .2rem;
    display: flex;
}
.item-ld{
    cursor: pointer;
    display: block;
    /* width: 1rem; */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding:0 0.17rem;
    height: 100%;
    line-height: 0.56rem;
    font-size: .18rem;
    font-family: Microsoft YaHei, Microsoft YaHei-Regular;
    font-weight: 400;
    color: #fff;
    margin-right: .3rem;
    box-sizing: border-box;
}

js:

// 上一页
        ldLeftChange(){
            if(this.lbBox.page == 1){
                return;
            }
            if(this.lbBox.pageNow<=1){
                console.log('没有上一页了')
                this.lbBox.left = 0;
                return;
            }else {
                this.lbBox.pageNow--;
                this.lbBox.left = this.lbBox.left + this.lbBox.domWidth;
            }
        },
        // 下一页
        ldRightChange(){
            if(this.lbBox.page == 1){
                return;
            }
            if((0-this.lbBox.left) >= this.lbBox.lbWidth -this.lbBox.domWidth){
                console.log('没有下一页了')
                return;
            }else {
                this.lbBox.pageNow++;
                if(this.lbBox.pageNow >= this.lbBox.page){
                    // 最后一页
                    this.lbBox.left = 0-(this.lbBox.lbWidth - this.lbBox.domWidth);
                }else {
                    this.lbBox.left = this.lbBox.left - this.lbBox.domWidth;
                }
            }
        },
        // 事件
        ONMouseWheel (e) {
            // wheelDelta的值为正（120.240...）则是鼠标向上；为负（-120，-240）则是向下。 
            // 因为要兼容浏览器，所以才写成 -e.wheelDelta || -e.deltaY.部分浏览器这个e.wheelDeltaY值是没有的可能是null，部分浏览器e.deltaY这个值是没有的可能是null，
            // console.log(e.wheelDelta,e.deltaY);//下 -120 100 上 120 -100
            if(this.lbBox.page == 1){
                return;
            }
            let maxLeft = (this.lbBox.lbWidth - this.lbBox.domWidth);
            if((0-this.lbBox.left +  (e.wheelDelta/2)) >= maxLeft && e.wheelDelta < 0){
                console.log('最大left')
                return;
            }
            if(this.lbBox.left +  (e.wheelDelta/2) >= 0 && e.wheelDelta > 0){
                this.lbBox.left = 0;
                console.log('最小left')
                return
            }
            this.lbBox.left = this.lbBox.left +  (e.wheelDelta/2);
            this.lbBox.pageNow = parseInt((0-this.lbBox.left)/this.lbBox.domWidth)+1;
        },