收藏
回答

picker-view mask-class 会直接遮住全部选项

框架类型 问题类型 API/组件名称 终端类型 微信版本 基础库版本
小程序 Bug picker-view 工具 1.02.1807120 2.0.9

使用picker-view的时候 使用mask-class 控制样式,加了background就直接把所有内容都遮住了

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

4 个回答

  • 小程序技术专员-june
    小程序技术专员-june
    2018-08-09

    给select-mask加个z-index: -1;试试。

    2018-08-09
    有用
    回复
  • 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
    有用 2
    回复
  • Mike Chen
    Mike Chen
    2018-08-04

    找到了一个解决办法,可以判断当前year和当前item相等的时候给当前元素加上一个class

    2018-08-04
    有用 2
    回复 3
    • Mason
      Mason
      2018-08-09

      涉及滚动选择的时候,change的触发是延时的,这个时候,class的更新会变慢很多

      2018-08-09
      1
      回复
    • Mike Chen
      Mike Chen
      2018-08-09

      对,就是很慢,你有想到好的办法了吗

      2018-08-09
      回复
    • Raven R
      Raven R
      2021-01-08
      这个办法,显然不可取。
      2021-01-08
      回复
  • 灵芝
    灵芝
    2018-07-19

    你好,麻烦提供相关的代码片段(https://developers.weixin.qq.com/miniprogram/dev/devtools/minicode.html),方便定位问题

    2018-07-19
    有用
    回复 4
    • Mason
      Mason
      2018-07-19

      已上传

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

      请问这个问题解决了吗,急

      2018-08-04
      回复
    • 灵芝
      灵芝
      2018-08-06回复Mason

      你好,这里是因为设置了indicator-class的background:none的


      2018-08-06
      回复
    • Mason
      Mason
      2018-08-09回复灵芝

      我尝试了把background:none 去掉 还是没达到想要的效果

      2018-08-09
      回复
登录 后发表内容