收藏
回答

scroll-view向上滚动时,超出的不隐藏,该如何设置呢?

我想实现某小程序详情页面的效果:内容可以整体上滑遮住封面,下滑回到原位,下拉一下,封面有个缩放效果。

我看到scroll-view有整体内容上滑,又有监听下拉bindrefresherrefresh,于是想选择使用scroll-view,但是没看到上滑超出的内容 不隐藏的设置选项。

请问这个功能,选用scroll-view来实现可以吗?


回答关注问题邀请回答
收藏

1 个回答

  • Admin²⁰²⁰
    Admin²⁰²⁰
    03-26

    这个考虑2个层来实现比较方便吧

    顶部封面层1,一个底部上拉层2。

    层2z-index大于层1,保证让层2能覆盖层1

    然后动态调整层2的top值,配上动画效果需求就完成了吧?

    03-26
    赞同 1
    回复 8
    • 誌文💤
      誌文💤
      03-26
      谢谢你。我采用这个你说的这办法。效果出来了。 不过产生了新的问题。我是使用setData来改变top值的。但是当我打印的top值的时候,我发现控制台一直在输出打印,我鼠标(手指)已经离开了滑动了。onPageScroll还一直在执行。 另外,还有一个问题就是我配置onPullDownRefresh想监听下拉,想要根据下拉的值设置封面的缩放值。但是在开发工具的模拟器里里无法下拉了。当我把前面的top值的方法先重置。先看看下拉的效果时。下拉的onPullDownRefresh方法里打印e,打印不出任何的值。
      03-26
      回复
    • Admin²⁰²⁰
      Admin²⁰²⁰
      03-26回复誌文💤
      1、用函数节流避免多次触发的问题,你可以百度下函数节流
      2、onPullDownRefresh应该能下来的吧,top为0的时候下拉页面才能触发这个事件吧。下拉的onPullDownRefresh方法里打印e,打印不出任何的值。
      这个方法没有e参数的吧。
      Page(Object object) | 微信开放文档
      https://developers.weixin.qq.com/miniprogram/dev/reference/api/Page.html#onPullDownRefresh
      你可以监控层1的touchMove事件实现下拉功能吧。这个需求其实挺复杂的。
      03-26
      1
      回复
    • 誌文💤
      誌文💤
      03-27回复Admin²⁰²⁰
      谢谢你。我已经实现了这个功能了。比我找的例子截图.gif的效果还流畅。 感恩你的回答,我也分享下实现的步骤:1,内容上拉可以覆盖住封面: 只用设置封面是fixed,内容的z-index比封面高,就可以了。也是得益于您的回答才发现的;2,另外怎么监听内容区域下拉,封面按比例放大呢?我一直在想怎么监听下拉事件。但是下拉事件函数里要么得不到scrollTop值,要么就是下拉事件实现的是整个页面的下拉,而我想要的是下面内容区域的下拉。 这个时候我想onPageScroll可以吗?在模拟器下拉不了,设置的打印也显示不出来。我于是就在真机里通过wx.showToast显示打印值,真的显示出来了,也可以下拉。于是我就根据下拉的scrollTop值设置一定的比例,传递给上面的封面swiper组件。实时改变其scale值就可以啦。目前在iphones6 Plus里完美实现,流畅无卡顿。再次感恩你的分享,给了我灵感。谢谢,愿你平安喜乐~
      03-27
      回复
    • Admin²⁰²⁰
      Admin²⁰²⁰
      03-27回复誌文💤
      666了。安卓真机下的性能效果如何。我有点担心下拉时一直setData,如果你没做函数节流的话安卓下渲染会慢
      03-27
      回复
    • Admin²⁰²⁰
      Admin²⁰²⁰
      03-27
      我以前做过类似的效果,我自认为感觉不完美。
      03-27
      回复
    查看更多(3)
登录 后发表内容
问题标签