小程序swiper（tab）高度自适应

迈不过友情╰ 2021-10-19 11:42 428阅读 0赞

swiper高度问题一直困扰我。今天终于有时间来解决一下。因为他的高度不能固定死，写死其他数据展示不完全，不写或者100%，auto都不行。翻了一堆资料也查了很多，最后总结一下。  
1.很多人都说用一种方法。就是高度\*数量，也就是所说的获取数据数组长度，根据数据长度来动态改变每页的长度，因为字号啊什么的在各个手机显示不一定都相同，总感觉不是解决问题的最佳方法。  
2.使用Swiper+scroll-view  
先设置swiper高度

<swiper style="height: { { clientHeight?clientHeight+'px':'auto'}}" class='videoSwiper' current="{ {currentTab}}" duration="200" bindchange="swiperchange"></swiper>

在swiper-item中嵌套一个scroll-view

<swiper-item >
         <scroll-view scroll-y="{ {true}}" style="height: { { clientHeight?clientHeight+'px':'auto'}}" bindscrolltolower="scrollbot">
         </scroll-view>
    </swiper-item >

在js中获取设备可视窗口高度（我是写在onload里的）

onLoad:function(){ 
            var that = this
            wx.getSystemInfo({ 
                success: function (res) { 
                    that.setData({ 
                        clientHeight: res.windowHeight
                    });
                }
            })
        }

切换的js

swiperchange: function (e) { 
            var that = this
            console.log(e.detail.current)
            that.setData({ 
                'currentTab': e.detail.current
            })
        },

发表评论取消回复

表情：

评论列表（有 0 条评论，428人围观）

还没有评论，来说两句吧...

相关阅读

相关总结iframe高度自适应，自适应子页面高度

在网上找了很多iframe的高度自适应，发现很多兼容性都不是很好，于是自己总结了一下。页面html节点上要有 <!DOCTYPE html PUBLIC "-//W3C

怼烎@/ 2022年07月24日 10:07/ 0 赞/ 311 阅读

相关 iframe自适应高度

[JS][]自适应高度，其实就是设置[iframe][]的高度，使其等于内嵌网页的高度，从而看不出来滚动条和嵌套痕迹。对于用户体验和网站美观起着重要作用。如果内容是固定的，

落日映苍穹つ/ 2022年07月15日 15:49/ 0 赞/ 299 阅读

相关 iframe自适应高度

<iframeοnlοad="this.height=this.document.documentElement.scrollHeight"name="reportsFrame

柔光的暖阳◎/ 2022年04月14日 05:20/ 0 赞/ 342 阅读

相关小程序中textarea自适应高度的问题

在学习小程序过程，在textarea的使用上，碰到过两个问题，这里分享一下： -------------------- 一、设置style里的height属性无效解决

我就是我/ 2022年03月22日 04:29/ 0 赞/ 1703 阅读

相关小程序-swiper高度自适应，改变默认高度

swiper高度问题一直困扰我。今天终于有时间来解决一下。因为他的高度不能固定死，写死其他数据展示不完全，不写或者100%，auto都不行。翻了一堆资料也查了很多，最后总结一下

﹏ヽ暗。殇╰゛Y/ 2022年03月16日 15:54/ 0 赞/ 596 阅读

相关小程序图片高度自适应

小程序图片高度自适应 image标签的一个属性：mode=“widthFix” <image src="{ {item.cover}}" class

曾经终败给现在/ 2022年01月10日 02:39/ 0 赞/ 341 阅读

相关小百度小程序轮播图高度自适应

index.swan部分代码 <swiper indicator-dots="true" autoplay="true" style="height:{

迷南。/ 2021年11月04日 15:52/ 0 赞/ 413 阅读

相关小程序swiper（tab）高度自适应

swiper高度问题一直困扰我。今天终于有时间来解决一下。因为他的高度不能固定死，写死其他数据展示不完全，不写或者100%，auto都不行。翻了一堆资料也查了很多，最后总结一下

迈不过友情╰/ 2021年10月19日 11:42/ 0 赞/ 429 阅读

相关高度自适应

开发中遇到一个问题，要求不管在多高的屏幕下，图片(什么都行)到底部的距离都应该和psd一致，flash里面的问题 ![70][] //定义宽度 var psdWidth

约定不等于承诺〃/ 2021年09月16日 06:40/ 0 赞/ 509 阅读

相关 iframe高度自适应

子页面头部是： <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://w

柔光的暖阳◎/ 2021年07月26日 12:30/ 0 赞/ 556 阅读