zoukankan      html  css  js  c++  java
  • uni-app swiper设置自定义高度

    话不多少先上图,


    大家可以看到图片中红色区域是头部区域,黄色区域则是我们要滑动的区域。

          大家可以在uni-app官网上看到swiper高度是默认100%,而swiper-item则是要有固定宽高的,要的效果是什么呢?

    1.点击tab可以切换黄色区域视图

    2.滑动黄色区域改变视图,支持横向滑动以及纵向滑动

    我的思路:因为swiper是要固定高度的,它并不会因为内容而自动撑开,那么我的想法呢就是,1.给swiper一个父元素,父元素设置自适应高度,也就是黄色区域的高度,然后动态赋值给swiper,

    1.先考虑整个视图的高度,以及布局,我是把他分为两大块,也就是红色区域以及黄色区域,用flex布局,让红色区域固定高度,黄色区域自动撑满全屏。

    注意:当然也可以使用定位的方法,计算出红色区域的高度然后黄色区域设置定位就可以啦,因为我们要的布局方式是黄色区域超出范围后可以上下滑动。

    上代码:


    home是整个页面的盒子,footer是黄色区域的盒子,给home设置flex上下排列,footer设置flex

    不会flex弹性盒子布局的小伙伴可以问度娘。

    2.这个时候你会发现你设置完成之后还是无法生效的,这是因为你的最外层盒子的高度并没有改变,这个时候我们就要动态设置最外层盒子的高度了。

    我的实现思路是:获取手机屏幕高度,然后赋值给最外层盒子,也就是上边的home,这个时候就会撑满全屏,当然也会根据屏幕的大小自动改变的。

    我用的方法呢是uni-app 里边的一个原生方法  uni.getSystemInfo()这个方法呢可以获取手机的基本信息,给大家看下所有信息。


    大家可以看到里边有两个高度,一个是屏幕高度,一个是可视区域高度,我们使用第二个

    得到手机可视区域后赋值给home这个时候布局就会生效,

    3.在footer,也就是黄色区域自动撑满之后,我们就可以获得到黄色区域的高度,当然使用uni-app提供的方法uni.createSelectorQuery().select('.footer'); //获取某个元素的信息,然后动态赋值给swiper,这个时候swiper就会撑满黄色区域,当然我们结合scroll-view就可以实现上下滑动,以及左右滑动的效果了。

    给大家附上完整代码:

    html:


    千万不要忘记给scroll-view设置scroll-y滚动方向,不然你设置成功也不会上下滑动的

    js:


     

    css:


     

    好了,差不多就是这么多了,当然方法比较笨,自己也是菜鸟一枚,不过官网也没有明确给出解决办法,在这里给大家分享出来,如果大家有什么不懂的以及要指正的欢迎大家留言,希望可以给大家帮助。

  • 相关阅读:
    cf B. Sereja and Suffixes
    cf E. Dima and Magic Guitar
    cf D. Dima and Trap Graph
    cf C. Dima and Salad
    最短路径问题(floyd)
    Drainage Ditches(网络流(EK算法))
    图结构练习—BFSDFS—判断可达性(BFS)
    Sorting It All Out(拓扑排序)
    Power Network(最大流(EK算法))
    Labeling Balls(拓扑)
  • 原文地址:https://www.cnblogs.com/yushihao/p/11730627.html
Copyright © 2011-2022 走看看