[每天进步一点点~] uni-app css 实现多行文本溢出超过指定行数和高度 展开&收起功能 和 折叠面板（展开一项、其他项收起）...

最新推荐文章于 2024-09-04 07:11:11 发布
最新推荐文章于 2024-09-04 07:11:11 发布
阅读量1.9k 收藏 15
点赞数 2
分类专栏： uni-app开发学习和总结 文章标签： html vue css3 javascript 小程序
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/DarlingYL/article/details/114525497
版权

uView 展开收起 折叠面板 前端开发 Vue.js
关键词由CSDN通过智能技术生成

1.文本 展开收起

效果图：

收起时效果
展开时效果

使用的uView插件，用到里面的图标
代码：

<template>
    <view class="">
        <view>
            <view class="express">
                <view class="info">
                    <view :class="{hide:!iSinfo}">{{content}}</view>
                    <view class="tips" @click="showinfo" v-if="!iSinfo">
                        <u-icon name="arrow-down" size="24" color="#0078FF" label="展开" labelPos="left" labelColor="#0078FF" labelSize="24"></u-icon>
                    </view>
                </view>
                <view class="tips hidebtn" @click="showinfo" v-if="iSinfo">
                    <u-icon name="arrow-up" size="24" color="#0078FF" label="收起" labelPos="left" labelColor="#0078FF" labelSize="24"></u-icon>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
    export default {
        data(){
            return {
                iSinfo: false,
                content:  `山不在高，有仙则名。水不在深，有龙则灵。斯是陋室，惟吾德馨。
                        苔痕上阶绿，草色入帘青。谈笑有鸿儒，往来无白丁。可以调素琴，阅金经。
                        无丝竹之乱耳，无案牍之劳形。南阳诸葛庐，西蜀子云亭。孔子云：何陋之有？西蜀子云亭。孔子云：何陋之有？`
            }
        },
        methods:{
            // 全文展开收起
            showinfo() {
                this.iSinfo = !this.iSinfo
            }
        }
    }
</script>

<style lang="scss" scoped>
    // 展开收起
    .express {
        display: flex;
        // width: 100%;
        flex-direction: column;
        background-color: #fff;
        padding: 30rpx;
        
        position: relative;
        .info {
            display: flex;
            flex-direction: column;
            .tips {
                width: 140rpx;
                height: 40rpx;
                display: flex;
                justify-content: flex-end;
                align-items: center;
                background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 50%);
                
                position: absolute;
                bottom: 30rpx;
                right: 30rpx;
            }
        }

    }
    // 收起 按钮
    .hidebtn {
        display: flex;
        flex: 1;
        justify-content: flex-end;
        color: #0078FF;
        font-size: 28rpx;
    }
    // 展开 文字
    .hide {
        word-break: break-word; //换行模式
        overflow: hidden;
        text-overflow: ellipsis; //修剪文字，超过2行显示省略号
        display: -webkit-box;
        -webkit-line-clamp: 2; //此处为上限行数
        -webkit-box-orient: vertical;
    }

</style>

1.2 更新展开收起功能(不超过固定的高度不显示展开和收起，获取到文本的高度)

效果图：

代码：

<template>
    <view class="">
        <view class="video-info u-p u-p-t-0 white-bg">
            <view class="info">
                <view class="f-s-12 c-111" ref="content" id="content" :class="{hide:iSinfo}">{{content}}</view>
                <view class="tips" @click="showinfo" v-if="iSinfo">
                    <u-icon name="arrow-down" size="24" color="#0078FF" label="… 展开" labelPos="left" labelColor="#0078FF" labelSize="24"></u-icon>
                </view>
            </view>
            <view class="tips hidebtn" @click="showinfo2" v-if="iSinfo2">
                <u-icon name="arrow-up" size="24" color="#0078FF" label="收起" labelPos="left" labelColor="#0078FF" labelSize="24"></u-icon>
            </view>
        </view>
    </view>
</template>

