V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
gaigechunfeng
V2EX  ›  程序员

小程序的 scroll-view 滚动和页面滚动之间的传递

  •  
  •   gaigechunfeng · 2019-09-25 13:03:47 +08:00 · 2532 次点击
    这是一个创建于 1890 天前的主题,其中的信息可能已经有所发展或是发生改变。

    在用 uniapp 开发的小程序的时候,遇到一个问题,就是上下滑动的 scroll-view 和页面滑动不能相互传递。

    我的页面布局可简单描述为:上是 header,中是 tabbar,下是一个 swiper 包含的 scroll-view (可上下滑动)

    为了达到向上滑动一定距离后 tabbar 吸顶的效果,我是这么做的: 1、一开始 scroll-view 禁止上下滑动,此时是页面滑动效果; 2、等到 tabbar 的 top 为 0 时,变成 fiexd,然后 打开 scroll 的滑动;

    这样是可以实现这种效果,但是由于页面滑动和 scroll-view 不能传递滑动,所以在手机上,惯性滑动的时候,总是会中断。

    (为什么要用 scroll-view 和 swiper 呢,是因为我还想左右滑动切换 swiper。否则就可以不用 scroll-view 了。 直接使用页面滑动,是很流畅的)

    大家有什么好的解决办法吗??

    10 条回复    2021-02-17 11:25:09 +08:00
    functionjx
        1
    functionjx  
       2020-04-18 11:17:32 +08:00
    我也遇到和你一眼的问题,解决后我再回来教你哈哈。
    gaigechunfeng
        2
    gaigechunfeng  
    OP
       2020-04-18 17:21:29 +08:00
    @functionjx 哇靠哇靠,不知道是大家没遇到这个需求,还是我描述的不清楚,都没人回复我,还是你懂我!!

    我好像用一个不太完美的方法实现了这个需求,当然你有更好的解决办法可以一起分享下。

    握手~回头咱俩交流一下。
    gaigechunfeng
        3
    gaigechunfeng  
    OP
       2020-04-26 23:49:35 +08:00
    @functionjx 兄弟解决了吗?哈哈
    15866
        4
    15866  
       2020-12-14 16:06:19 +08:00
    @gaigechunfeng 兄弟你用什么办法解决的啊
    15866
        5
    15866  
       2020-12-14 19:58:05 +08:00
    @functionjx 兄弟你咋解决这个问题的啊
    gaigechunfeng
        6
    gaigechunfeng  
    OP
       2020-12-16 18:23:50 +08:00
    @15866 哈哈你居然能搜到我这个贴子里面来。说明两件事:
    1 、你遇到了和我一样的疑惑,我以为我说的大家都不明白呢;
    2 、网上确实没有这个解决方法;

    这个我最后是规避掉了。就是不用 scrollview 了,还用普通的 view 就可以传动了。
    贴一下最简单的标签给你。

    <swiper class="tab-content" :current="currentTabIndex" duration="300" @change="switchTab" :style="{height:winHeight+'px'}">
    <swiper-item v-for="(item,index) in tabbar" :key="index">
    <!-- 内容 start -->
    <view class="tui-product-box" id="mylist">
    15866
        7
    15866  
       2020-12-17 11:26:44 +08:00
    @gaigechunfeng view 带 overflow: scroll 吗?我这边使用 view 带 overflow: scroll 还是无法传递滚动。
    15866
        8
    15866  
       2020-12-17 11:52:14 +08:00
    @gaigechunfeng 这个问题在 iOS 上是尤为明显的,在滚动过程中,只要用户不松手,页面滚动的和 swiper 内(内嵌的 view 或者 scroll-view )的滚动就无法完成传递。

    我看在斑马英语小程序上也有类似的功能,不知道他们采用了什么样的方法,在页面滚动到 tabbar 置顶位置时,会强制禁掉页面的滚动,迫使用户中断滑动操作并松手。
    gaigechunfeng
        9
    gaigechunfeng  
    OP
       2020-12-22 15:38:27 +08:00
    @15866 我是没有带 scroll 属性。

    我发现微信读书小程序,和我们一样用了 sticky 的方式,但它也可以传动滚动。

    我是用普通 view,没有带 scroll,应该是这么解决的这种问题。

    你可以试一下呢。
    jessesjessesjess
        10
    jessesjessesjess  
       2021-02-17 11:25:09 +08:00
    遇到一样的问题,可是用普通 view 的话,就不能记录每个 tab 各自的滑动距离了
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   2744 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 23ms · UTC 15:24 · PVG 23:24 · LAX 07:24 · JFK 10:24
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.