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>
