小程序
小游戏
企业微信
微信支付
扫描小程序码分享
现在我用swiper做一些tab切换时,swiper的高度固定是150px,但是我的swiper-item里面内容的高度有时不止150px,我设置min-height是没有效果的,但是把swiper的高度设置为一个固定的死数据又不好,所以请官方能否让swiper 的高度变得可以自适应,谢谢!
11 个回答
加粗
标红
插入代码
插入链接
插入图片
上传视频
这种交互很常见。办法是让swiper占满屏幕除tab外剩下的部分,swiper-item里面放纵向的scroll-view。
你好,麻烦通过点击下方“反馈信息”按钮,提供出现问题的。
感谢反馈。这个问题考虑过,但目前我们暂无定论,原因主要是:如果可以自适应,那意味着很可能各个swiper-item的高度并不一致,要么留白要么有滚动条。你想要实现的效果是怎样的呢?
< swiper wx:for='{{array}}' style = 'height:{{ heights[index] || 50 }}px' >
< swiper-item >
< view class = 'getThisHeight' >
...这里放自适应内容
</ view >
</ swiper-item >
</ swiper >
justifyHeight: function () {
let that = this
let hs = []
wx.createSelectorQuery().selectAll( '. getThisHeight ' ).boundingClientRect( function (rects) {
rects.forEach((v, i) => {
hs[i] = v.height
})
that.setData({
heights: hs,
}).exec()
},
@LastLeaf ,实现如图类似的tab切换, 用swiper做tab的一个好处是除了点击上面的选项卡可以切换,还可以滑动下面的swiper-item进行切换,现在比如我的swiper-item里面的高度不固定,而swiper的高度不能自适应就会造成一定的影响,比如我的内容由于swiper的高度较小只能显示一部分。
我现在的解决方案是: 将swiper的高度设置一定的高度,然后给swiper-item设置overflow:scroll就可以实现自适应的效果(swiper-item的内容可以上下滚动展示),但是有一个bug就是你说的,如果和另一个选项卡的内容高度不一样,另一个选项卡就会有竖项的滚动条。
如果这个bug暂时不能解决,对于这种tab切换,我即想点击上面的选项卡进行切换,也想滑动下面的内容进行切换,这种该用什么好的方法解决呢? 谢谢@LastLeaf
官方不支持,可以自己手写轮播图,view标签是支持自适应的
这样做tab切换 , 几个切换页面的 内容 上下滚动式同步 的 ,这个怎么解决呢?谢谢。
嗯嗯 之前试出来了 谢谢
scroll-view的高度必须固定才能滚动,这个不能自动吗?
加style属性,给高度就是屏幕高度减去tab的高度
你是怎么让swiper占满屏幕除tab外剩下的部分的呢?min-height:100%;没用啊
正在加载...
关注后,可在微信内接收相应的重要提醒。
请使用微信扫描二维码关注 “微信开放社区” 公众号
这种交互很常见。办法是让swiper占满屏幕除tab外剩下的部分,swiper-item里面放纵向的scroll-view。
感谢反馈。这个问题考虑过,但目前我们暂无定论,原因主要是:如果可以自适应,那意味着很可能各个swiper-item的高度并不一致,要么留白要么有滚动条。你想要实现的效果是怎样的呢?
< swiper wx:for='{{array}}' style = 'height:{{ heights[index] || 50 }}px' >
< swiper-item >
< view class = 'getThisHeight' >
...这里放自适应内容
</ view >
</ swiper-item >
</ swiper >
justifyHeight: function () {
let that = this
let hs = []
wx.createSelectorQuery().selectAll( '. getThisHeight ' ).boundingClientRect( function (rects) {
rects.forEach((v, i) => {
hs[i] = v.height
})
that.setData({
heights: hs,
})
}).exec()
},
@LastLeaf ,实现如图类似的tab切换, 用swiper做tab的一个好处是除了点击上面的选项卡可以切换,还可以滑动下面的swiper-item进行切换,现在比如我的swiper-item里面的高度不固定,而swiper的高度不能自适应就会造成一定的影响,比如我的内容由于swiper的高度较小只能显示一部分。
我现在的解决方案是: 将swiper的高度设置一定的高度,然后给swiper-item设置overflow:scroll就可以实现自适应的效果(swiper-item的内容可以上下滚动展示),但是有一个bug就是你说的,如果和另一个选项卡的内容高度不一样,另一个选项卡就会有竖项的滚动条。
如果这个bug暂时不能解决,对于这种tab切换,我即想点击上面的选项卡进行切换,也想滑动下面的内容进行切换,这种该用什么好的方法解决呢? 谢谢@LastLeaf
官方不支持,可以自己手写轮播图,view标签是支持自适应的
这样做tab切换 , 几个切换页面的 内容 上下滚动式同步 的 ,这个怎么解决呢?谢谢。
嗯嗯 之前试出来了 谢谢
scroll-view的高度必须固定才能滚动,这个不能自动吗?
加style属性,给高度就是屏幕高度减去tab的高度
你是怎么让swiper占满屏幕除tab外剩下的部分的呢?min-height:100%;没用啊