微信小程序 JS动态修改样式

4,305 阅读1分钟


index.wxml

<view class='page'> 
   <view class='cont' style="background:{{background}};color:{{color}};height:{{height}}">属性改变</view>  
   <button bindtap='tryDriver'>测试</button>
</view>

index.wxss

.page{   
    padding: 30rpx;3 
}
.cont{
    height: 150rpx;6 
    line-height: 150rpx;
    text-align: center;
    background: #fff;
    margin-bottom:50rpx;
    border-radius: 12rpx;
 }
 button{
    background: red;
    color: #fff
 }

index.js


Page({
    data: {}, 
    tryDriver: function(){
      this.setData({ 
          background:'red',
          color:'white', 
          height:'200rpx' 
      })  
}})