例如产品给了我们个需求需要点击一次按钮来使得view的高度增加10px
在html开发中很好实现，但是在uniapp开发app的时候发现并不能通过document.getElementById("")来指定。那么该怎么实现呢？往下看。
1.先搭建页面
嗯~我知道很丑，但就酱紫。Ծ‸Ծ
2.重点！！！改造代码，将vHeight放入的style标签中。
注意看改造后的style
嗯~改造完成，试一下效果。
确实生效了。
总结一下
js中动态修改css样式，需要先定义好要修改的变量，注意style的书写格式
1.style前面需要加 ： 号
2.style 引号中需要添加 {} 号
3.不同样式用 ， 号分割
4.不同属性用 ‘’ 单引号（取决于最外层符号）
5.变量是否需要单位，如果需要记得添加上单位。
动态style格式如下所示。
:style="{'height':vHeight + 'px', 'background':'#FF9900'}"
1
整体Demo代码：
没有base_body的属性的需要查看我上一篇文章，全局引入css
<template>
<view class="base_body">
<view :style="{'height':vHeight + 'px', 'background':'#FF9900'}"> 我是view1 </view>
<!-- 按钮位于屏幕底部 -->
<button type="warn" @click="addPX()" style="position: absolute; bottom: 0px; width: 100%;">view1高度增加10px</button>
</view>
</template>
<script>
export default {
data() {
return {
vHeight:20, // view1的默认高度a
}
},
onLoad() {
},
methods: {
/**
* 增加View1的高度
*/
addPX() {
this.vHeight +=10; // 每次点击View1的高度增加10
console.log("当前View的高度：",this.vHeight + "px");
},
}
}
</script>
<style>
</style>
原文链接：https://blog.csdn.net/m0_37792384/article/details/118786602
