最近使用研究微信小程序的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;
}
不知道是使用方法的问题,还是坑。欢迎补充~