极客观点
项目管理
HarmonyOS
问题描述
swiper-slide想让它根据里面内容的高度自适应，初始的时候高度显示正常，当鼠标放到swiper-slide区域内进行滚动，下面会加载出很大一部分的空白，direction不设置为direction是不会有这个问题的，为啥？
问题出现的环境背景及自己尝试过哪些方法
配置了swiper的autoHeight:true没有效果
相关代码
// 请把代码文本粘贴到下方（请勿用图片代替代码）
html
<div class="main">
<div class="tab">
<div class="item fl" v-for="(tab,index) in tab" :key="tab.key" @click="tabChange(index,tab.key,'tab')">
<span :class="curIndex == index?'cur':''">{{tab.text}}</span>
</div>
</div>
<swiper ref="mySwiper" >
<swiper-slide>
<!-- 手术材料/检验/检查费用 -->
<div class="tab-main">
<div class="tab-left fl">
<div class="item" :class="tab1CurIndex == index?'cur':''" v-for="(item,index) in tab1" :key="item.text" @click="tabChange(index,item.text,'tab1')">
{{item.text}}
</div>
</div>
<div class="tab-right fl">
<div class="title"><img src="../../assets/images/fy.png" alt="">{{tab1Cur}}总计:<span>2657.88元</span></div>
<swiper ref="swiper1" :options="tab1Option" >
<swiper-slide>
<!-- 手术材料 -->
<div class="content">
<table>
<tr>
<td>项目名称</td>
<td>单价（元）</td>
<td>数量（次）</td>
<td>金额（元）</td>
</tr>
<tr v-for="i in 10" :key="i">
<td>血细胞分析</td>
<td>20.00</td>
<td>2</td>
<td>40.00</td>
</tr>
</table>
</div>
</swiper-slide>
<swiper-slide>
<!-- 检查费 -->
<div class="content">
<table>
<tr>
<td>项目名称</td>
<td>单价（元）</td>
<td>数量（次）</td>
<td>金额（元）</td>
</tr>
<tr v-for="i in 10" :key="i">
<td>血浆凝血酶原时间测定(PT）</td>
<td>20.00</td>
<td>2</td>
<td>40.00</td>
</tr>
</table>
</div>
</swiper-slide>
<swiper-slide>
<!-- 化验费 -->
<div class="content">
<table>
<tr>
<td>项目名称</td>
<td>单价（元）</td>
<td>数量（次）</td>
<td>金额（元）</td>
</tr>
<tr v-for="i in 10" :key="i">
<td>活化部分凝血活酶时间测定(AF）</td>
<td>20.00</td>
<td>2</td>
<td>40.00</td>
</tr>
</table>
</div>
</swiper-slide>
<swiper-slide>
<!-- 摄片费 -->
<div class="content">
<table>
<tr>
<td>项目名称</td>
<td>单价（元）</td>
<td>数量（次）</td>
<td>金额（元）</td>
</tr>
<tr v-for="i in 10" :key="i">
<td>血浆纤维蛋白原测定</td>
<td>20.00</td>
<td>2</td>
<td>40.00</td>
</tr>
</table>
</div>
</swiper-slide>
</swiper>
<!-- 总计可以在这里显示，也可以拿到下面每个盒子里面显示，样式不影响，另一个tab切换同理 -->
</div>
</div>
</swiper-slide>
<swiper-slide>
<!-- 药品/输血/输氧费用 -->
<div class="tab-main">
<div class="tab-left fl">
<div class="item" :class="tab2CurIndex == index?'cur':''" v-for="(item,index) in tab2" :key="item.text" @click="tabChange(index,item.text,'tab2')">
{{item.text}}
</div>
</div>
<div class="tab-right tabHeight fl">
<div class="title"><img src="../../assets/images/fy.png" alt="">{{tab2Cur}}总计:<span>2657.88元</span></div>
<swiper ref="swiper2" :options="tab2Option">
<swiper-slide>
<!-- 输血费 -->
<div class="content">
<table>
<tr>
<td>药品名称</td>
<td>规格</td>
<td>单价（元）</td>
<td>数量</td>
<td>金额（元）</td>
</tr>
<tr v-for="i in 10" :key="i">
<td>注射用头孢拉定</td>
<td>1gX1瓶</td>
<td>1.65</td>
<td>56瓶</td>
<td>40.00</td>
</tr>
</table>
</div>
</swiper-slide>
<swiper-slide>
<!-- 输氧费 -->
<div class="content">
<table>
<tr>
<td>药品名称</td>
<td>规格</td>
<td>单价（元）</td>
<td>数量</td>
<td>金额（元）</td>
</tr>
<tr v-for="i in 10" :key="i">
<td>注射用头孢西丁钠 </td>
<td>1gX1瓶</td>
<td>1.65</td>
<td>56瓶</td>
<td>40.00</td>
</tr>
</table>
</div>
</swiper-slide>
<swiper-slide>
<!-- 西药费 -->
<div class="content">
<table>
<tr>
<td>药品名称</td>
<td>规格</td>
<td>单价（元）</td>
<td>数量</td>
<td>金额（元）</td>
</tr>
<tr v-for="i in 10" :key="i">
<td>硫酸庆大酶素注射液</td>
<td>1gX1瓶</td>
<td>1.65</td>
<td>56瓶</td>
<td>40.00</td>
</tr>
</table>
</div>
</swiper-slide>
<swiper-slide>
<!-- 中成药 -->
<div class="content">
<table>
<tr>
<td>药品名称</td>
<td>规格</td>
<td>单价（元）</td>
<td>数量</td>
<td>金额（元）</td>
</tr>
<tr v-for="i in 10" :key="i">
<td>甲硝锉片</td>
<td>1gX1瓶</td>
<td>1.65</td>
<td>56瓶</td>
<td>40.00</td>
</tr>
</table>
</div>
</swiper-slide>
<swiper-slide>
<!-- 中草药 -->
<div class="content">
<table>
<tr>
<td>药品名称</td>
<td>规格</td>
<td>单价（元）</td>
<td>数量</td>
<td>金额（元）</td>
</tr>
<tr v-for="i in 10" :key="i">
<td>维生素C注射液</td>
<td>1gX1瓶</td>
<td>1.65</td>
<td>56瓶</td>
<td>40.00</td>
</tr>
</table>
</div>
</swiper-slide>
</swiper>
</div>
</div>
</swiper-slide>
</swiper>
<mt-tab-container v-model="active" >
<mt-tab-container-item id="tab1">
</mt-tab-container-item>
<mt-tab-container-item id="tab2">
</mt-tab-container-item>
</mt-tab-container>
</div>js代码
export default {
name: 'HelloWorld',
data () {
return {
active:'tab1',
tab:[
{
text:'手术材料/检验/检查费用',
key:'tab1'
},
{
text:'药品/输血/输氧费用',
key:'tab2'
}
],
tab1:[
{
text:'手术材料'
},
{
text:'检查费'
},
{
text:'化验费'
},
{
text:'摄片费'
}
],
tab2:[
{
text:'输血费'
},
{
text:'输氧费'
},
{
text:'西药费'
},
{
text:'中成药'
},
{
text:'中草药'
}
],
curIndex:0,
tab1Cur:'手术材料',
tab2Cur:'输血费',
tab1CurIndex:0,
tab2CurIndex:0,
hosName:'',//医院名称，
tab1Option:{
// direction:'vertical',
autoHeight:true,
observer:true,
observeParents:true,
on:{
init:function(){},
}
},
tab2Option:{
// direction:'vertical',
autoHeight:true,
observer:true,
observeParents:true,
on:{
init:function(){},
}
},
}
},
methods:{
tabChange(index,key,type){
if(type == 'tab') {
this.curIndex = index
this.swiper.slideTo(index,1000,false)
this.active = key
} else if(type == "tab1"){
this.tab1Cur = key
this.swiper1.slideTo(index,1000,false)
} else if(type == "tab2"){
this.tab2Cur = key
this.swiper2.slideTo(index,1000,false)
}
}
},
computed: {
swiper() {
return this.$refs.mySwiper.swiper
},
swiper1(){
return this.$refs.swiper1.swiper
},
swiper2(){
return this.$refs.swiper2.swiper
}
},
mounted() {
// current swiper instance
// 然后你就可以使用当前上下文内的swiper对象去做你想做的事了
this.swiper.slideTo(this.curIndex, 1000, false)
this.swiper1.slideTo(this.tab1Cur, 1000, false)
this.swiper2.slideTo(this.tab2Cur, 1000, false)
// swiper的滑动监听事件，获得当前index
this.swiper.on('slideChange',()=>{
this.curIndex = this.swiper.activeIndex
})
this.swiper1.on('slideChange',()=>{
this.tab1CurIndex = this.swiper1.activeIndex
})
this.swiper2.on('slideChange',()=>{
this.tab2CurIndex = this.swiper2.activeIndex
})
this.$nextTick(()=>{
this.swiper1.direction ='vertical'
})
console.log(this.swiper1)
},
components:{
tips
}
}你期待的结果是什么？实际看到的错误信息又是什么？
把swiper-slide下面的空白去掉，根据里面的内容自适应，
现在的效果如图
你好，我也遇到了这个问题，请问你解决了吗？