微信小程序wxss动态变量的写法

wxss支持变量

• wxml

<view class="bar-left" style='--width--:{{widthview}}%;'>
   <image class="bar-icon" src="https://yokea-new.oss-cn-beijing.aliyuncs.com/xcx/newImages/flashsale/qicon.png"></image>
</view>

• wxss

.bar-left{
  /* width: 100rpx; */
  width: var(--width--);
  background-image: linear-gradient(to right, #2458FF ,  #80B0FF);
  border-radius: 14.5rpx;
  position: relative;
}

• js

 data: {
    widthview: 80,
  },

• 效果图