自定义组件中使用ScrollView，scroll-top属性失效
<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`属性不起作用
4 回复
这里要注意：scroll-top 是仅在设置的时刻生效的值。
hidden 属性会跳过节点及其子节点的布局计算，所以 scroll-top 在 hidden 为 true 时不会生效。因为 scroll-top 是仅在设置的时刻生效的值，因而在 hidden 变为 false 之后需要再设置一次 scroll-top 才行。前两种情况都是这个原因（与是否在自定义组件中无关）。
第三种情况，如果 products 初始为空或高度不足 100px ，则 scroll-top 不会生效。因为 scroll-top 是仅在设置的时刻生效的值，因而在 products 改变之后需要再设置一次 scroll-top 才行。
第一种情况：
自定义组件
<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失效。
强力驱动