自定义组件中使用ScrollView，scroll-top属性失效 - WXOPEN Club

<scroll-view style='height:50px;background:#ff0000' scroll-y scroll-top="100">

<view>1</view>

<view>2</view>

<view>3</view>

<view>4</view>

<view>5</view>

<view>6</view>

<view>7</view>

</scroll-view>

上述代码用在小程序自定义组件中`scroll-top`属性不起作用

yang70 1楼•5 年前

这里要注意：scroll-top 是仅在设置的时刻生效的值。

hidden 属性会跳过节点及其子节点的布局计算，所以 scroll-top 在 hidden 为 true 时不会生效。因为 scroll-top 是仅在设置的时刻生效的值，因而在 hidden 变为 false 之后需要再设置一次 scroll-top 才行。前两种情况都是这个原因（与是否在自定义组件中无关）。

第三种情况，如果 products 初始为空或高度不足 100px ，则 scroll-top 不会生效。因为 scroll-top 是仅在设置的时刻生效的值，因而在 products 改变之后需要再设置一次 scroll-top 才行。

bpan 2楼•5 年前

第一种情况：

自定义组件

<scroll-view style='height:50px;background:#ff0000' scroll-y scroll-top="100">

<view>1</view>

<view>2</view>

<view>3</view>

<view>4</view>

<view>5</view>

<view>6</view>

<view>7</view>

</scroll-view>

在引用自定义组件的wxml文件中

<view hidden='{{!hidden}}'>

<test id='test'/>

</view>

其中`hidden`在data中初始化直接引用显示正常，但是在API请求成功后修改`hidden`字段后`scroll-top`失效。

第二种情况

自定义组件

<view hidden="{{info !== null}}">

<scroll-view style='height:50px;background:#ff0000' scroll-y scroll-top="100">

<view>1</view>

<view>2</view>

<view>3</view>

<view>4</view>

<view>5</view>

<view>6</view>

<view>7</view>

</scroll-view>

</view>

当动态修改info 时，scroll-top失效。

第三种情况

自定义组件

<scroll-view scroll-y style="height:100px;background:#ff0000" scroll-top="100">

<block wx:key="key" wx:for="{{products}}">

<view>{{index}}</view>

</block>

</scroll-view>

使用block 标签，scroll-top失效。

jing37 3楼•5 年前

你好，直接将你这段代码贴到自定义组件中未能复现问题。请提供一下可复现问题的代码片段。

fma 4楼•5 年前

非常感谢！