Mini Program < scroll-view > cannot trigger bindscroll event problem

WeChat Mini Programs < scroll-view > cannot trigger the bindscroll event. The fixed height and sliding direction are set. Please solve the problem. 

<scroll-view wx:if="{{isShow}}" class="showBigPic" scroll-x scroll-width-animation style="width:100%;height:{{scrollheight}}px" bindscroll="getScroll">
  <block wx:for="{{cloudPic}}" wx:for-index="index" wx:for-item="item" wx:key="{{index}}">
    <view style="height:{{scrollheight}}px"><image class="showBigPic" src="{{item.picId[0]}}" mode="widthFix" bindtap="closeBigPic"></image></view>
  </block>
</scroll-view>
// 
onLoad: function() {
    var p = this
    wx.getSystemInfo({
      success: function(res){
        p.setData({
          scrollheight: res.windowHeight
        })
      }
    })
}
getScroll: function(e){
    // 
    console.log(e)
}
// 
closeBigPic: function() {
    this.setData({
      isShow: false
    })
  },

data cloudPic is an array of image paths obtained by calling the database

Javascript
Feb.17,2022

looked up a lot, basically said that the fixed height and sliding direction are not set, but I have set this, still can not trigger the bindscroll event

wxml 

<scroll-view wx:if="{{isShow}}" class="showBigPic" scroll-x scroll-width-animation style="width:100%;height:{{scrollheight}}px" bindscroll='getScroll'>
  <view class="cont">
    <block wx:for="{{cloudPic}}" wx:for-index="index" wx:for-item="item" wx:key="{{index}}">
      <view class="boxes" style="height:{{scrollheight/3}}px;background:{{arr[index]}}">
      </view>
      <!-- <image class="showBigPic" src="{{item.picId[0]}}" mode="widthFix" bindtap='closeBigPic'></image> -->
  </block>
  </view>
</scroll-view>

wxss 

.cont{
  width:1500px;
}

.cont{
  display:flex;
  flex-direction: row;
}

.boxes{
  width:250px;
}

js 

Page({
  data: {
    isShow:false,
    scrollheight:"",
    cloudPic: [1,2,3,4,5],
  },
  getScroll: function(e) {
    // 
    console.log(e)
  },
  showI(){
    this.setData({
      isShow:true,
      arr:['red','green','blue']
    })
  },
  // 
  closeBigPic: function() {
    this.setData({
      isShow: false
    })
  },
  onLoad: function() {
    var me =this;
    wx.getSystemInfo({
      success: function (res) {
        me.setData({
          scrollheight: res.windowHeight
        })
      }
    })
  }
})

I still haven't solved it according to this way

Previous: Implementation of selecting all in the drop-down box of bootstrap-table display column

Next: About skipping loops

css mysql arrays josn react html typescript webpack npm sass R objective-c .net sql-server jquery python-3.x angularjs django angular excel regex iphone ajax linux xml pandas vba spring database wordpress string wpf xcode windows bash postgresql oracle multithreading eclipse list firebase algorithm macos forms image scala visual-studio azure bootstrap spring-boot react-native python-2.7 docker performance function winforms matlab powershell apache dataframe api sqlite numpy rest shell selenium flutter dart maven loops qt swing android-studio csv express file class tensorflow sorting codeigniter perl
MySQL Query : SELECT * FROM `codeshelper`.`v9_news` WHERE status=99 AND catid='6' ORDER BY rand() LIMIT 5
MySQL Error : Disk full (/tmp/#sql-temptable-64f5-1b364a4-2bfe4.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
MySQL Errno : 1021
Message : Disk full (/tmp/#sql-temptable-64f5-1b364a4-2bfe4.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
Need Help?