一、前言
项目详情页主要内容需要实现点击展开或收起功能，由于这些内容是后端返回的数据，字数有长右短，那么就要根据文字填充到元素内后的自适应高度去判断是否显示点击展开功能。
如图所示：
图一 在文本内容超长时显示展开或收起功能
image.png
图二 动态计算元素高度，元素高度小于某一特定值时不显示展开或收起
image.png
二、实现过程
2.布局和样式
布局和样式都很简单
2.1 wxml 布局
<view class="wrap">
<view class="content-wrap">
<view class="content">
</view>
<view class="more" bindtap="open">展开</view>
</view>
</view>
2.2 wxss布局
page {
background: #e5e5e5;
padding: 60rpx 0;
}
.content-wrap {
position: relative;
}
.content {
background: #fff;
font-size: 40rpx;
padding: 10rpx 20rpx;
color: #535353;
line-height: 60rpx;
margin: 30rpx 0 0 0;
text-indent: 60rpx;
}
.more {
position: absolute;
left: 0;
bottom: 0;
width: 100%;
padding-top: 70rpx;
color: #949494;
font-size: 32rpx;
text-align: center;
background: linear-gradient(rgba(255,255,255,0) 0%,#fff 70%);
}
.fold {
height: 580rpx;
overflow: hidden;
}
2.2 绑定数据
在data中声明变量 isOpen 来判断是否展开收起，同时给放文本内容的元素动态添加class，这样就实现点击展开收起功能了
data: {
isOpen: false,
}
// 点击展开或收起
open() {
this.setData({
isOpen: this.data.isOpen ? false : true
})
}
2.3 动态计算元素高度
小程序中提供 wx.createSelectorQuery ，类似jquery中的查询元素，通过这个api获取到元素后，再去获取元素的高度。
data: {
isOpen: false,
isFold: false, // 是否显示'展开' 默认不显示显示
},
onLoad() {
let _that = this; // 一定要先存this，避免在回调中设置data时报错
setTimeout(function() {
let query = wx.createSelectorQuery();
query.select('.content').boundingClientRect();
query.exec(function(rect) {
if (rect[0] === null) {
return
} else if (rect[0].height > 500) { // 自定义一个边界高度
_that.setData({
isFold: true
})
}
})
}, 100)
},
调整wxml中的判断
<view class="wrap">
<view class="content-wrap">
<view class="content {{ isFold ? isOpen ? '' : 'fold' : ''}}">
</view>
<view wx:if="{{isFold}}" class="more" bindtap="open">{{ isOpen ? '收起' : '展开'}}</view>
</view>
</view>
三、总结
总体来说，这个功能很简单，主要是小程序中提供了查询元素的api，具体详情可以查看文档
https://developers.weixin.qq.com/miniprogram/dev/api/wxml/wx.createSelectorQuery.html
