小程序 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;
}

​

​

不知道是使用方法的问题,还是坑。欢迎补充~

猜你喜欢

转载自blog.csdn.net/nana525484608/article/details/81168876