小程序
小游戏
企业微信
微信支付
扫描小程序码分享
使用picker-view的时候 使用mask-class 控制样式,加了background就直接把所有内容都遮住了
4 个回答
加粗
标红
插入代码
插入链接
插入图片
上传视频
给select-mask加个z-index: -1;试试。
你好,麻烦通过点击下方“反馈信息”按钮,提供出现问题的。
设置 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 来确保这个 伪类层不会被点击。(当然,并没有在多种机型上测试过,鬼知道会不会有什么坑。)
找到了一个解决办法,可以判断当前year和当前item相等的时候给当前元素加上一个class
涉及滚动选择的时候,change的触发是延时的,这个时候,class的更新会变慢很多
对,就是很慢,你有想到好的办法了吗
你好,麻烦提供相关的代码片段(https://developers.weixin.qq.com/miniprogram/dev/devtools/minicode.html),方便定位问题
已上传
请问这个问题解决了吗,急
你好,这里是因为设置了indicator-class的background:none的
我尝试了把background:none 去掉 还是没达到想要的效果
关注后,可在微信内接收相应的重要提醒。
请使用微信扫描二维码关注 “微信开放社区” 公众号
给select-mask加个z-index: -1;试试。
设置 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 来确保这个 伪类层不会被点击。(当然,并没有在多种机型上测试过,鬼知道会不会有什么坑。)
找到了一个解决办法,可以判断当前year和当前item相等的时候给当前元素加上一个class
涉及滚动选择的时候,change的触发是延时的,这个时候,class的更新会变慢很多
对,就是很慢,你有想到好的办法了吗
你好,麻烦提供相关的代码片段(https://developers.weixin.qq.com/miniprogram/dev/devtools/minicode.html),方便定位问题
已上传
请问这个问题解决了吗,急
你好,这里是因为设置了indicator-class的background:none的
我尝试了把background:none 去掉 还是没达到想要的效果