<script>
    export default {
        data(){
            return {
                iSinfo: false,
                iSinfo2:false,
                content:  `视频介绍信息展示视频介绍信息展示视频介绍信息展示视频介绍信息展示视频介绍信息展示视频介绍信息展示视频介绍信息展`,
            }
        },
        onShow() {
            
        },
        mounted() { // 必须写在 mounted 里面
            this.test()
        },
        methods: {
            test() {
                const query = uni.createSelectorQuery().in(this);
                query.select('#content').boundingClientRect(data => {
                  console.log("得到布局位置信息" + JSON.stringify(data));
                  console.log("节点离页面顶部的距离为" + data.height);
                  if (data.height > 34) {
                      console.log('高度大于34');
                      this.iSinfo = true
                  }
                }).exec();
            },
// 全文展开收起
            showinfo() {
                // this.iSinfo = !this.iSinfo
                this.isInfo = false;
                this.iSinfo2 = true;
            },
            showinfo2() {
                // this.iSinfo = !this.iSinfo
                this.isInfo = true;
                this.iSinfo2 = false;
            },
        }
    }
</script>

<style lang="scss" scoped>
    // 展开收起
    .video-info {
        display: flex;
        // width: 100%;
        flex-direction: column;
        background-color: #fff;
        padding: 30rpx;
        
        position: relative;
        .info {
            display: flex;
            flex-direction: column;
            .tips {
                width: 126rpx;
                height: 40rpx;
                display: flex;
                justify-content: flex-end;
                align-items: center;
                background: linear-gradient(90deg, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 1) 50%);
                
                position: absolute;
                bottom: 27rpx;
                right: 30rpx;
            }
        }

    }
    // 收起 按钮
    .hidebtn {
        display: flex;
        flex: 1;
        justify-content: flex-end;
        color: #0078FF;
        font-size: 28rpx;
    }
    // 展开 文字
    .hide {
        word-break: break-word; //换行模式
        overflow: hidden;
        text-overflow: ellipsis; //修剪文字，超过2行显示省略号
        display: -webkit-box;
        -webkit-line-clamp: 2; //此处为上限行数
        -webkit-box-orient: vertical;
    }
    
</style>

2. 折叠面板

效果图：

折叠面板效果图

代码：

<template>
    <view class="">
        <view class="u-m-t-40">
            <!-- 列表 -->
            <view class="collapse" v-for="(item,index) in itemList" :key="index">
                <view @click="changeContent(item,index)">
                    <view class="coll-header">
                        <view class="" :style="{color: item.open==true?'blue':'#111'}">{{item.head}}</view>
                        <view class="">
                            <u-icon :name="item.open==true?'arrow-up':'arrow-down'" color="#999999" size="28" :label="item.tips" labelPos="left"></u-icon>
                        </view>
                    </view>
                    <!-- 展开 -->
                    <view class="box">
                        <view class="box-cont" v-if="item.open==true" v-for="(itemMsg,indexMsg) in item.body" :key="indexMsg">
                            <view>
                                <u-icon name="checkbox-mark" size="28" :label="itemMsg.msg"></u-icon>
                            </view>
                            <view class="">
                                <u-icon name="arrow-right" color="#999999" size="28" :label="itemMsg.num" labelPos="left"></u-icon>
                            </view>
                        </view>
                    </view>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
    export default {
        data(){
            return {
                disabled:false,
                show: false,
                itemList: [
                    {
                        head: "一级菜单1",
                        subnum: '12',
                        body: [
                            {
                                msg: '二级菜单1',
                                num: '3',
                            },
                            {
                                msg: '二级菜单2',
                                num: '2',
                            }
                        ],
                        open: false,
                        disabled: true,
                    }, {
                        head: "一级菜单2",
                        subnum: '10',
                        body: [
                            {
                                msg: '二级菜单1',
                                num: '3',
                            },
                            {
                                msg: '二级菜单2',
                                num: '2',
                            }
                        ],
                        open: false,
                    }, {
                        head: "一级菜单3",
                        subnum: '7',
                        body: [
                            {
                                msg: '二级菜单1',
                                num: '3',
                            },
                            {
                                msg: '二级菜单2',
                                num: '2',
                            }
                        ],
                        open: false,
                    },
                ],
            
            }
        },
        methods:{
            changeContent(item,index) {
                this.itemList.forEach(i => {
                    if (i.open !== this.itemList[index].open) {
                        i.open = false;
                    }
                })
                item.open = !item.open
            }
        }
    }
</script>

<style lang="scss" scoped>
    // 折叠面板
    .collapse {
        padding: 0 36rpx;
    }
    
    .coll-header {
        display: flex;
        height: 140rpx;
        align-items: center;
        justify-content: space-between;
    }
    
    .box {
        overflow: hidden;
        transition: all 0.3;
        border-bottom: 1px solid #F9F9F9;
    }

    .box-cont {
        display: flex;
        justify-content: space-between;
        margin-bottom: 50rpx;
    }
    .box-cont:last-child{
        margin-bottom:20rpx;
    }
        
