1、首页的活动列表的详情的活动简介的展开和收起
2、我发布的活动详情的活动简介的展开和收起
This commit is contained in:
parent
1f8b8b161a
commit
d816baa11f
@ -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;
|
||||
|
@ -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%;
|
||||
|
Loading…
x
Reference in New Issue
Block a user