收藏
回答

ios 深色模式如何适配picker picker-view?修改蒙层样式?

代码

如何适配深色模式?

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

2 个回答

  • Raven R
    Raven R
    2021-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 来确保这个 伪类层不会被点击。(当然,并没有在多种机型上测试过,鬼知道会不会有什么坑。)

    2021-01-08
    有用 3
    回复 1
    • Ryan Wu
      Ryan Wu
      2021-02-03
      谢谢分享
      2021-02-03
      回复
  • 默
    2020-12-08

    mask-style未使用过

    建议使用:mask-class

    2020-12-08
    有用
    回复 3
    • Shape of you
      Shape of you
      2020-12-08
      加了就是白班
      2020-12-08
      回复
    • Shape of you
      Shape of you
      2020-12-08
      还是白班
      2020-12-08
      回复
    • Raven R
      Raven R
      2021-01-08
      之所以会白板,是因为你设置了 background: #fff。你应该使用linear-gradient。具体你看我下面的回答
      2021-01-08
      回复
登录 后发表内容
问题标签