wo123/dyqc_hdapp
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

1、首页的活动列表的详情的活动简介的展开和收起

Browse Source 
2、我发布的活动详情的活动简介的展开和收起
This commit is contained in:
wangzimeng 2025-08-01 11:38:56 +08:00
parent 1f8b8b161a
commit d816baa11f
2 changed files with 124 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

64
packageA/center/detail.vue
View File

@ -110,8 +110,7 @@
<image class="icons" src="/static/detail/xiangqing.png"></image>
</span>
</view>
<view class="third-center" :style="{ height: richTextShow ? 'auto' : '300px', overflow: 'hidden',margin: '0 auto',paddingBottom: '0'}">
<!-- <view></view> -->
<!-- <view class="third-center" :style="{ height: richTextShow ? 'auto' : '300px', overflow: 'hidden',margin: '0 auto',paddingBottom: '0'}">
<view class="v_html">
<rich-text style="white-space: pre-line;" :nodes="detail.content"></rich-text>
</view>
@ -126,10 +125,31 @@
position: sticky; bottom: -16px; background: #fff; height: 50rpx;padding: 30rpx 0;">收起
<u-icon name="arrow-up" color="#323232"></u-icon>
</view>
</view> -->
<view class="third-center1" ref="richTextContainer" v-if="!showToggleButtons" style="height: auto;">
<view class="v_html">
<rich-text style="white-space: pre-line;" :nodes="detail.content"></rich-text>
</view>
</view>
<view class="third-center" v-if="showToggleButtons"
:style="{ height: richTextShow ? 'auto' : '300px', overflow: 'hidden', margin: '0 auto', paddingBottom: '0' }"
ref="richTextContainer">
<view class="v_html">
<rich-text style="white-space: pre-line;" :nodes="detail.content"></rich-text>
</view>
<!-- 仅当内容高度超过容器高度时显示展开/收起按钮 -->
<view v-if="!richTextShow" @click="richTextShow = true" style="width: 100%; display: flex; align-items: center; justify-content: center;
position: sticky; bottom: 0; background: #fff; height: 50rpx; padding: 30rpx 0;">
展开
<u-icon name="arrow-down" color="#323232"></u-icon>
</view>
<view v-if="richTextShow" @click="richTextShow = false" style="width: 100%; display: flex; align-items: center; justify-content: center;
position: sticky; bottom: -16px; background: #fff; height: 50rpx; padding: 30rpx 0;">
收起
<u-icon name="arrow-up" color="#323232"></u-icon>
</view>
</view>
<view class="third-center" style="padding-top: 0;">
<image mode="widthFix" class="imgs" v-for="(item, index) in detail.images" :key="index" :src="item">
</image>
@ -369,6 +389,7 @@
data() {
return {
richTextShow: false,
showToggleButtons: false, // 控制是否显示展开/收起按钮
qunShow: false,
height_sw: '580rpx',
style: {
@ -456,8 +477,24 @@
// this.getTime()
this.getShare()
},
mounted() {
this.checkContentHeight();
},
updated() {
this.checkContentHeight();
},
methods: {
checkContentHeight() {
// 使用 uni.createSelectorQuery 获取富文本容器的高度
const query = uni.createSelectorQuery().in(this);
query.select('.v_html').boundingClientRect(data => {
if (data && data.height > 300) { // 300px 是容器的固定高度
this.showToggleButtons = true;
} else {
this.showToggleButtons = false;
}
}).exec();
},
swiperImg(index) {
uni.previewImage({
current: index,
@ -1263,6 +1300,21 @@
width: 690rpx;
}
}
.third-center1 {
padding: 30rpx;
overflow: hidden;
.v_html {
font-size: 34rpx;
line-height: 44rpx;
}
.imgs {
width: 690rpx;
display: block;
}
}
.imgs {
display: block;

69
packageA/center/detailSys.vue
View File

@ -160,13 +160,42 @@
<image class="icons" src="/static/detail/xiangqing.png"></image>
</span>
</view>
<view class="third-center">
<!-- <view class="third-center">
<view class="v_html">
<rich-text style="white-space: pre-line;" :nodes="detail.content"></rich-text>
</view>
<image mode="widthFix" class="imgs" v-for="(item, index) in detail.images" :key="index" :src="item">
</image>
</view> -->
<view class="third-center1" ref="richTextContainer" v-if="!showToggleButtons" style="height: auto;">
<view class="v_html">
<rich-text style="white-space: pre-line;" :nodes="detail.content"></rich-text>
</view>
</view>
<view class="third-center" v-if="showToggleButtons"
:style="{ height: richTextShow ? 'auto' : '300px', overflow: 'hidden', margin: '0 auto', paddingBottom: '0' }"
ref="richTextContainer">
<view class="v_html">
<rich-text style="white-space: pre-line;" :nodes="detail.content"></rich-text>
</view>
<!-- 仅当内容高度超过容器高度时显示展开/收起按钮 -->
<view v-if="!richTextShow" @click="richTextShow = true" style="width: 100%; display: flex; align-items: center; justify-content: center;
position: sticky; bottom: 0; background: #fff; height: 50rpx; padding: 30rpx 0;">
展开
<u-icon name="arrow-down" color="#323232"></u-icon>
</view>
<view v-if="richTextShow" @click="richTextShow = false" style="width: 100%; display: flex; align-items: center; justify-content: center;
position: sticky; bottom: -16px; background: #fff; height: 50rpx; padding: 30rpx 0;">
收起
<u-icon name="arrow-up" color="#323232"></u-icon>
</view>
</view>
<view class="third-center" style="padding-top: 0;">
<image mode="widthFix" class="imgs" v-for="(item, index) in detail.images" :key="index" :src="item">
</image>
</view>
</view>
@ -313,6 +342,8 @@
data() {
return {
richTextShow: false,
showToggleButtons: false, // 控制是否显示展开/收起按钮
style: {
// 字符串的形式
img: 'width: 100%'
@ -395,8 +426,24 @@
this.getPeople()
this.getShare()
},
mounted() {
this.checkContentHeight();
},
updated() {
this.checkContentHeight();
},
methods: {
checkContentHeight() {
// 使用 uni.createSelectorQuery 获取富文本容器的高度
const query = uni.createSelectorQuery().in(this);
query.select('.v_html').boundingClientRect(data => {
if (data && data.height > 300) { // 300px 是容器的固定高度
this.showToggleButtons = true;
} else {
this.showToggleButtons = false;
}
}).exec();
},
swiperImg(index) {
uni.previewImage({
current: index,
@ -767,7 +814,7 @@
}
});
},
close() {
this.type = 0
@ -1184,6 +1231,21 @@
}
}
.third-center1 {
padding: 30rpx;
overflow: hidden;
.v_html {
font-size: 34rpx;
line-height: 44rpx;
}
.imgs {
width: 690rpx;
display: block;
}
}
.third-center-gro {
margin-top: 28rpx;
width: auto;
@ -1691,6 +1753,7 @@
align-items: center;
}
}
.footer-right-no {
margin: 0 auto;
width: 100%;