收藏
回答

mask-class

框架类型 问题类型 API/组件名称 终端类型 操作系统 微信版本 基础库版本
小程序 Bug picker-view 微信iOS客户端 6.6.7 2.2.1

请问picker-view的mask-class应当如何使用?支持写入哪些CSS?


目前设置异常



如图,会鬼畜的重复渐变,就像mask有一个最大的高度,超出就会重新应用再拼接一样

如果是这样,根本满足不了需求甚至不能设置默认的样式。

默认的样式应该是一个三段的渐变,一次的高度是100%

最后一次编辑于  2018-08-05
回答关注问题邀请回答
收藏

3 个回答

  • 葫芦娃救爷爷 Raven R
    葫芦娃救爷爷 Raven R
    01-08

    设置 mask-class 的坑点 是,它是一个 渐变背景。你需要使用linear-gradient 来定义css渐变背景,而且渐变背景的本质是一个 background-image,于是当你发现渐变背景在鬼畜重复的时候,需要将background-repeat设置为 no-repeat,而当你设置了 no-repeat以后,发现渐变背景只能遮盖picker-view的一半大小的时候background-size,使这个 size 匹配你的 picker view大小,这里要加上 !important,不然不能覆盖默认值。

    这里是一个 class:

    .picker-mask {

      max-width: auto;

      background: rgb(0,240,244);

      background: linear-gradient(0deg, rgba(0,240,244,1) 0%,

                                  rgba(121,255,250,0) 45%,

                                  rgba(121,255,250,0) 55%,

                                  rgba(163,255,118,1) 100%);

      background-size: 750px 300px !important;

      background-position: center center;

      background-repeat: no-repeat;

      z-index: 9;

    }

    或者直接看 下面这个 代码片段。

    https://developers.weixin.qq.com/s/B0VrcbmD72ni


    ps: 确实有点坑,基本就靠猜,几百次瞎猜以后,侥幸被我猜中。

    在猜中之前,我采用了另外一种方法

    给 mask-class 设置为 background: none !important; 让他彻底滚蛋。

    给 picker-view 定义一个 class 加上 :before :after,然后自己定义 渐变背景,其中:after 用 transform 的 rotateY 倒过来, 并且要把 pointer-event: none 来确保这个 伪类层不会被点击。(当然,并没有在多种机型上测试过,鬼知道会不会有什么坑。)


    01-08
    有用
    回复
  • Mr.Hope
    Mr.Hope
    2018-08-05


    设置高度也不行

    2018-08-05
    有用
    回复
  • Mike Chen
    Mike Chen
    2018-08-04

    我的也是请问你解决了这个问题了吗

    2018-08-04
    有用
    回复 3
    • Mike Chen
      Mike Chen
      2018-08-04

      可以设置背景色和边框

      2018-08-04
      回复
    • Mike Chen
      Mike Chen
      2018-08-04

      我是动态设置的当前选中的样式,只不过触发的时候有一点慢:

      2018-08-04
      回复
    • 葫芦娃救爷爷 Raven R
      葫芦娃救爷爷 Raven R
      01-08
      别折腾了。你看我下面说的吧
      01-08
      回复
登录 后发表内容