微信小程序动态设置高度，添加动画等常用操作

获取组件高度

html 复制代码

<view class="content-view" id="target-view">
  <!-- 这里放置撑开高度的内容 -->
  <text>这是一段测试文本，用来撑开 view 的高度。这是一段测试文本，用来撑开 view 的高度。这是一段测试文本，用来撑开 view 的高度。</text>
</view>
<button bindtap="getViewHeight">获取 view 高度</button>

这里在data中声明了一个变量viewHeight 值为0

javascript 复制代码

getViewHeight: function () {
    // 创建一个选择器查询对象
    const query = wx.createSelectorQuery();
    // 选择目标 view 标签
    query.select('#target-view').boundingClientRect();
    // 执行查询操作
    query.exec((res) => {
      if (res[0]) {
        // 获取 view 的高度
        const height = res[0].height;
        this.setData({
          viewHeight: height
        });
        console.log('view 的高度为：', height);
      }
    });
  },

当点击按钮的时候，可以在控制台看到组件的高度。

动态绑定样式

上面获取到组件的高度的时候，可以把这个高度绑定给其他组件。

语法如下

html 复制代码

<view style="border: 1px solid red;width: 80%;margin:auto;height: {{viewHeight}}px;" >
 微信小程序动态绑定样式
</view>

也可以把变量的值设置为css样式代码，以字符串的形式绑定给组件。

html 复制代码

<view style="{{myStyle}}" bind:tap="changeStyle">动态设置样式</view>

动态绑定了一个字符串，设置点击事件，点击修改字符串

javascript 复制代码

 data: {
    myStyle:'color:red;font-size:50px;'
  },

 changeStyle(){
    this.setData({
      myStyle:'color:blue;font-size:70px;'
    })
  }

效果：点击前

点击后

动态绑定类名

css 复制代码

.box1{
  background-color:orange;
}
.box2{
  background-color:palevioletred;
}

html 复制代码

<view class="{{myClass}}" bind:tap="changeClass">绑定类名</view>

javascript 复制代码

myClass:'box1',
 changeClass(){
    this.setData({
      myClass:'box2'
    })
  },

效果：

点击后

添加动画

javascript 复制代码

<view class="box" animation="{{animationData}}" bindtap="startAnimation"></view> 

//css 样式很简单就不拆开写了
.box {
  width: 100px;
  height: 100px;
  background-color: lightblue;
}

javascript 复制代码

 //在data中声明一个对象
 animationData: {},
 //方法
  startAnimation() {
    // 创建一个动画实例
    var animation = wx.createAnimation({
      duration: 1000, // 动画持续时间，单位 ms
      timingFunction: 'ease', // 动画的时间曲线
    })
    // 调用动画实例的方法来设置动画属性
    animation.translateX(200).rotate(360).step()
    // 将动画实例赋值给 data 中的 animationData
    this.setData({
      animationData: animation.export()
    })
  },

点击组件，组件会旋转移动。直接给组件加上带有动画的类名和浏览器环境一样的，这里就不赘述了。在微信小程序中主要使用wx.createAnimation来实现。这两者区别 JavaScript 创建动画实例可以在运行时动态控制动画，而使用 CSS 动画则更适合静态的、预定义的动画效果。

动态添加类名/移除类名

添加类名和动态绑定类名相似，也是通过去修改变量的值来实现的。

html 复制代码

<view class="box1 {{box3}}" bind:tap="addClass" >额外添加类名</view>
.box1{
  background-color:orange;
}
.box3{
  font-size: 60px;
}

javascript 复制代码

 box3:'',
 addClass(){
   this.setData({
     box3:'box3'
   })
  },

效果

点击触发事件

移除类名

html 复制代码

<view class="box1 {{box3}}" bind:tap="addClass" >额外添加类名</view>
<button bind:tap="removeBox3">移除box3的样式</button>
.box1{
  background-color:orange;
}
.box3{
  font-size: 60px;
}

javascript 复制代码

box3:'box3',
 removeBox3(){
    this.setData({
      box3:''
    })
  },

效果：

点击按钮移除box3的样式，就是把box3设置为空字符串

end