uniapp点击 改变元素高度

在 UniApp 中实现点击事件修改元素高度的动态样式变化，可以通过结合 `data` 属性、`methods` 方法以及 `uni.createSelectorQuery()` 来完成。基本思路是通过点击事件触发方法，更新数据状态，并根据新的状态值动态计算和设置目标元素的高度。 ### 实现步骤 1. **定义数据状态**：在 `data` 中定义一个变量来表示当前的高度或者控制展开/收起的状态。 2. **绑定点击事件**：为按钮或触发器绑定点击事件，用于切换状态。 3. **监听状态变化并更新样式**：使用 `watch` 或直接在方法中调用 `uni.createSelectorQuery()` 获取实际高度，并更新对应的数据属性。 4. **动态绑定样式**：将最终的高度值绑定到视图层的内联样式上。 ### 示例代码 #### 模板部分（`.vue` 文件） ```html <template> <view class="container"> <!-- 可变高度的内容区域 --> <view :style="{ height: contentHeight + 'px' }" class="content-box" ref="contentBox" > {{ longText }} </view> <!-- 点击按钮切换高度 --> <button @click="toggleHeight">切换高度</button> </view> </template> ``` #### 脚本逻辑部分 ```javascript <script> export default { data() { return { longText: '这是一个很长的产品描述文本...（此处可以放置任意长度的文本）', isExpanded: false, // 控制是否展开 contentHeight: 0, // 动态计算内容高度 maxHeight: 100 // 默认最大高度为 100px }; }, methods: { toggleHeight() { this.isExpanded = !this.isExpanded; if (this.isExpanded) { // 展开时获取真实高度 const query = uni.createSelectorQuery().in(this).select('.content-box'); query.boundingClientRect(res => { if (res) { this.contentHeight = res.height; // 设置为实际内容高度 } }).exec(); } else { this.contentHeight = this.maxHeight; // 收起时恢复默认最大高度 } } }, mounted() { // 初始化时设置默认高度 this.toggleHeight(); } }; </script> ``` #### 样式部分 ```css <style scoped> .container { padding: 20rpx; } .content-box { max-height: 100px; overflow: hidden; transition: height 0.3s ease-in-out; } </style> ``` ### 关键点说明 - 使用 `uni.createSelectorQuery()` 来获取 DOM 元素的实际高度，确保能够正确读取到渲染后的文本内容高度[^3]。 - 利用 `isExpanded` 控制展开与收起的状态，从而决定显示的高度值[^2]。 - 通过 `transition` 添加动画效果提升用户体验，使高度变化更平滑。 - 如果内容特别长，也可以考虑结合 `@line-clamp` 或者 CSS 多行省略方案进行优化。 ---