css样式使用变量

wxss定义变量--varOpacity

page {
  --varOpacity:1
}

.createImg {
  position: fixed;
  bottom: 200rpx;
  width: 362rpx;
  height: 72rpx;
  z-index: 7;
  opacity: var(--varOpacity);
}

在wxml里面设置：

<image style="--varOpacity:{{varOpacity}}" src="https://resource.gximg.cn/d57c1b_7WtBKF5NR4.png" mode="" class="createImg" bindtap="createTap" wx:if="{{isSwipDown}}" />

js里面设置这个变量varOpacity：

 data: {
    varOpacity:1
  },


createTap() {
    this.setData({
      varOpacity:0.5
    })
}

点击蓝色按钮，透明度会发生变化.效果：