小程序--->scroll-view组件不能触发相应滚动事件

最新推荐文章于 2025-06-24 21:23:20 发布

码上腾飞

最新推荐文章于 2025-06-24 21:23:20 发布

阅读量1.9k

点赞数 2

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/Frankltf/article/details/82976572

本文介绍了解决小程序中scroll-view组件无法触发滚动事件的问题。主要从设置组件高度及滚动方向两个方面入手，提供了具体代码示例及实现方式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

小程序scroll-view组件不能触发相应滚动事件

在制作加载更多时会发现不能触发相应事件，一般情况下首先要查看两个必要的属性scroll-view的高度是否设置，第二就是scroll-view的滚动方向是否设置，缺一都有可能导致不能触发相应事件。

//wxml.  这里的高度可以用自适应高度
<scroll-view class='index-container' style="height:{{windowHeight}}" scroll-y bindscrolltolower="lower">
    <view class='nav'>
    <view class='nav-item' wx:for="{{navData}}" wx:for-index="id" wx:for-item="item" id="{{item.id}}" wx:key="id" bindtap="navClick">
        <image class='contant_address_right' src="{{currentNavId==item.id?item.selectImage:item.image}}" class='nav-image' mode="aspectFit"></image>
      <text class='{{currentNavId==item.id?"nav-item-text-actived":"nav-item-text"}}'>{{item.name}}</text>
    </view>
  </view>
    <template is="{{currentTemplate}}" data="{{...goodsData}}"/>
    <view class='loadmore' hidden="{{loadmore}}">
      <text style='font-size: 28rpx;color: #2b2b2b;'>加载更多...</text>
    </view>
</scroll-view>

   Page({
    lower: function (e) {
    if (this.data.loadmoreData){
      this.setData({
        loadmore: 'true',
      })
      this.loadmorenav();
    }else{
      this.setData({
        loadmore: 'false',
      })
    }
  },
    onLoad: function (options) {
    this.initfun();
    var that = this;
    wx.getSystemInfo({
      success: function (res) {
        that.setData({
          windowHeight: res.windowHeight+"px",
        })
      }
    })
  }
   })