时间戳

首页 > 技术文章 > vue 横向滚动样式&&$ref.scrollLeft初始化数据滚动位置

vue 横向滚动样式&&$ref.scrollLeft初始化数据滚动位置

liAnran 2019-12-19 20:20 原文

 

 

 

一、先说一下横向滚动样式：

<div class="everyone-wrap" ref="parent">
    <div class="everyone-cont">
       <dl v-for="(item, index) in shareData.top" :key="index">
            <dt>
               <van-image :src="item.pic">
                 <template v-slot:loading>                                //vant中loading图
                     <van-loading type="spinner" size="20" />
                 </template>
                 <template v-slot:error>
                     <img src="../../assets/img/wait-voice.png" alt />    //vant中error图
                 </template>
              </van-image>
           </dt>
           <dd>
                <p class="dd_title">标题{{ index }}</p>
                <p class="dd_text">这里是描述呀这里是描述呀这里是描述呀这里是描述呀这里是描述呀这里是描述呀这里是描述呀这里是描述呀</p>
           </dd>
        </dl>
    </div>
 </div>

 

 

css代码:
.everyone-wrap {
     width: 100%;
     overflow-x: scroll;
    .everyone-cont {
            display: -webkit-flex;
            display: -ms-flexbox;
            display: flex;
            float: left; // 使其脱离文档流 宽度为所有字元素的和
            min-width: 100%;
            padding-bottom: 20px;
            dl {
                 width: 180px;
                 margin: 0 34px 0 0;
                 float: left;
            }
    }
}

二、再说一下解决进来页面就让滚动条滚动：

 刚开始我是做的

    mounted() {
           this.$nextTick(() => {
                this.$refs.parent.scrollLeft = '500';
            });
    },

然鹅，并没有卵用。查阅文档感觉应该是以下原因：

mounted 不会承诺所有的子组件也都一起被挂载。
如果你希望等到整个视图都渲染完毕，可以用 vm.$nextTick 替换掉 mounted。

$nextTick  将回调延迟到下次 DOM 更新循环之后执行。
在修改数据之后立即使用它，然后等待 DOM 更新。
它跟全局方法 Vue.nextTick 一样，不同的是回调的 this 自动绑定到调用它的实例上。

最后说下解决方法：

1.获取完数据之后  $nextTick中   this.$refs.parent.scrollLeft = '500';

2.updated: function() {
        this.$nextTick(function() {
            this.$refs.parent.scrollLeft = '500';
        });
    }

3.mounted中setTimeout(() => {
            this.$refs.parent.scrollLeft = '500';
        }, 100);
4.在获取完数据之后：（感觉这才是$nextTick的正确打开方式）
this.$nextTick(function() {
            this.$refs.parent.scrollLeft = '500';
        });
 

推荐阅读