微信小程序坑-scroll-view滑动列表(就一行,没有填满屏幕就会触发上拉加载事件)

比方说如下图片中有一个滑动列表。我的这个页面只有一行数据,按理说我们滑动时候是不应该触发上拉加载的,因为滑动的
scroll-view元素高度是设置的100%。结果我这里就触发了上拉加载事件。图中两个箭头,箭头1的地方是 scroll-view的一个子元素的margin-top
如下图代码。

原因:就是

< view wx:for= "{{arr}}" class= 'item'>元素设置margin-top的时候微信浏览器解析出现了问题。所以只要这个元素设置了margin属性就算是一行数据也能触发上拉加载事件。我们想要的是
滑块最后一个滑动到底部才触发上啦加载事件。
解决方法:(我们设置margin-top值是为了在两行数据之间加灰色的一个分割线)不设置margin-top。

我们可以设置一个新的元素充当这个分割线(

< view class= 'block'></ view >
),也可以用 scroll-view直接子元素以外的元素设置margin-top撑开页面。




  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
微信小程序中,scroll-view 组件默认阻止页面上其他元素的滑动事件,这可以通过设置 `catchtouchmove` 属性来解决。 具体做法如下: 1. 在 scroll-view 组件上添 `catchtouchmove="true"` 属性,如下所示: ```html <scroll-view catchtouchmove="true"> <!-- scroll-view 内容 --> </scroll-view> ``` 2. 在页面的 `onLoad` 或 `onReady` 生命周期中,获取 scroll-view 组件的高度和宽度,然后在页面上添一个与 scroll-view 同样大小的透明的 view,并将其 zIndex 设置为比 scroll-view 更高的数值,这样就可以让页面上的其他元素在透明的 view 上进行滑动了。代码如下: ```javascript onLoad: function () { var that = this; wx.createSelectorQuery().select('#scrollview').boundingClientRect(function (rect) { that.setData({ scrollHeight: rect.height }); }).exec(); wx.getSystemInfo({ success: function (res) { that.setData({ windowHeight: res.windowHeight }); } }); }, ``` ```html <!-- 添一个与 scroll-view 大小相同的透明 view --> <view class="transparent-view" style="height: {{windowHeight - scrollHeight}}px; z-index: 1;"></view> <scroll-view id="scrollview" catchtouchmove="true"> <!-- scroll-view 内容 --> </scroll-view> ``` 3. 在页面的 CSS 中,让透明的 view 不显示出来,代码如下: ```css .transparent-view { background-color: transparent; } ``` 通过以上步骤,就可以解决微信小程序中 scroll-view 组件滑动穿透的问题了。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值