uniapp中实现文本行数/高度超过隐藏就并显示更多按钮

官网 https://uniapp.dcloud.io/api/ui/nodes-info?id=createselectorquery

• uni.createSelectorQuery()返回一个 SelectorQuery 对象实例。可以在这个实例上使用 select 等方法选择节点，并使用 boundingClientRect 等方法选择需要查询的信息。

• selectorQuery.selectAll(selector)在当前页面下选择匹配选择器 selector 的所有节点，返回一个 NodesRef 对象实例，可以用于获取节点信息。

<template>
    <view class="problem">
        <view class="card-box" v-for="(item,index) in list" :key="index">
            <view class="title mb20">
                Q{{index+1}}: {{item.title}}
            </view>
            <!-- 文本超过360rpx时溢出隐藏，并显示展开按钮 -->
            <view class="desc" ref="desc" style="white-space:pre-wrap;">
                <view class="inline" :style="{
                'height': elData[index].height >= 360?'360rpx':'auto',
                'transition': 'height .2s'
                }">
                    {{item.content}}
                </view>
                <view class="more row-center mt20" v-if="elData[index].height >= 360" @click="elData[index].height = 0">
                    展开 <u-icon name="arrow-down" color="#999"></u-icon>
                </view>
                <view class="more row-center mt20" v-if="elData[index].height == 0" @click="elData[index].height = 370">
                    收起 <u-icon name="arrow-up" color="#999"></u-icon>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
    import {
        problem
    } from '@/api/user.js'

    export default {
        data() {
            return {
                // 多个文本数据列表
                list: [],
                // 每个文本的信息
                elData: [],
            }
        },

        mounted() {
            this.getProblem()
        },

        methods: {
            getProblem() {
                // 获取文本信息的api接口 problem
                problem().then(res => {
                    this.list = res.data.list;
                    
                    // 等待渲染完成在获取页面元素信息
                    this.$nextTick(() => {
                        
                        let el = uni.createSelectorQuery().selectAll('.desc')
                        
                        el.boundingClientRect(res => {
                            console.log(res)
                            // 拿到类名为 desc 的全部元素信息
                            this.elData = res;
                        }).exec()
                    })
                })
            },

        }
    }
</script>

<style>
    page {
        background-color: #FFFFFF;
    }

    .problem {
        padding: 0 30rpx;
    }

    .card-box {
        box-shadow: 0 0 20rpx rgba(0, 0, 0, 0.1);
        margin: 40rpx 0 0 0;
        border-radius: 10rpx;
        padding: 40rpx 30rpx 0 30rpx;
    }

    .title {
        font-weight: 500;
        font-size: 30rpx;
        color: #101010;
    }

    .desc {
        font-weight: 300;
        font-size: 26rpx;
        color: #333;
        padding-bottom: 30rpx;
    }

    .desc .inline {
        overflow: hidden;
    }

    .open {
        color: #999;
        font-weight: 300;
        background-color: #FFFFFF;
        padding: 0 20rpx 35rpx;
    }
</style>

• transition过渡效果

transition: 1s; // 过渡效果时间
transition: width 1s ,height 2s ,background 3s; // 宽度1s完成变化，高度2s完成变化，背景色3s完成变化