小程序中使用js定义css变量切换变量

 

<view class="container">
  <view class="my-view" style="{{viewData.style}}">
    <image src="/images/abc.png" mode="widthFix"/>
  </view>
</view>

 

.my-view{
  width: var(--wid);
  height: var(--hgt);
  border-radius: var(--border-radius);
  padding: 10px;
  box-sizing: border-box;
  background-color: var(--bg-color);
  transition: all 0.3s ease-in;
}

.my-view image{
  width: 100%;
  height: 100%;
  border-radius: var(--border-radius);
}

 

 

const myStyle = `
--bg-color:red; 
--border-radius:50%;
--wid:200px;
--hgt:200px;
`;

const chageStyle = `
--bg-color:red; 
--border-radius:50%;
--wid:300px;
--hgt:300px;
`;

Page({
  data: {
    viewData: {
      style: myStyle
    }
  },
  onLoad(){
    setTimeout(() => {
      this.setData({
        'viewData.style': chageStyle
      })
    }, 2000);
  }
})

 

 

 

https://developers.weixin.qq.com/community/develop/article/doc/00068e08ddc440b6c99a5afde51813