小程序的 scroll-view 滚动和页面滚动之间的传递 - V2EX
V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
请不要在回答技术问题时复制粘贴 AI 生成的内容
gaigechunfeng
V2EX    程序员

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

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

    在用 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     Solana     995 人在线   最高记录 6679       Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 23ms UTC 18:37 PVG 02:37 LAX 11:37 JFK 14:37
    Do have faith in what you're doing.
    ubao msn snddm index pchome yahoo rakuten mypaper meadowduck bidyahoo youbao zxmzxm asda bnvcg cvbfg dfscv mmhjk xxddc yybgb zznbn ccubao uaitu acv GXCV ET GDG YH FG BCVB FJFH CBRE CBC GDG ET54 WRWR RWER WREW WRWER RWER SDG EW SF DSFSF fbbs ubao fhd dfg ewr dg df ewwr ewwr et ruyut utut dfg fgd gdfgt etg dfgt dfgd ert4 gd fgg wr 235 wer3 we vsdf sdf gdf ert xcv sdf rwer hfd dfg cvb rwf afb dfh jgh bmn lgh rty gfds cxv xcv xcs vdas fdf fgd cv sdf tert sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf shasha9178 shasha9178 shasha9178 shasha9178 shasha9178 liflif2 liflif2 liflif2 liflif2 liflif2 liblib3 liblib3 liblib3 liblib3 liblib3 zhazha444 zhazha444 zhazha444 zhazha444 zhazha444 dende5 dende denden denden2 denden21 fenfen9 fenf619 fen619 fenfe9 fe619 sdf sdf sdf sdf sdf zhazh90 zhazh0 zhaa50 zha90 zh590 zho zhoz zhozh zhozho zhozho2 lislis lls95 lili95 lils5 liss9 sdf0ty987 sdft876 sdft9876 sdf09876 sd0t9876 sdf0ty98 sdf0976 sdf0ty986 sdf0ty96 sdf0t76 sdf0876 df0ty98 sf0t876 sd0ty76 sdy76 sdf76 sdf0t76 sdf0ty9 sdf0ty98 sdf0ty987 sdf0ty98 sdf6676 sdf876 sd876 sd876 sdf6 sdf6 sdf9876 sdf0t sdf06 sdf0ty9776 sdf0ty9776 sdf0ty76 sdf8876 sdf0t sd6 sdf06 s688876 sd688 sdf86