公告列表
公告列表
收藏
回答

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

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

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

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


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

1 个回答

  • Admin ²º²³
    Admin ²º²³
    2020-03-26

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

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

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

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

    2020-03-26
    有用 2
    回复 9
    • 誌文💤
      誌文💤
      2020-03-26
      谢谢你。我采用这个你说的这办法。效果出来了。 不过产生了新的问题。我是使用setData来改变top值的。但是当我打印的top值的时候，我发现控制台一直在输出打印，我鼠标(手指)已经离开了滑动了。onPageScroll还一直在执行。 另外，还有一个问题就是我配置onPullDownRefresh想监听下拉，想要根据下拉的值设置封面的缩放值。但是在开发工具的模拟器里里无法下拉了。当我把前面的top值的方法先重置。先看看下拉的效果时。下拉的onPullDownRefresh方法里打印e，打印不出任何的值。
      2020-03-26
      赞
      回复
    • Admin ²º²³
      Admin ²º²³
      2020-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事件实现下拉功能吧。这个需求其实挺复杂的。
      2020-03-26
      赞 1
      回复
    • 誌文💤
      誌文💤
      2020-03-27回复Admin ²º²³
      谢谢你。我已经实现了这个功能了。比我找的例子截图.gif的效果还流畅。 感恩你的回答，我也分享下实现的步骤：1，内容上拉可以覆盖住封面： 只用设置封面是fixed，内容的z-index比封面高，就可以了。也是得益于您的回答才发现的；2，另外怎么监听内容区域下拉，封面按比例放大呢？我一直在想怎么监听下拉事件。但是下拉事件函数里要么得不到scrollTop值，要么就是下拉事件实现的是整个页面的下拉，而我想要的是下面内容区域的下拉。 这个时候我想onPageScroll可以吗？在模拟器下拉不了，设置的打印也显示不出来。我于是就在真机里通过wx.showToast显示打印值，真的显示出来了，也可以下拉。于是我就根据下拉的scrollTop值设置一定的比例，传递给上面的封面swiper组件。实时改变其scale值就可以啦。目前在iphones6 Plus里完美实现，流畅无卡顿。再次感恩你的分享，给了我灵感。谢谢，愿你平安喜乐~
      2020-03-27
      赞
      回复
    • Admin ²º²³
      Admin ²º²³
      2020-03-27回复誌文💤
      666了。安卓真机下的性能效果如何。我有点担心下拉时一直setData，如果你没做函数节流的话安卓下渲染会慢
      2020-03-27
      赞
      回复
    • Admin ²º²³
      Admin ²º²³
      2020-03-27
      我以前做过类似的效果，我自认为感觉不完美。
      2020-03-27
      赞
      回复
    查看更多(4)
请 登录 后发表内容
相关问题
相关文档
问题标签
scroll-view视图容器滚动小程序开发组件