评论

筛选分类，阻止底层页面穿透滚动

2019-09-04
6230浏览
4评论

采用movable-area，movable-view，catchtouchmove实现筛选时，阻止底层页面穿透滚动

采用movable-area，movable-view，catchtouchmove实现筛选时，阻止底层页面穿透滚动，根据之前的项目需求，做了相应的简化：

  1. movable-area，movable-view实现弹窗内筛选项的滚动
  2. catchtouchmove阻止页面滚动
    https://developers.weixin.qq.com/s/xUPdx7mX75b8
点赞 0
收藏
评论

4 个评论

  • WANGZHENG
    WANGZHENG
    2019-11-21

    当我弹窗里也能滚动时，下面的页面还是会滚动

    2019-11-21
    赞同
    回复 5
    • Xs
      Xs
      2019-11-21
      是真机还是开发工具，方便的话可以分享个代码片段
      2019-11-21
      赞
      回复
    • Xs
      Xs
      2019-11-21
      你可以检查一下：第一，阻止滚动这个事件catchtouchmove，要添加给最顶级的视图组件view, 不要添加给自己滚动内容的父盒子（除非也是顶级的）；第二，确保弹窗弹起时，这个事件确实被赋值（你自定的函数名）
      2019-11-21
      赞
      回复
    • WANGZHENG
      WANGZHENG
      2019-11-21回复Xs
      谢谢回复，根据你的改了下，看看有啥好办法没 🤣 https://developers.weixin.qq.com/s/kLWc52my7tdn
      2019-11-21
      赞
      回复
    • Xs
      Xs
      2019-11-21
      https://developers.weixin.qq.com/s/CgYh32mP75dn
      2019-11-21
      赞
      回复
    • WANGZHENG
      WANGZHENG
      2019-11-25回复Xs
      知道你的实现了  需要movable-area组件
      2019-11-25
      赞
      回复
  • 未来
    未来
    2019-09-10

    然而并没有卵用，遮罩都没出来

    2019-09-10
    赞同
    回复 6
    • Xs
      Xs
      2019-09-11
      什么意思
      2019-09-11
      赞
      回复
    • 未来
      未来
      2019-09-12回复Xs
      字面意思啊 你那个demo遮罩都没出来
      2019-09-12
      赞
      回复
    • 未来
      未来
      2019-09-12回复未来
      哦 没搞遮罩是吧 sorry sorry
      2019-09-12
      赞
      回复
    • 未来
      未来
      2019-09-12回复Xs
      我想当然了 你那个筛选打开的时候下面没有遮罩，，我以为是bug 没仔细看
      2019-09-12
      赞
      回复
    • Xs
      Xs
      2019-09-12回复未来

      这个是我简化的功能，确实没加入遮罩，如果想看下真实的效果，可以搜下‘人互人家居’小程序，首页的tabbar页面，就有遮罩效果

      2019-09-12
      赞
      回复
    查看更多(1)
  • Xs
    Xs
    2019-09-05

    做个补充：

    1. 采用这个方法，movable-area，movable-view是关键点

      a. 在项目的实际开发中，想要内部发生滚动，movable-view的高度必须大于movable-area；

      b. 这种方法最实用内部的布局比较均匀的情况，因为movable-view不会因为内部的高度自动撑开，必须手动设置高度，那么，问题就来了， 设置这个高度需要动态计算（内部的实际高度），所以，筛选项的布局越均匀，越容易计算并设置。实际要看开发ui

    2. catchtouchmove是可以阻止滚动

      a. 但是很多人catchtouchmove=‘true’,有这么属性设置就做到了，其实，catchtouchmove绑定的是事件，这样写框架认为，你实际绑定了一个函数名就叫true , 你可以看下控制台，他一定会抛出没有true这个处理函数。

      b. 这里我采用动态判断的模式, 也就是当选择弹窗弹起时，catchtouchmove=‘自定的事件名’,开始组织页面滚动；当选择弹窗消失时，catchtouchmove=‘’,事件绑定为空，恢复页面滚动；

    3. 当然这个demo只是之前项目缩版，只是实现当下效果，实际开发更加复杂，仅供参考

    2019-09-05
    赞同
    回复
  • 原点的原点
    原点的原点
    2019-09-04

    沙发

    2019-09-04
    赞同
    回复
请 登录 后发表内容
作者介绍

文章标签
滚动阻止穿透