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

订单多个状态下的报名信息展示：多条时展示滚动条，单条时不显示

Browse Source
This commit is contained in:
wangzimeng 2025-08-06 10:14:15 +08:00
parent 2d17393e1e
commit 53566cdca8
1 changed files with 53 additions and 59 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

112
packageA/my/pendinPayStatus.vue
View File

@ -63,23 +63,27 @@
<image class="icons" src="/static/detail/xiangqing.png"></image>
</view>
</view>
<view style="margin-top: 10rpx;width: 630rpx;height: 240rpx;">
<scroll-view class="signBoxList" scroll-y :show-scrollbar="false" :scroll-with-animation="true"
enable-flex :style="{height: scrollViewHeight + 'rpx'}">
<view class="sign-item" v-for="(item,index) in detailAny.ordercode" :key="index">
<view style="font-size: 28rpx;font-weight: 400;line-height: 28rpx;color: #323232;">
{{item.name}}
</view>
<view
style="font-size: 24rpx;margin-top: 10rpx;font-weight: 400;color: #9c9c9c;line-height: 24rpx;">
{{item.idnum}}
</view>
</view>
<scroll-view class="signBoxList" scroll-y="true" :show-scrollbar="false">
<view class="sign-item" v-for="(item,index) in detailAny.ordercode" :key="index">
<view style="font-size: 28rpx;font-weight: 400;line-height: 28rpx;color: #323232;">{{item.name}}
</view>
<view
style="font-size: 24rpx;margin-top: 10rpx;font-weight: 400;color: #9c9c9c;line-height: 24rpx;">
{{item.idnum}}
</view>
</view>
<!-- <view class="signList">
</scroll-view>
</view>
<!-- <view class="signList">
</view> -->
</scroll-view>
</view>
@ -197,8 +201,13 @@
export default {
computed: {
scrollViewHeight() {
// 假设每条内容高度 80rpx，最小高度 100rpx
return Math.max(this.detailAny.ordercode.length * 80, 100);
// 根据内容数量计算合适的高度
const baseHeight = 80; // 每项基础高度
const minHeight = 100; // 最小高度
const maxHeight = 240; // 最大高度
const calculatedHeight = this.detailAny.ordercode.length * baseHeight;
return Math.min(Math.max(calculatedHeight, minHeight), maxHeight);
},
formattedTimeList() {
return this.timeList.map(item => {
@ -517,12 +526,14 @@
</script>
<style lang="scss" scoped>
/* 微信小程序隐藏滚动条 */
::-webkit-scrollbar {
width: 0;
height: 0;
display: none;
/* 微信小程序特别处理 */
/* #ifdef MP-WEIXIN */
.signBoxList ::-webkit-scrollbar {
display: none !important;
width: 0 !important;
height: 0 !important;
}
/* #endif */
.detail_all {
background-color: #f7f7f7;
@ -734,48 +745,31 @@
align-items: center;
border: none !important;
box-shadow: none !important;
margin-top: 10rpx;
width: 630rpx;
height: 246rpx;
padding-right: 0 !important;
// height: 236rpx;
padding-right: 0 !important;
overflow: hidden;
// overflow-y: auto;
// scrollbar-width: none;/* Firefox */
// -ms-overflow-style: none;/* IE/Edge */
// overflow-clip-margin: content-box;
overflow-y: auto;
-webkit-overflow-scrolling: touch; /* 平滑滚动 */
scrollbar-width: none; /* Firefox */
-ms-overflow-style: none; /* IE/Edge */
&::-webkit-scrollbar {
display: none !important;
width: 0 !important;
height: 0 !important;
}
// &::-webkit-scrollbar {
// display: none !important; /* Chrome/Safari */
// }
// ::v-deep .signBoxList::-webkit-scrollbar {
// display: none !important;
// }
.scroll-view-class .inner-content {
margin: 0;
padding: 0;
/* 避免内容溢出容器 */
box-sizing: border-box;
-webkit-overflow-scrolling: touch;
/* 平滑滚动 */
scrollbar-width: none;
/* Firefox */
-ms-overflow-style: none;
/* 通用隐藏方法 */
::-webkit-scrollbar {
display: none;
width: 0;
height: 0;
color: transparent;
}
.sign-item {
width: 630rpx;
margin-top: 20rpx;
margin-bottom: 20rpx;
}
.sign-item {
width: 630rpx;
margin-top: 20rpx;
margin-bottom: 20rpx;
}
}