scroll-into-view 在什么时候动态加载进去参数才滚动指定的id位置
发布于 5 年前 作者 litan 20317 次浏览 来自 问答

反馈一个 Bug 还是 提一个需求?

一个 Bug

如果是 Bug:

* Bug 表现是什么?预期表现是什么?

进入页面时,scroll-view没有滚动到指定的id位置。

预期在页面打开后,scroll-view滚动到指定的s5位置。

* 如何复现?

* 提供一个最简复现 Demo

复现代码:

wxml里的代码:

<scroll-view class=“scroll-view_H” scroll-x  scroll-into-view=“s5” style=“width: 100%”>

<view wx:for="{{list}}" id="{{item.id}}" class=“scroll-view-item_H {{item.bc}}”>{{item.id}}</view>

</scroll-view>

wxjs代码(只在初始化的时候模拟加载数据,设置参数,其他的和新建页面JS代码一样)

onLoad: function (options) {

var list = [

{

bc: “bc_green”,

id: “s1”,

},

{

bc: “bc_red”,

id: “s2”,

},

{

bc: “bc_yellow”,

id: “s3”,

},

{

bc: “bc_blue”,

id: “s4”,

},

{

bc: “ba_other”,

id: “s5”,

}, {

bc: “bc_green”,

id: “s6”,

},

{

bc: “bc_red”,

id: “s7”,

},

{

bc: “bc_yellow”,

id: “s8”,

},

{

bc: “bc_blue”,

id: “s9”,

},

{

bc: “ba_other”,

id: “s10”,

},

];

this.setData({

list: list,

});

},

wxss中的代码:

.scroll-view_H {

white-space: nowrap;

margin-top:10px;

}

.scroll-view-item_H {

width: 25%;

height: 40px;

line-height: 40px;

display: inline-block;

text-align: center;

}

.bc_green {

background-color: green;

}

.bc_red {

background-color: red;

}

.bc_yellow {

background-color: yellow;

}

.bc_blue {

background-color: blue;

}

.ba_other {

background-color: #37bc9f;

}

当data中存在列表参数时scroll-into-view才会跳转过去,但是数据不可能是写死的,都是动态获取的,给列表什么时候赋值scroll-into-view才会滚动到id的位置?

data: {

list:[

{

bc: “bc_green”,

id: “s1”,

},

{

bc: “bc_red”,

id: “s2”,

},

{

bc: “bc_yellow”,

id: “s3”,

},

{

bc: “bc_blue”,

id: “s4”,

},

{

bc: “ba_other”,

id: “s5”,

}, {

bc: “bc_green”,

id: “s6”,

},

{

bc: “bc_red”,

id: “s7”,

},

{

bc: “bc_yellow”,

id: “s8”,

},

{

bc: “bc_blue”,

id: “s9”,

},

{

bc: “ba_other”,

id: “s10”,

},

],

},

2 回复

想知道现在找到解决方案了吗?我也遇到这个问题,想在进入页面的时候,自动滚动到指定的位置

我也遇到这样,设置 scroll-left 才可以

回到顶部