小程序模糊效果,兼容安卓,iOS

/*安卓模糊*/
.wordBlur {
  filter: blur(4px);
}
复制代码
/*iOS 模糊*/
.mcBlur {
  backdrop-filter: blur(3px); 
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  border-radius: 10rpx;
}
复制代码
复制代码
<view wx:if="{{wordItem.intro.length}}" class="wordItem-intro {{wordItem.isMemory ? 'wordBlur' :''}}">

                  <text class="thirdText" wx:for="{{wordItem.qwArr}}"
                                    wx:key='thKey'
                                    decode="{{true}}"
                                    data-item="{{item}}"
                        catchlongpress="onLongPress"
                                    data-text="{{item.text}}"
                                    >{{item.text}}</text>

                  <view class="mcBlur" hidden="{{!wordItem.isMemory}}"></view>
                </view>
复制代码

不需要判断安卓:下面的代码不需要

var sysInfo =  wx.getSystemInfoSync()
    this.setData({
      isAndroid : sysInfo.platform == "android"
    })

 

 

 

posted on   土匪7  阅读(313)  评论(0编辑  收藏  举报

相关博文:
阅读排行:
· TypeScript + Deepseek 打造卜卦网站:技术与玄学的结合
· Manus的开源复刻OpenManus初探
· AI 智能体引爆开源社区「GitHub 热点速览」
· 三行代码完成国际化适配,妙~啊~
· .NET Core 中如何实现缓存的预热?
历史上的今天:
2016-06-06 品牌医生学院,
< 2025年3月 >
23 24 25 26 27 28 1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28 29
30 31 1 2 3 4 5

统计

点击右上角即可分享
微信分享提示