本文共 935 字，大约阅读时间需要 3 分钟。

之前写过一篇文章介绍了在网页中使用js实现文字的呼吸效果，，但是这种方式里边通过style设置文字样式，在wxml中标签里面的运用是不可行的，因此需要探究一种新的设置方式。

wxml代码

         
     文字呼吸效果 
   

js代码

注意，在上述wxml代码中，通过style="opacity:{

data: {
       breathNum : 1.0  },

之后再书写实现的代码

setTextBreathing: function(cls,e) {
       //使用记录呼吸效果    var transparency = 10;    var reduce = true;  //记录当前做透明度增加或降低操作    setInterval(function(){
         if (reduce === true){
           transparency -= 1;        if (transparency === 0){
               reduce = false;        }      } else if (reduce === false){
             transparency += 1;        if (transparency === 10){
               reduce = true;        }      }      cls._defaultComponent.setData({
           breathNum:transparency/10      })      //通过setData的方式，设置breathNum的值    },200)  },

在onLoad函数中调用之后，就可以完美运行了

onLoad: function () {
      this.setTextBreathing(wx.createSelectorQuery(".get-record"),this) },

转载地址：http://kmlvb.baihongyu.com/