1. 程式人生 > >小程式 scroll-view(橫向)scroll-into-view無效

小程式 scroll-view(橫向)scroll-into-view無效

最近使用研究微信小程式的scroll-view元件進行橫向佈局時,在onload時使用scroll-into-view進行定位,實際結果卻不是想要的。。以下兩種寫法對scroll-into-view定位都無效:

(1)在scroll-view標籤上直接繫結

<scroll-view class="bg-f power-user-wrap" scroll-x="true" scroll-into-view="date10">
  <view class="dis-ib ptb-10 txt-c power-user-date" wx:for="{{ymData}}"  wx:key="{{index}}" id="date{{index}}">
    <view class="fs-28">{{index}}</view>
  </view>
</scroll-view>
Page({
    data:{
        ymData:[0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16]
    }
})

css部分:
.power-user-wrap{
  width:100%;
  white-space: nowrap;
}
.power-user-date{
    display:inline-block;
    width:125rpx;
}

(2)在scroll-view標籤上繫結變數使用setData在onload時進行賦值:

​
<scroll-view class="bg-f power-user-wrap" scroll-x="true" scroll-into-view="{{toview}}">
  <view class="dis-ib ptb-10 txt-c power-user-date" wx:for="{{ymData}}"  wx:key="{{index}}" id="date{{index}}">
    <view class="fs-28">{{index}}</view>
  </view>
</scroll-view>
Page({
    data:{
        ymData:[0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16]
    },
    onLoad:function(){
        var me = this;
        me.setData({
            toview:"date10"
        })
    }
})

css部分:
.power-user-wrap{
  width:100%;
  white-space: nowrap;
}
.power-user-date{
    display:inline-block;
    width:125rpx;
}

​

 

在官網沒有找到相應的說明。通過在網上查詢資料,發現scroll-into-view的值需要的動態的改變才能觸發。示例:

​
​
<scroll-view class="bg-f power-user-wrap" scroll-x="true" scroll-into-view="{{toview}}">
  <view class="dis-ib ptb-10 txt-c power-user-date" wx:for="{{ymData}}"  wx:key="{{index}}" id="date{{index}}">
    <view class="fs-28">{{index}}</view>
  </view>
</scroll-view>
Page({
    data:{
        ymData:[0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16]
    },
    onLoad:function(){
        
    },
    onReady:function(){
        var me = this;
        me.setData({
            toview:"date10"
        })
    }

})

css部分:
.power-user-wrap{
  width:100%;
  white-space: nowrap;
}
.power-user-date{
    display:inline-block;
    width:125rpx;
}

​

​

不知道是使用方法的問題,還是坑。歡迎補充~