小程序模糊效果,兼容安卓,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 2022-06-06 18:09  土匪7  阅读(300)  评论(0编辑  收藏  举报