使用微信小程序基礎(chǔ)組件中的scroll-view,但是滑動的時候 bindscroll 一直不生效。
<view class="container log-list">
<scroll-view scroll-y style="height:100%;white-space:nowrap;" scroll-into-view="{{toView}}" enable-back-to-top bindscroll="scroll" scroll-with-animation scroll-top="{{scrollTop}}">
<view class="list-group" wx:for="{{logs}}" wx:for-item="group">
<view class="title" id="{{group.title}}">{{group.title}}</view>
<block wx:for="{{group.items}}" wx:for-item="user">
<view id="" class="list-group-item">
<image class="icon" src="{{user.avatar}}" lazy-load="true"></image>
<text class="log-item">{{user.name}}</text>
</view>
</block>
</view>
</scroll-view>
在網(wǎng)上查了資料,發(fā)現(xiàn)了幾類不生效的原因,總結(jié)如下:
1、沒有設(shè)置高度,根據(jù)小程序文檔,在使用 scroll-view 組件用于豎向滾動時一定要設(shè)置高度。
2、沒有設(shè)定scroll-y
3、組件屬性的長度單位默認為px,2.4.0起支持傳入單位(rpx/px)。設(shè)定百分比高度可能不生效
4、scroll-view 里有兩個子元素,加一個view給包起來
5、滾動的可能是page,如果確定page里的內(nèi)容不需要滾動。只滾動scroll-view里的內(nèi)容,禁用頁面滾動
發(fā)現(xiàn)我的問題應(yīng)該是第3種情況,高度設(shè)置的100%可能沒生效,修改如下:
<scroll-view scroll-y style="height:100vh;white-space:nowrap;" scroll-into-view="{{toView}}" enable-back-to-top bindscroll="scroll" scroll-with-animation scroll-top="{{scrollTop}}">
測試后問題解決了,