uView
uView copied to clipboard
umicro
让u-collapse-item支持动态高度并解决小程序上样式不准确的问题
我在u-collapse-item放了一些表单项u-form-item，实际使用时存在以下问题：
- 在H5下表现正常，但在微信小程序里，展开后的高度总是会大一些，使底部出现了大段空白。与#435 类似。
- 由于表单元素带校验，验证失败时会出现错误信息，因此高度会增加，导致看不到底部元素。
从u-collapse-item源码中看到， 问题1的直接原因是nextTick里执行的$uGetRect尝试获取内部元素高度，在小程序中可能因为时机等关系，无法获得正确的高度。 问题2的原因则是因为u-collapse-item写死了元素高度，无法感知内部元素变化，只能笨拙地手动刷新。
#290 这个PR的做法是不太恰当的，看似展开收缩正常，实际上没有过渡动画了，因为height值为auto时，transition不会起作用。
以下方案可以一次性解决这两个问题：
- 移除init里的高度监听代码以及queryRect方法。
- 监听isShow：
isShow (val) {
// 查询内容高度
// $uGetRect为uView自带的节点查询简化方法，详见文档介绍：https://www.uviewui.com/js/getRect.html
// 组件内部一般用this.$uGetRect，对外的为this.$u.getRect，二者功能一致，名称不同
this.$uGetRect('#' + this.elId).then(res => {
if (val) {
this.height = res.height + 'px';
this.$timer = setTimeout(() => {
this.height = 'auto'
}, 300)
} else {
this.height = res.height + 'px';
this.$nextTick(() => {
this.height = 0
})
}
})
},
里面用到了定时器，为了稳妥，销毁组件前销毁定时器：
beforeDestroy () {
clearTimeout(this.$timer)
},
- 修改样式监听： 将
<view class="u-collapse-body" :style="[{
height: isShow ? height + 'px' : '0'
}]">
改为
<view class="u-collapse-body" :style="[{
height: height
}]">
大致思路如下：
不再在组件初始化时获取内部元素高度，而是在折叠开始前获取。
这样可以确保获得的高度正确，并且折叠前的任意高度变化都不会对其有所影响。
进行展开时，在过渡动画结束后将高度重置为auto，使内部元素可以随意改变高度。（理论上应该用更精确的钩子，这里省事用了与transition一致的0.3s）
进行收缩时，先将高度设置为之前获得的真实值，再改为0。（原因前面说过了，高度auto时不会有过渡动画）
当前版本直接复制以下代码替换u-collapse-item.vue即可：
<template>
<view class="u-collapse-item" :style="[itemStyle]">
<view :hover-stay-time="200" class="u-collapse-head" @tap.stop="headClick" :hover-class="hoverClass" :style="[headStyle]">
<block v-if="!$slots['title-all']">
<view v-if="!$slots['title']" class="u-collapse-title u-line-1" :style="[{ textAlign: align ? align : 'left' },
isShow && activeStyle && !arrow ? activeStyle : '']">
{{ title }}
</view>
<slot v-else name="title" />
<view class="u-icon-wrap">
<u-icon v-if="arrow" :color="arrowColor" :class="{ 'u-arrow-down-icon-active': isShow }"
class="u-arrow-down-icon" name="arrow-down"></u-icon>
</view>
</block>
<slot v-else name="title-all" />
</view>
<view class="u-collapse-body" :style="[{
height: height
}]">
<view class="u-collapse-content" :id="elId" :style="[bodyStyle]">
<slot></slot>
</view>
</view>
</view>
</template>
<script>
/**
* collapseItem 手风琴Item
* @description 通过折叠面板收纳内容区域（搭配u-collapse使用）
* @tutorial https://www.uviewui.com/components/collapse.html
* @property {String} title 面板标题
* @property {String Number} index 主要用于事件的回调，标识那个Item被点击
* @property {Boolean} disabled 面板是否可以打开或收起（默认false）
* @property {Boolean} open 设置某个面板的初始状态是否打开（默认false）
* @property {String Number} name 唯一标识符，如不设置，默认用当前collapse-item的索引值
* @property {String} align 标题的对齐方式（默认left）
* @property {Object} active-style 不显示箭头时，可以添加当前选择的collapse-item活动样式，对象形式
* @event {Function} change 某个item被打开或者收起时触发
* @example <u-collapse-item :title="item.head" v-for="(item, index) in itemList" :key="index">{{item.body}}</u-collapse-item>
*/
export default {
name: "u-collapse-item",
props: {
// 标题
title: {
type: String,
default: ''
},
// 标题的对齐方式
align: {
type: String,
default: 'left'
},
// 是否可以点击收起
disabled: {
type: Boolean,
default: false
},
// collapse显示与否
open: {
type: Boolean,
default: false
},
// 唯一标识符
name: {
type: [Number, String],
default: ''
},
//活动样式
activeStyle: {
type: Object,
default () {
return {}
}
},
// 标识当前为第几个
index: {
type: [String, Number],
default: ''
}
},
data() {
return {
isShow: false,
elId: this.$u.guid(),
height: 0, // body内容的高度
headStyle: {}, // 头部样式，对象形式
bodyStyle: {}, // 主体部分样式
itemStyle: {}, // 每个item的整体样式
arrowColor: '', // 箭头的颜色
hoverClass: '', // 头部按下时的效果样式类
arrow: true, // 是否显示右侧箭头
};
},
watch: {
open(val) {
this.isShow = val;
},
isShow (val) {
// 查询内容高度
// $uGetRect为uView自带的节点查询简化方法，详见文档介绍：https://www.uviewui.com/js/getRect.html
// 组件内部一般用this.$uGetRect，对外的为this.$u.getRect，二者功能一致，名称不同
this.$uGetRect('#' + this.elId).then(res => {
if (val) {
this.height = res.height + 'px';
this.$timer = setTimeout(() => {
this.height = 'auto'
}, 300)
} else {
this.height = res.height + 'px';
this.$nextTick(() => {
this.height = 0
})
}
})
},
},
beforeDestroy () {
clearTimeout(this.$timer)
},
created() {
this.parent = false;
// 获取u-collapse的信息，放在u-collapse是为了方便，不用每个u-collapse-item写一遍
this.isShow = this.open;
},
methods: {
// 异步获取内容，或者动态修改了内容时，需要重新初始化
init() {
this.parent = this.$u.$parent.call(this, 'u-collapse');
if(this.parent) {
this.nameSync = this.name ? this.name : this.parent.childrens.length;
this.parent.childrens.push(this);
this.headStyle = this.parent.headStyle;
this.bodyStyle = this.parent.bodyStyle;
this.arrowColor = this.parent.arrowColor;
this.hoverClass = this.parent.hoverClass;
this.arrow = this.parent.arrow;
this.itemStyle = this.parent.itemStyle;
}
},
// 点击collapsehead头部
headClick() {
if (this.disabled) return;
if (this.parent && this.parent.accordion == true) {
this.parent.childrens.map(val => {
// 自身不设置为false，因为后面有this.isShow = !this.isShow;处理了
if (this != val) {
val.isShow = false;
}
});
}
this.isShow = !this.isShow;
// 触发本组件的事件
this.$emit('change', {
index: this.index,
show: this.isShow
})
// 只有在打开时才发出事件
if (this.isShow) this.parent && this.parent.onChange();
this.$forceUpdate();
},
},
mounted() {
this.init();
}
};
</script>
<style lang="scss" scoped>
@import "../../libs/css/style.components.scss";
.u-collapse-head {
position: relative;
@include vue-flex;
justify-content: space-between;
align-items: center;
color: $u-main-color;
font-size: 30rpx;
line-height: 1;
padding: 24rpx 0;
text-align: left;
}
.u-collapse-title {
flex: 1;
overflow: hidden;
}
.u-arrow-down-icon {
transition: all 0.3s;
margin-right: 20rpx;
margin-left: 14rpx;
}
.u-arrow-down-icon-active {
transform: rotate(180deg);
transform-origin: center center;
}
.u-collapse-body {
overflow: hidden;
transition: all 0.3s;
}
.u-collapse-content {
overflow: hidden;
font-size: 28rpx;
color: $u-tips-color;
text-align: left;
}
</style>
这个思路很好，也先这样解决了，话说官方是准备放弃 1.0 了吗
不用修改源码，在外层加个v-if判断让它重新加载高度就会重新计算了，折叠面板这种不显示的情况只是在弹窗这种组件有问题
<u-popup v-model="industryTypeShow" mode="center" width="80%" border-radius="15" :closeable="true" :mask-close-able="false" class="industryType"> <view style="padding: 60rpx;" v-if="industryTypeShow"> <u-collapse> <u-collapse-item :title="item.head" v-for="(item, index) in itemList" :key="index"> {{item.body}} </u-collapse-item> </u-collapse> </view> </u-popup>
