收藏
回答

scroll-into-view 在什么时候动态加载进去参数才滚动指定的id位置

问题模块 框架类型 问题类型 API/组件名称 终端类型 操作系统 微信版本 基础库版本
API和组件 小程序 Bug scroll-view 客户端 6.6.2 1.9.1



反馈一个 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",

},

],

},



最后一次编辑于  2018-05-16
回答关注问题邀请回答
收藏

2 个回答

  • 燕燕
    燕燕
    2018-05-16

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

    2018-05-16
    赞同
    回复 5
    • 木易氵寿👏
      木易氵寿👏
      2018-05-16
      没有找到解决方案,但是好物好买的小程序,分类可以跳转,有跳转动画。
      2018-05-16
      回复
    • 燕燕
      燕燕
      2018-05-16回复木易氵寿👏
      我后来研究了下,发现确实是数据的渲染问题,应该在每次设置data数据的同时去设置scroll-into-view的值,这样就可以实现了
      2018-05-16
      1
      回复
    • 木易氵寿👏
      木易氵寿👏
      2018-05-16回复燕燕
      是的,用scroll-into-view做锚点动态加载数据是不会渲染的,刚才我试了一下,用scroll-left,也动态绑定一个参数,比如我们要页面加载完毕就跳到第5个,距离左边的距离应该就是屏幕的宽度÷4*5的距离,然后赋值给scroll-left,就可以实现了。
      2018-05-16
      2
      回复
    • 木易氵寿👏
      木易氵寿👏
      2018-05-16回复燕燕
      确实可以实现,我案例代码给的scroll-into-view的值是一开始是写死了(傻了),动态给scroll-into-view赋值,scroll-into-view做锚点也可以实现。
      2018-05-16
      2
      回复
    • 燕燕
      燕燕
      2018-05-16回复木易氵寿👏
      是的 只要保证在列表数据渲染之后动态设置就行了
      2018-05-16
      1
      回复
  • Fairyily
    Fairyily
    2018-02-06

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

    2018-02-06
    赞同
    回复