在用 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 了。 直接使用页面滑动,是很流畅的)
大家有什么好的解决办法吗??
1
functionjx 2020-04-18 11:17:32 +08:00
我也遇到和你一眼的问题,解决后我再回来教你哈哈。
|
2
gaigechunfeng OP @functionjx 哇靠哇靠,不知道是大家没遇到这个需求,还是我描述的不清楚,都没人回复我,还是你懂我!!
我好像用一个不太完美的方法实现了这个需求,当然你有更好的解决办法可以一起分享下。 握手~回头咱俩交流一下。 |
3
gaigechunfeng OP @functionjx 兄弟解决了吗?哈哈
|
4
15866 2020-12-14 16:06:19 +08:00
@gaigechunfeng 兄弟你用什么办法解决的啊
|
5
15866 2020-12-14 19:58:05 +08:00
@functionjx 兄弟你咋解决这个问题的啊
|
6
gaigechunfeng OP @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"> |
7
15866 2020-12-17 11:26:44 +08:00
@gaigechunfeng view 带 overflow: scroll 吗?我这边使用 view 带 overflow: scroll 还是无法传递滚动。
|
8
15866 2020-12-17 11:52:14 +08:00
@gaigechunfeng 这个问题在 iOS 上是尤为明显的,在滚动过程中,只要用户不松手,页面滚动的和 swiper 内(内嵌的 view 或者 scroll-view )的滚动就无法完成传递。
我看在斑马英语小程序上也有类似的功能,不知道他们采用了什么样的方法,在页面滚动到 tabbar 置顶位置时,会强制禁掉页面的滚动,迫使用户中断滑动操作并松手。 |
9
gaigechunfeng OP @15866 我是没有带 scroll 属性。
我发现微信读书小程序,和我们一样用了 sticky 的方式,但它也可以传动滚动。 我是用普通 view,没有带 scroll,应该是这么解决的这种问题。 你可以试一下呢。 |
10
jessesjessesjess 2021-02-17 11:25:09 +08:00
遇到一样的问题,可是用普通 view 的话,就不能记录每个 tab 各自的滑动距离了
|