Skip to content

Commit ca54a72

Browse files
juzi214032juzi214032
committed
fix(Collapse): 修复内容区域动态添加内容后不显示的问题 (#794)
close #794
1 parent 039ea55 commit ca54a72

File tree

9 files changed

+127
-61
lines changed

9 files changed

+127
-61
lines changed

‎dist/collapse-item/index.js‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dist/collapse-item/index.wxml‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
<l-icon class="container-title-icon" wx:if="{{!customTitle}}" style="{{isExpandContent?'transform:rotate(-180deg);':''}}" name="down" size="28" color="{{disable?'#DEE2E6':'#333'}}"></l-icon>
55
<slot name="title"></slot>
66
</view>
7-
<view class="container-body" style="height:{{bodyHeight}}px;transition-duration:{{animationTime}}s">
7+
<view catch:transitionend="onTransitionend" class="container-body" style="height:{{bodyHeight}};transition-duration:{{animationTime}}s">
88
<view class="container-body-wrapper l-body-class">
99
<slot></slot>
1010
</view>

‎dist/collapse/index.js‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎examples/dist/collapse-item/index.js‎

Lines changed: 54 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
1+
import nodeUtil from '../utils/node-util';
2+
13
Component({
24

35
externalClasses: ['l-class', 'l-title-class', 'l-body-class'],
@@ -18,8 +20,8 @@ Component({
1820
* 折叠面板子项自定义id
1921
*/
2022
itemId: {
21-
type:String,
22-
value:'default'
23+
type: String,
24+
value: 'default'
2325
},
2426
/**
2527
* 标题文字
@@ -45,9 +47,9 @@ Component({
4547
/**
4648
* 内容区域展开动画速度
4749
*/
48-
animationTime:{
49-
type:String,
50-
value:'0.3'
50+
animationTime: {
51+
type: String,
52+
value: '0.3'
5153
}
5254
},
5355
data: {
@@ -68,37 +70,68 @@ Component({
6870
/**
6971
* 点击标题
7072
*/
71-
onTapTitle() {
73+
async onTapTitle() {
7274
if (this.data.disable) {
7375
return;
7476
}
7577
let parents = this.getRelationNodes('../collapse/index');
76-
parents[0].onTapCollapseItem(this);
78+
await parents[0].onTapCollapseItem(this);
7779
},
7880

7981
/**
8082
* 折叠内容区
8183
*/
82-
foldContent() {
83-
this.setData({
84-
isExpandContent: false,
85-
bodyHeight: 0
86-
});
84+
async foldContent() {
85+
// 获取 container-body-wrapper 的 css 属性信息
86+
const containerBodyWrapperRect =
87+
await nodeUtil.getNodeRectFromComponent(this, '.container-body-wrapper')
88+
89+
// 这里很重要，先把高度改为固定高度，transition 才会生效
90+
if (this.data.isExpandContent) {
91+
this.setData({
92+
bodyHeight: containerBodyWrapperRect.height + 'px'
93+
})
94+
95+
setTimeout(() => {
96+
this.setData({
97+
isExpandContent: false,
98+
bodyHeight: '0px'
99+
})
100+
}, 20)
101+
} else {
102+
this.setData({
103+
isExpandContent: false,
104+
bodyHeight: '0px'
105+
})
106+
}
107+
108+
87109
},
88110

89111
/**
90112
* 展开内容区
91113
*/
92-
expandContent() {
93-
this.createSelectorQuery()
94-
.select('.container-body-wrapper')
95-
.fields({size: true}, (res) => {
96-
this.setData({
97-
isExpandContent: true,
98-
bodyHeight: res.height
99-
});
114+
async expandContent() {
115+
// 获取 container-body-wrapper 的 css 属性信息
116+
const containerBodyWrapperRect =
117+
await nodeUtil.getNodeRectFromComponent(this, '.container-body-wrapper')
118+
119+
this.setData({
120+
isExpandContent: true,
121+
bodyHeight: containerBodyWrapperRect.height + 'px'
122+
})
123+
},
124+
125+
/**
126+
* 过渡效果结束后，把高度改为 auto
127+
* 不然内容改变时，由于高度固定，内容会显示不全
128+
*/
129+
onTransitionend() {
130+
if (this.data.isExpandContent) {
131+
this.setData({
132+
bodyHeight: 'auto'
100133
})
101-
.exec();
134+
}
102135
}
103136
}
104137
});

‎examples/dist/collapse-item/index.wxml‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@
55
color="{{disable?'#DEE2E6':'#333'}}"></l-icon>
66
<slot name="title"></slot>
77
</view>
8-
<view class="container-body" style="height:{{bodyHeight}}px;transition-duration:{{animationTime}}s">
8+
<view catch:transitionend="onTransitionend" class="container-body" style="height:{{bodyHeight}};transition-duration:{{animationTime}}s">
99
<view class="container-body-wrapper l-body-class">
1010
<slot></slot>
1111
</view>

‎examples/dist/collapse/index.js‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -54,7 +54,7 @@ Component({
5454
}
5555
},
5656
methods: {
57-
updateView() {
57+
async updateView() {
5858
let expandItemId;
5959
if (this.data.type === 'accordion') {
6060
expandItemId = this.data.expandItemId.slice(0, 1);
@@ -67,9 +67,9 @@ Component({
6767
let item = children[i];
6868
let id = item.id ? item.id : i;
6969
if (expandItemId.indexOf(id) > -1 && !item.isExpandContent) {
70-
this.setCollapseItemStatus(item, true);
70+
await this.setCollapseItemStatus(item, true);
7171
} else if (item.isExpandContent || this.data.type === 'accordion') {
72-
this.setCollapseItemStatus(item, false);
72+
await this.setCollapseItemStatus(item, false);
7373
}
7474
}
7575
},
@@ -78,9 +78,9 @@ Component({
7878
* 点击折叠面板子项回调函数
7979
* @param collapseItem
8080
*/
81-
onTapCollapseItem(collapseItem) {
81+
async onTapCollapseItem(collapseItem) {
8282
if (this.data.type === 'accordion') {
83-
this.foldAllExpandItem(collapseItem);
83+
await this.foldAllExpandItem(collapseItem);
8484
}
8585
this.setCollapseItemStatus(collapseItem, !collapseItem.data.isExpandContent);
8686

@@ -94,12 +94,12 @@ Component({
9494
/**
9595
* 设置子组件状态
9696
*/
97-
setCollapseItemStatus(collapseItem, isExpand) {
97+
async setCollapseItemStatus(collapseItem, isExpand) {
9898
if (isExpand) {
9999
collapseItem.expandContent();
100100
this.data._expandItems.push(collapseItem);
101101
} else {
102-
collapseItem.foldContent();
102+
await collapseItem.foldContent();
103103
for (let i = 0; i < this.data._expandItems.length; i++) {
104104
if (this.data._expandItems[i] === collapseItem) {
105105
this.data._expandItems.splice(i, 1);

‎src/collapse-item/index.js‎

Lines changed: 54 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
1+
import nodeUtil from '../utils/node-util';
2+
13
Component({
24

35
externalClasses: ['l-class', 'l-title-class', 'l-body-class'],
@@ -18,8 +20,8 @@ Component({
1820
* 折叠面板子项自定义id
1921
*/
2022
itemId: {
21-
type:String,
22-
value:'default'
23+
type: String,
24+
value: 'default'
2325
},
2426
/**
2527
* 标题文字
@@ -45,9 +47,9 @@ Component({
4547
/**
4648
* 内容区域展开动画速度
4749
*/
48-
animationTime:{
49-
type:String,
50-
value:'0.3'
50+
animationTime: {
51+
type: String,
52+
value: '0.3'
5153
}
5254
},
5355
data: {
@@ -68,37 +70,68 @@ Component({
6870
/**
6971
* 点击标题
7072
*/
71-
onTapTitle() {
73+
async onTapTitle() {
7274
if (this.data.disable) {
7375
return;
7476
}
7577
let parents = this.getRelationNodes('../collapse/index');
76-
parents[0].onTapCollapseItem(this);
78+
await parents[0].onTapCollapseItem(this);
7779
},
7880

7981
/**
8082
* 折叠内容区
8183
*/
82-
foldContent() {
83-
this.setData({
84-
isExpandContent: false,
85-
bodyHeight: 0
86-
});
84+
async foldContent() {
85+
// 获取 container-body-wrapper 的 css 属性信息
86+
const containerBodyWrapperRect =
87+
await nodeUtil.getNodeRectFromComponent(this, '.container-body-wrapper')
88+
89+
// 这里很重要，先把高度改为固定高度，transition 才会生效
90+
if (this.data.isExpandContent) {
91+
this.setData({
92+
bodyHeight: containerBodyWrapperRect.height + 'px'
93+
})
94+
95+
setTimeout(() => {
96+
this.setData({
97+
isExpandContent: false,
98+
bodyHeight: '0px'
99+
})
100+
}, 20)
101+
} else {
102+
this.setData({
103+
isExpandContent: false,
104+
bodyHeight: '0px'
105+
})
106+
}
107+
108+
87109
},
88110

89111
/**
90112
* 展开内容区
91113
*/
92-
expandContent() {
93-
this.createSelectorQuery()
94-
.select('.container-body-wrapper')
95-
.fields({size: true}, (res) => {
96-
this.setData({
97-
isExpandContent: true,
98-
bodyHeight: res.height
99-
});
114+
async expandContent() {
115+
// 获取 container-body-wrapper 的 css 属性信息
116+
const containerBodyWrapperRect =
117+
await nodeUtil.getNodeRectFromComponent(this, '.container-body-wrapper')
118+
119+
this.setData({
120+
isExpandContent: true,
121+
bodyHeight: containerBodyWrapperRect.height + 'px'
122+
})
123+
},
124+
125+
/**
126+
* 过渡效果结束后，把高度改为 auto
127+
* 不然内容改变时，由于高度固定，内容会显示不全
128+
*/
129+
onTransitionend() {
130+
if (this.data.isExpandContent) {
131+
this.setData({
132+
bodyHeight: 'auto'
100133
})
101-
.exec();
134+
}
102135
}
103136
}
104137
});

‎src/collapse-item/index.wxml‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@
55
color="{{disable?'#DEE2E6':'#333'}}"></l-icon>
66
<slot name="title"></slot>
77
</view>
8-
<view class="container-body" style="height:{{bodyHeight}}px;transition-duration:{{animationTime}}s">
8+
<view catch:transitionend="onTransitionend" class="container-body" style="height:{{bodyHeight}};transition-duration:{{animationTime}}s">
99
<view class="container-body-wrapper l-body-class">
1010
<slot></slot>
1111
</view>

‎src/collapse/index.js‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -54,7 +54,7 @@ Component({
5454
}
5555
},
5656
methods: {
57-
updateView() {
57+
async updateView() {
5858
let expandItemId;
5959
if (this.data.type === 'accordion') {
6060
expandItemId = this.data.expandItemId.slice(0, 1);
@@ -67,9 +67,9 @@ Component({
6767
let item = children[i];
6868
let id = item.id ? item.id : i;
6969
if (expandItemId.indexOf(id) > -1 && !item.isExpandContent) {
70-
this.setCollapseItemStatus(item, true);
70+
await this.setCollapseItemStatus(item, true);
7171
} else if (item.isExpandContent || this.data.type === 'accordion') {
72-
this.setCollapseItemStatus(item, false);
72+
await this.setCollapseItemStatus(item, false);
7373
}
7474
}
7575
},
@@ -78,9 +78,9 @@ Component({
7878
* 点击折叠面板子项回调函数
7979
* @param collapseItem
8080
*/
81-
onTapCollapseItem(collapseItem) {
81+
async onTapCollapseItem(collapseItem) {
8282
if (this.data.type === 'accordion') {
83-
this.foldAllExpandItem(collapseItem);
83+
await this.foldAllExpandItem(collapseItem);
8484
}
8585
this.setCollapseItemStatus(collapseItem, !collapseItem.data.isExpandContent);
8686

@@ -94,12 +94,12 @@ Component({
9494
/**
9595
* 设置子组件状态
9696
*/
97-
setCollapseItemStatus(collapseItem, isExpand) {
97+
async setCollapseItemStatus(collapseItem, isExpand) {
9898
if (isExpand) {
9999
collapseItem.expandContent();
100100
this.data._expandItems.push(collapseItem);
101101
} else {
102-
collapseItem.foldContent();
102+
await collapseItem.foldContent();
103103
for (let i = 0; i < this.data._expandItems.length; i++) {
104104
if (this.data._expandItems[i] === collapseItem) {
105105
this.data._expandItems.splice(i, 1);

0 commit comments

Comments
 (0)