<template>
<view class="message-wrap">
<wuc-tab :tab-list="tabList" :textFlex=true :tabCur="TabCur" tab-class="text-center" select-class="text-blue" @change="tabChange"></wuc-tab>
<view class="tool-wrap"></view>
<swiper class="swiper" :current="TabCur" duration="300" @change="swiperChange">
<swiper-item class="swiper-item">
111
</swiper-item>
<swiper-item class="swiper-item">
222
</swiper-item>
<swiper-item class="swiper-item">
333
</swiper-item>
<swiper-item class="swiper-item">
444
</swiper-item>
</swiper>
</view>
</template>
<script>
JS代码不影响就不上了，
</script>
<style scoped>
page, .message-wrap {
width: 100%;
height:100%;
}
.tool-wrap {
width: 100%;
height: 100rpx;
border-bottom: 1rpx dashed #CCCCCC;
display: flex;
box-sizing: border-box;
}
.swiper{
width: 100%;
/ 减去顶部消息栏 减去wutab tab栏 减去tool-wrap 减去底部tabBar /
height: calc(100% - 90rpx - 100rpx );
overflow: hidden;
}
.swiper-item, .swiper-item-con {
width: 100%;
height: 100%;
}
.active {
color: #007AFF;
}
.mes-tabbar {
width: 100%;
height: 100rpx;
display: flex;
justify-content: space-around;
align-items: center;
border-bottom: 1rpx solid #c8c7cc;
box-sizing: border-box;
}
.mes-tabbar-item {
font-size: 28rpx;
}
.list-item {
width: 100%;
max-height: 250rpx;
padding: 20rpx;
box-sizing: border-box;
display: flex;
align-items: center;
border-bottom: 1rpx solid #EEEEEE;
}
.list-check {
width: 50rpx;
text-align: center;
}
.list-item-left {
width: 10rpx;
height: 110rpx;
margin-top: 25rpx;
background-color: red;
}
.list-item-right {
width: calc(100% - 10rpx - 50rpx);
max-height: 190rpx;
padding-left: 30rpx;
box-sizing: border-box;
}
.lir-wrap {
width: 100%;
height: 70rpx;
display: flex;
justify-content: space-between;
align-items: center;
}
.lir-left {
width: 90%;
font-size: 24rpx;
color: #909399;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.lir-right {
width: 12rpx;
height: 12rpx;
background-color: #f35e5a;
border-radius: 50%;
}
.lir-wrap2 {
width: 100%;
max-height: 120rpx;
overflow: auto;
font-size: 26rpx;
line-height: 40rpx;
}
.dcl-tit {
width: 100%;
height: 80rpx;
display: flex;
justify-content: space-around;
align-items: center;
border-bottom: 0.5px solid #EEEEEE;
box-sizing: border-box;
}
.dcl-tit2 {
width: 100%;
min-height: 70rpx;
display: flex;
justify-content: space-around;
align-items: center;
border-bottom: 0.5px solid #EEEEEE;
box-sizing: border-box;
}
.dcl-tit-btn {
line-height: 45rpx;
font-size: 28rpx;
padding: 10rpx 15rpx;
color: #909399;
}
.dcl-tit-btn2 {
font-size: 26rpx;
padding: 10rpx 30rpx;
color: #FFFFFF;
border-radius: 5px;
}
.dcl-tit-left {
width: 60%;
min-height: 70rpx;
line-height: 70rpx;
text-align: center;
font-size: 28rpx;
border-right: 0.5px solid #EEEEEE;
box-sizing: border-box;
padding: 0 20rpx;
}
.dcl-tit-right {
width: 40%;
height: 70rpx;
line-height: 70rpx;
text-align: center;
font-size: 26rpx;
} </style>
海中月是天上月 (作者)
oppo r11 android 7.1试一下，然后我是小米6x miui 11
2020-07-09 17:28
海中月是天上月 (作者)
小米6X android 9
2020-07-09 17:31
jxtian
回复 海中月是天上月: 看看是不是你下面的那堆css造成的，若还有问题提供一个可复现的示例demo
2020-07-09 17:54
海中月是天上月 (作者)
回复 jxtian: CSS 确实用calc计算了高度 ， 本来我复制代码的时候我看格式挺好的， 我还特意整理了下。。。现在看上面乱乱一堆。。。我也很绝望呀。我提供一个demo吧
2020-07-09 18:00
jxtian
回复 海中月是天上月: 可以试试Markdown的代码块，
你的代码,最后明确一下你的问题，是否因为“page { width: 100%; height: 100%; }”的原因2020-07-09 18:33
海中月是天上月 (作者)
回复 jxtian: 是的 page 设置为 height:100%; 根据height 计算swiper 高度 height: calc(100% - 200rpx); 真机内容空白 、 H5正常 ； page不设置 ， swiper高度 使用 height: calc (100vh - 200rpx - 100rpx), 真机正常
2020-07-09 18:42
海中月是天上月 (作者)
回复 jxtian: 问题我已经复现， 上传zip 包给你 测试页面在程序的 我的 -> 关于 页面
apk包安装后内容消失，H5正常
2020-07-09 18:44
海中月是天上月 (作者)
回复 jxtian: 已经在下面回复 传递文件了 页面看具体说明 感谢 。 祝程序员不加班。我下班了~
2020-07-09 18:47