wo123/dyqc_hdapp
1
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> <image class="icons" src="/static/detail/xiangqing.png"></image>
</view> </view>
</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"> </scroll-view>
<view class="sign-item" v-for="(item,index) in detailAny.ordercode" :key="index"> </view>
<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;"> <!-- <view class="signList">
{{item.idnum}}
</view>
</view>
<!-- <view class="signList">
</view> --> </view> -->
</scroll-view>
</view> </view>
@ -197,8 +201,13 @@
export default { export default {
computed: { computed: {
scrollViewHeight() { 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() { formattedTimeList() {
return this.timeList.map(item => { return this.timeList.map(item => {
@ -517,12 +526,14 @@
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
/* 微信小程序隐藏滚动条 */ /* 微信小程序特别处理 */
::-webkit-scrollbar { /* #ifdef MP-WEIXIN */
width: 0; .signBoxList ::-webkit-scrollbar {
height: 0; display: none !important;
display: none; width: 0 !important;
height: 0 !important;
} }
/* #endif */
.detail_all { .detail_all {
background-color: #f7f7f7; background-color: #f7f7f7;
@ -734,48 +745,31 @@
align-items: center; align-items: center;
border: none !important; border: none !important;
box-shadow: none !important; box-shadow: none !important;
margin-top: 10rpx;
width: 630rpx; width: 630rpx;
height: 246rpx; // height: 236rpx;
padding-right: 0 !important; padding-right: 0 !important;
overflow: hidden; overflow: hidden;
// overflow-y: auto;
// scrollbar-width: none;/* Firefox */
// -ms-overflow-style: none;/* IE/Edge */
// overflow-clip-margin: content-box;
overflow-y: auto; overflow-y: auto;
-webkit-overflow-scrolling: touch; /* 平滑滚动 */ -webkit-overflow-scrolling: touch;
scrollbar-width: none; /* Firefox */ /* 平滑滚动 */
-ms-overflow-style: none; /* IE/Edge */ scrollbar-width: none;
&::-webkit-scrollbar { /* Firefox */
display: none !important; -ms-overflow-style: none;
width: 0 !important;
height: 0 !important; /* 通用隐藏方法 */
} ::-webkit-scrollbar {
display: none;
// &::-webkit-scrollbar { width: 0;
// display: none !important; /* Chrome/Safari */ height: 0;
// } color: transparent;
// ::v-deep .signBoxList::-webkit-scrollbar {
// display: none !important;
// }
.scroll-view-class .inner-content {
margin: 0;
padding: 0;
/* 避免内容溢出容器 */
box-sizing: border-box;
} }
.sign-item {
width: 630rpx;
.sign-item { margin-top: 20rpx;
width: 630rpx; margin-bottom: 20rpx;
margin-top: 20rpx; }
margin-bottom: 20rpx;
}
} }