uni-app中文本过长-实现折叠与展开效果

在实际的开发中,疑或是页面的预览中,或多或少都碰到过这样的情景,那就是文本的折叠与展开!近期在做一个项目，也遇到此情况，就将此顺便总结下来~

 

一、先上效果

 

 

二、源码

<template><view class="wrap"><!-- --><view class="fload" :class="isFload ? 'hide' : 'show'">散文是一个汉语词汇，拼音是sǎn wén。 一指文采焕发；二指犹行文；三指文体名。散文是一种抒发作者真情实感、 散文是一个汉语词汇，拼音是sǎn wén。一指文采焕发； 二指犹行文；三指文体名。散文是一种抒发作者真情实感、 写作方式灵活的记叙类文学体裁。“散文”一词大概出现在北宋太平...</view><!-- 此处用了iconfont图标，自行处理或换成自己的图标--><text v-if="isFload" class="iconfont upArrow switch" @click="fload"></text><text v-if="!isFload" class="iconfont downArrow switch" @click="fload"></text></view></template><script>export default{data(){return{isFload: true }},methods:{fload(){//改变isFload的状态this.isFload = !this.isFload;}}} </script><style>.wrap{width:700upx;display: flex;font-size:26upx;justify-content: space-between;margin: 0 auto;}.fload{width:600upx;height: auto;display: -webkit-box;word-break: break-all;-webkit-box-orient: vertical;/* 要显示多少行就改变line-clamp的数据,此处折叠起来显示一行*/-webkit-line-clamp: 3;overflow: hidden;text-overflow: ellipsis;margin-right: 40upx;background-color:#F5F5F5;}.hide{display: -webkit-box;}.show{display: block;}</style>

 

小程序中也是类似的思路~

 

 

总结

以上是生活随笔为你收集整理的uni-app中文本过长-实现折叠与展开效果的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。