vue 橫向滾動樣式&&$ref.scrollLeft初始化數據滾動位置

 

 

 

一、先說一下橫向滾動樣式：

<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';
        });