美文网首页
小程序动态改变字体颜色

小程序动态改变字体颜色

作者: Camille宝妹 | 来源:发表于2017-07-27 09:39 被阅读0次

    因为小程序里面没有DOM操作,所以不能像JS或者jq一样,一两行代码切换类
    下面教大家一个简单的方法在小程序中动态改变字体的颜色

    方法1:

    • wxml中:
    <view class="classname" bindtap="changeColor" style="color:{{color}}">改变颜色</view>  /*创建一个view标签然后添加bindtap事件*/
    
    • js中:
    Page({
        changeColor:function(){
          var color = this.data.color == "red"?"green":"red";
          this.setData({
            color:color
          })
        }
    })
    

    方法2:

    • wxml中:
    <view style="color:{{color}};">我会变色</view>
     <button bindtap="clickRed">变红</button>
     <button bindtap="clickgreen">变绿</button>
    
    • js中:
    Page({
       data:{
           color:"red"
        }
       clickRed: function () {
         this.setData({
          color: "red"
         })
       },
       clickgreen: function () {
         this.setData({
           color: "green"
         })
       }
    })
    

    相关文章

      网友评论

          本文标题:小程序动态改变字体颜色

          本文链接:https://www.haomeiwen.com/subject/vinakxtx.html