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

获取组件高度 

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

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

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);}});},

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

 动态绑定样式

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

语法如下

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

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

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

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

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

效果：点击前

点击后

 

动态绑定类名

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

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

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

效果：

点击后

 添加动画

<view class="box" animation="{{animationData}}" bindtap="startAnimation"></view> //css 样式很简单就不拆开写了
.box {width: 100px;height: 100px;background-color: lightblue;
}

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

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

动态添加类名/移除类名

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

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

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

效果

点击触发事件

移除类名

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

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

效果：

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

 end