微信小程序 scroll-view 組件的 bindscroll 不觸發不生效

使用微信小程序基礎組件中的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>

在網上查了資料,發現了幾類不生效的原因,總結如下:

1、沒有設置高度,根據小程序文檔,在使用 scroll-view 組件用于豎向滾動時一定要設置高度。

2、沒有設定scroll-y
3、組件屬性的長度單位默認為px,2.4.0起支持傳入單位(rpx/px)。設定百分比高度可能不生效
4、scroll-view 里有兩個子元素,加一個view給包起來
5、滾動的可能是page,如果確定page里的內容不需要滾動。只滾動scroll-view里的內容,禁用頁面滾動

發現我的問題應該是第3種情況,高度設置的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}}">

測試后問題解決了,

?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容