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:

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

  • 相关阅读:
    [硬件驱动_蓝牙]蓝牙Bluez的编程实现
    二分查找
    LeetCode-35.Search Insert Position
    LeetCode-34.Find First and Last Position of Element in Sorted Array
    LeetCode-704.Binary Search
    剑指offer-最小的k个数
    树的各种遍历
    LeetCode-912.Sort an Array
    排序
    LeetCode-209.Minimum Size Subarray Sum
  • 原文地址:https://www.cnblogs.com/wjlbk/p/12633395.html
Copyright © 2011-2022 走看看