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>