</style>
拾一九
关注
专栏目录
uni-app - 文本展开 / 收起折叠功能，支持自定义样式（当文本内容超出规定行数后，展开收起折叠的功能）兼容 H5 / App / 小程序且易用更容易修改的插件组件源码，超详细的示例代码及注释
王佳斌
11-25 4761
uniapp实现文本的展开与收起功能，uniapp 展开全部和收起，uniapp里文本的展开与收起，uniapp中文本内容超出规定行数后展开收起的处理，UNIAPP兼容h5、微信小程序多行文本展开或收起，uni-app中，文字超出隐藏并显示省略号（实现展开、收起全文），uni-app中文本过长-实现折叠与展开效果，中文本内容超出规定行数（字数）后展开收起的处理，超出部分...显示，uniapp适用于uniapp多行文本溢出显示 ... ，多行文本展开或收起，uni-app - 文本展开 / 收起折叠功能，支
uniapp - 全平台兼容的文字文本段落的展开与折叠收起功能，点击展开时文字会全部露出，点击收起时文字仅展示指定行数，溢出的部分采用三个点...隐藏（详细示例源码，一键复制开箱即用）
高级前端工程师
09-27 2172
uniapp网页h5支付宝小程序微信小程序app安卓苹果端，uniapp文字展开与折叠功能示例代码，文字超出隐藏并显示省略号（实现展开、收起全文），uni-app中文本过长-实现折叠与展开效果，中文本内容超出规定行数（字数）后展开收起的处理，超出部分…显示，uniapp适用于uniapp多行文本溢出显示 … ，多行文本展开或收起，uni-app文字超出规定行数时显示展开和收起功能，uniapp网页h5小程序app文本多行溢出省略折叠组件，uniapp中文本内容超出规定行数后展开收起的处理，uni-app -
uniapp中文本内容超出规定行数后展开收起的处理
babyxuqian的博客
11-10 5135
效果图： 话不多说直接上代码 <template> <view class="intro"> <view class="introText"> <span v-if="introduce" ref="text" @click="clickTotal"> {{introduce}} </span> <span v-if='exchangeButton' @click="clickTotal"&g..
如何使用CSS实现一个带有动画效果的折叠面板
最新发布
一个做过前端开发的产品经理，经历过睿智产品的折磨导致脱发之后，励志要翻身"农奴"把歌唱，一边打入敌人内部一边持续提升自己，为我们广大开发同胞谋福祉，坚决抵制睿智产品折磨我们码农兄弟！
09-04 1702
在网页设计中，折叠面板（也称为手风琴面板）是一种常见的组件，它可以帮助节省页面空间，让用户可以根据需要展开或折叠内容。希望您在这里可以感受到一份轻松愉快的氛围，不仅可以获得有趣的内容和知识，也可以畅所欲言、分享您的想法和见解。通过以上步骤和技巧，您可以创建出既美观又实用的折叠面板，提升用户体验的同时也能展示您的前端CSS技能。首先，让我们从一个最简单的折叠面板开始，这里我们将使用HTML和CSS来创建一个单个折叠面板。一个做过前端开发的产品经理，经历过睿智产品的折磨导致脱发之后，励志要翻身农奴把歌唱，
vue Uniapp实现多行文本溢出超过指定行数 展开 收起
W0X0G0C的博客
03-09 8206
<template> <view> <view class="Express"> <view class="info"> <view :class="{hide:!iSinfo}"> vue Uniapp实现多行文本溢出超过指定行数vueUniap实现多行文本溢出超过指定行数vue Uniapp实现多行文...
uniapp实现多行文本溢出超过指定行数 展开 收起
~~~
03-01 1015
【代码】uniapp实现多行文本溢出超过指定行数 展开 收起。
uniapp 文字过长需要展开与收起效果案例
撑起自己半边天
02-17 1061
uniapp 文字过长需要展开与收起效果案例
uni-app vue 展开 收起功能
奋斗在前端的实习生
02-05 1万+
&lt;!-- 展开 收起部分 start--&gt; &lt;view class="contenfont"&gt; &lt;view class="container" v-for="(item,index11) in textfont" :key="index11" :class="fold ? 'fold' : 'unfold'" v-
uni-app - 单行文字和多行文字溢出隐藏显示...（超出容器最大宽度不换行）
王佳斌
12-24 7829
前言 如下图所示，可控制单行或多行溢出处理。 实现 给容器加入以下 css 代码： .text{ display: -webkit-box; /*弹性伸缩盒子模型显示*/ -webkit-box-orient: vertical; /*排列方式*/ -webkit-line-clamp: 1; /*显示文本行数(这里控制多少行隐藏)*/ overflow: hidden; /*溢出隐藏*/ } ...
【uni-app】uni-app实现聊天页面功能（小程序）——布局篇
hanachann的博客
04-11 1万+
在工作中使用uni-app参与开发一个小程序，其中要写一个简单的聊天页面，虽然功能不多（只有一个发送文字的功能），但是其中的细节比较多，也踩过很多坑，特此记录下来。要实现的页面如图所示，该篇主要讲讲如何布局（参考了很多文章之后根据页面需求进行一个整合）。
uni-app text文字长实现单行或多行结尾省略
yyxhzdm的博客
08-18 3093
效果图： 主要是样式：在text样式中添加这三行代码即可 overflow: hidden; white-space: nowrap; text-overflow: ellipsis; 说明： 1.overflow属性：属性规定当内容溢出元素框时发生的事情 2.white-space属性表 3.text-overflow：属性规定当文本溢出包含元素时发生的事情 ...
uni-app实战之社区交友APP（8）搜索列表页和文章详情页开发
CUFEECR的博客
02-02 1204
不同页面的搜索类型不同，通过标识加以区别，搜索页完善搜索类型和占位符；根据不同的搜索类型搜索不同的内容，通过页面传递的搜索类型来实现。帖子详情页配置右上角的菜单按钮，入口是公共列表；使公共列表组件兼容到帖子详情页头部，实现复用，给评论和分享按钮添加点击事件；在详情页实现关注和顶踩功能；给帖子数据增加content和images字段，显示在父组件中；评论输入框参考聊天页输入框，将输入框抽离成组件；评论列表组件使用官方模板；分享功能使用uni-popup组件实现，从底部弹出，封装为组件，实现多种分享接口。
uni-app Vue3文字超出规定行数时显示展开和收起功能
qq_44719598的博客
07-29 3813
uni-app基于Vue3实现文字超出规定行数展开和收起功能，在vue2中也可以实现。可以根据这套代码进行修改为vue2的版本
uniapp简单实现一个不定高展开收缩组件
potati的博客
02-19 1234
#uniapp #微信小程序 #vue3
【文本展开收起】uniapp—实现文本的展开与收起功能
weixin_48596030的博客
10-24 3239
【文本展开收起】uniapp—实现文本的展开与收起功能
vue Uniapp实现多行文本溢出超过指定行数
Vitaliner
12-03 1505
vue Uniapp实现多行文本溢出超过指定行数vueUniap实现多行文本溢出超过指定行数vue Uniapp实现多行文本溢出超过指定行数 展开 收起vue Uniapp实现多行文本溢出超过指定行数 展开 收起vue Uniapp实现多行文本溢出超过指定行数 展开 收起vue Uniapp实现多行文本溢出超过指定行数 展开 收起vue Uniapp实现多行文本溢出超过指定行数 展开 收起vue Uniapp实现多行文本溢出超过指定行数 展开 收起vue Uniapp...
uniapp多行文本展开或收起（兼容h5、微信小程序，其它未测试）
sjp991012的博客
12-05 2995
data() {return {// 企业介绍showAll: true, //控制展开收起lineHeight: 0, //单行文本高度textHeight: 0, //文本高度placeholder: '占位文本',info: {
uni-app中，文字超出隐藏并显示省略号（实现展开、收起全文）
热门推荐
WhyBecause的博客
08-06 3万+
uni-app中，固定宽高，文字超出部分，隐藏并显示省略号。 .topic_cont_text{ padding: 30upx; colof: #999; background: #E1FFFF; max-height: 130upx; overflow: hidden; word-break: break-all; /* break-all(允许在单词内换行。) */...
uniapp——展开和收起
努力、拼搏、奋进
08-10 838
uniapp——展开和收起
uni-app溢出隐藏添加动画
07-27
要在uni-app中实现溢出隐藏时添加动画效果，可以使用CSS的transition属性结合transform属性来实现。以下是一种可能的实现方式： 1. 在需要溢出隐藏的元素上，设置相应的CSS样式： ```css .overflow-hidden { ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值