xdrfv
xdrfv
  • 发布:2023-07-10 16:33
  • 更新:2023-07-10 17:53
  • 阅读:275

微信小程序,使用滚动条监听,ios因为橡皮筋回弹效果发烫,安卓不会,有什么解决办法吗?

分类:uni-app

又不能把整个页面的橡皮筋效果给禁掉。

2023-07-10 16:33 负责人:无 分享
已邀请:
勇哥萌萌哒

勇哥萌萌哒

字多不看,既然热得煎鸡蛋了,干脆搞个活动,安装app送鸡蛋

pages.json disableScroll:true 解千愁

如果觉得是这个的问题,为了头发,可以直接干掉就行了,使用区域滚动,scroll-view,监听就行了

你如果要做吸顶,scroll-view内容用一个view包裹,内容部分需要吸顶的,直接写postion:sticky就行了

  • xdrfv (作者)

    这个代码是要实现,选项卡能吸顶,且能左右滑动切换。

    实现方式是sticky布局选项卡,再swiper嵌套定高scroll-view。

    但是里层的scroll-view在还未到达顶部时,内部要不可滑动 ,因此虽然有sticky但还是得判断是否触顶。

    触顶条件原本是onreachbottom,触底时记录当前scrollTop高度,结果ios的回弹才是天坑,滑到底部的时候回弹了,外部滚动条的scrollTop跳来跳去,根本没法子判断触顶值,后来只能用定值判断(所以我认为是监听滚动条回弹导致的发热)。(而且这种方式判断内部是否可滑动,设scroll值时会有延迟,差的手机还会卡一下,就很头秃)

    我不确定再在外层套个scroll-view可不可行,之前看垂直方向不能套,能套吗?

    2023-07-10 18:09

  • 勇哥萌萌哒

    回复 xdrfv: 不建议这么套,你垂直方向上的滚动只需要一个scroll-view就行了,就是保持你swiper-item内部的scroll-view, 最外层不写scroll-view,这样做只是取消了回弹,其它照旧

    2023-07-11 14:57

  • 勇哥萌萌哒

    回复 xdrfv: onreachbottom监听改为用 scrolltolower监听,另外scroll-view的内容使用view标签包裹一下,你触顶就不需要额外判断了,优化一下布局能解决很多问题

    2023-07-11 15:05

  • xdrfv (作者)

    回复 勇哥萌萌哒: 原来的代码就只有swiper内部的scroll-view,以及用 scrolltolower监听是无意义的,因为这个功能很重要一点就是“在选项卡还未到达顶部时,scroll-view不能滑动”,因此无法使用监听内部触底。

    我在尝试直接不用scroll-view,但是顶部区域用了一堆子组件,获取高度真的头疼。

    2023-07-17 10:31

爱豆豆

爱豆豆 - 办法总比困难多

回弹效果发烫? 能贴一下代码片段吗?

  • xdrfv (作者)

    非常感谢询问!

    // 滚动监听赋值

    onPageScroll(e) {

    // 如果有分界线,且顶部选项卡显示,且当前滚动高度小于分界线

    if (this.fixedScrollTop !== 0 && this.showTopTab && e.scrollTop < this.fixedScrollTop) {

    // 取消显示,scroll回到顶部

    console.log('hiddenTopTab');

    this.showTopTab = false;

    this.goTop(0);

    }

    // 如果有分界线,且当前滚动高度大于分界线,显示选项卡(此处不能再判断选项卡显隐,滚动条回弹会有问题)

    if (this.fixedScrollTop !== 0 && e.scrollTop >= this.fixedScrollTop - 30) {

    console.log('showTopTab');

    this.scrollY = true;

    this.showTopTab = true;

    }

    // 如果还未有分界线,但是已经显示顶部了,记录分界线

    if (this.fixedScrollTop === 0 && this.showTopTab) {

    console.log('markTopTab');

    // 苹果则不改变分界线

    if (this.platform === 'ios') {

    // this.fixedScrollTop = e.scrollTop - 44

    } else {

    this.fixedScrollTop = e.scrollTop;

    console.log('hasMarkShowTop', this.fixedScrollTop, e.scrollTop);

    }

    }

    },

    业务场景是选项卡吸顶,内容页能左右滑动。安卓完全不会发烫,但是苹果一会儿就烫起来了,他们的区别就只有橡皮筋回弹效果。

    2023-07-10 16:51

  • xdrfv (作者)

    // 触底时显示选项卡,安卓需要  
    onReachBottom() {
    // 如果是苹果不同过此方法控制显隐
    if (this.platform === 'ios') {
    return null;
    }
    // 安卓:触底显示选项卡,可滑动
    if (!this.showTopTab) {
    console.log('toBottom');
    this.showTopTab = true;
    this.scrollY = true;
    }
    },还有这块

    2023-07-10 16:52

  • 爱豆豆

    回复 xdrfv: 你做个空demo打个压缩包发出来出来

    2023-07-10 17:38

  • 爱豆豆

    回复 爱豆豆: 把你整页代码放到空项目里

    2023-07-10 17:38

  • 爱豆豆

    回复 爱豆豆: 或者你 打开微信 => 设置 => 帮助与反馈 => 右上角小扳手图标 => 故障修复 =>小程序 试一下

    2023-07-10 17:57

  • xdrfv (作者)

    回复 爱豆豆: 非常感谢,要可以运行的吗?还是直接整页代码就可以?能运行版本的我需要造一下假数据,改一下接口。

    2023-07-10 18:11

  • xdrfv (作者)

    回复 爱豆豆: 回复 爱豆豆: 这个是测了几支苹果机和安卓机,就只有苹果机会这样

    2023-07-10 18:13

  • 爱豆豆

    回复 xdrfv: 本页就行了 能运行起来的

    2023-07-10 19:11

要回复问题请先登录注册