哎，最近做项目遇到这个问题了，我用的tabbar组件，里面涉及到swiper的高度没法自适应，没办法只能弃用了，随便写了个先凑合着用下
<view class="newtab">
<view class="newtab-nav">
<view :class="{'selected':tab === 1,'ntabtitle':true}" @click="toTab(1)">公司简介</view>
<view :class="{'selected':tab === 2,'ntabtitle':true}" @click="toTab(2)">联系方式</view>
<view :class="{'selected':tab === 3,'ntabtitle':true}" @click="toTab(3)">建议反馈</view>
</view>
<view v-if="tab === 1">1</view>
<view v-if="tab === 2">2</view>
<view v-if="tab === 3">3</view>
</view>
export default {
data() {
return {
tab: 1,
};
},
methods: {
toTab(index) {
this.tab = index;
}
},
}
10 个回复
hugo_yu - a js lover
swiper{
height:200px
}
swiper-item{
height:200px //这里可以设置比上面高度小（留出大标语位置）或者设置一样大
}
Fair
怎么设置他的高度为自适应？宽度100%，高度根据swiper-item里的图片高度自适应
hugo_yu
绑定style
2018-12-29 18:50
Fair
我绑定的宽带100%，不指定高度，高度又图片自动缩放，但swiper的高度一直是150px
2018-12-29 22:40
王裕会
回复 Fair:问题解决了吗？
2019-01-28 14:47
hugo_yu
回复 Fair: 高度必须指定，我说的绑定style，是先计算图片高度，然后swiper会自动计算，高度要么固定要么计算后调整
2019-04-19 14:52
5***@qq.com
问题解决了吗？我也想选项卡高度自适应
YNNNNNN
解决了吗，我也在做顶部选项卡，list自适应高度，上拉加载的
2019-06-10 17:52
2***@qq.com
问题解决了吗？
淡然如是 - https://www.xyphp.com
哎，最近做项目遇到这个问题了，我用的tabbar组件，里面涉及到swiper的高度没法自适应，没办法只能弃用了，随便写了个先凑合着用下
<view class="newtab">
<view class="newtab-nav">
<view :class="{'selected':tab === 1,'ntabtitle':true}" @click="toTab(1)">公司简介</view>
<view :class="{'selected':tab === 2,'ntabtitle':true}" @click="toTab(2)">联系方式</view>
<view :class="{'selected':tab === 3,'ntabtitle':true}" @click="toTab(3)">建议反馈</view>
</view>
<view v-if="tab === 1">1</view>
<view v-if="tab === 2">2</view>
<view v-if="tab === 3">3</view>
</view>
the_wolf_life - 大前端领航者
可以参考一下
<view class="picture-preview-big" v-if="control.all_img" @tap="control.all_img=!control.all_img">
<swiper indicator-dots="true" autoplay="true" interval="3000" circular="true" duration="500">
<swiper-item v-for="(item, index) in local.bannerimg " v-if="index<5" :key="index">
<image @tap="bannerDetail(item.imgUrl)" :src="item.imgUrl"/>
</swiper-item>
</swiper>
</view>
样式
.picture-preview-big{
width: 100%;
height: 100%;
z-index: 9999;
background: rgba(0,0,0,.8);
position:fixed;
top: 0;
left: 0;
display: flex;
justify-content: center;
align-items: center;
}
.picture-preview-big swiper{
width: 100%;
height: 50%;
}
.picture-preview-big swiper swiper-item{
width: 100%;
height: 100%;
}
.picture-preview-big swiper swiper-item image{
width: 100%;
}
hugo_yu
不推荐，你这种全100%并不比用computed属性配合upx2px好，而且麻烦
2019-06-06 14:40
n***@163.com
还有人吗，挖个坟。。。
我遇到的问题是swiper编译后下面有个div 的class: uni-swiper .uni-swiper-wrapper 设置了position:relative;和height:100%;
导致该div会对照父布局的height，也就是150px；
我是这样解决的：
//自动填充满父布局
swiper {
display:flex;
flex: 1 1 auto;
}
//使用first-child覆盖uni-swiper .uni-swiper-wrapper，将position覆盖为position: absolute;
//或将height:100%干掉也行
swiper :first-child{
position: absolute;
}
1***@163.com
您好 默认高度怎么去掉？
JoneXu - 去阿里的路上
swiper高度自适应这个需求能解？
b***@qq.com
uni-app使用swiper切换页面每个滑块高度自适应
这个问题貌似无解啊.
最开始的需求是做一个TAB滑块切换,开始用自己的方法写好了,后来发现不能左右滑动,就尝试使用swiper组件,结果问题又来了,这个高度没法自定义,而且因为内容动态加载,所以也不能把高度写死.
所以,这个办法放弃吧,还是用土方法好了.
这里想到一个办法就是模拟一下触屏动作,左滑或者右滑多少距离进行TAB切换.
浪费两个小时啊....
好大的一个坑.
zhanle_huang
真的坑 我才用他提供的获取节点api操作都不行 浪费了好几天 本来想看看能不能解决 最终还是解决不了 我也不知道为什么出这个组件的时候不根据里面的内容适应高度而是固定死高度 如果是不想让我们用这个做切换 又不提供其他的，全都自己做，真的累，兼容性还不一定好
2020-11-04 08:53