评论

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

采用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
    赞同
    回复
登录 后发表内容