小程式 scroll-view(橫向)scroll-into-view無效
阿新 • • 發佈:2018-12-11
最近使用研究微信小程式的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; }
不知道是使用方法的問題,還是坑。歡迎補充~