在實際的開發中,疑或是頁面的預覽中,或多或少都碰到過這樣的情景,那就是文本的折疊與展開!近期在做一個項目，也遇到此情況，就將此順便總結下來~

?

一、先上效果

?

?

二、源碼

<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中文本过长-实现折叠与展开效果的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。