这里的话是想做一个比较常见的左右滑动更改tab的效果,引用了uview-ui中的u-tabs-swiper组件,需要结合swiper组件来使用

先来讲下主体思路:每个tab页(swiper-item)都嵌套在swiper中,swiper-item中在放置一个scroll-view,实现超出部分滑动;即让swiper、scroll-view高度都占满屏幕剩余部分

1)、设置swiper占满

2)、取得swiper高度

mounted() {
let info = uni.createSelectorQuery().in(this).select('.swiper_group').boundingClientRect()
info.exec(res => {
this.scrollHeight = res[0].height
console.log(this.scrollHeight)
})
}

3)、将高度传入tab页的组件中,组件布局如下,嵌套了一个scroll-view,设置高度(scroll-view纵向划动必须设置高度)

参考文章:http://www.luyixian.cn/news_show_324576.aspx

       https://www.cnblogs.com/is-meeeee/p/12407855.html

       https://ask.dcloud.net.cn/question/69782

uniapp swiper高度自适应问题的更多相关文章

  1. 微信小程序swiper高度自适应,swiper的子元素高度不固定

    小程序 swiper 组件默认高度150px,并且如果子元素过高,swiper不会自适应高度 解决方案一: (总体来说不够完美,适合满屏滑动) 如果不是满屏的状态,用scroll-view IOS滑动 ...

  2. 小程序swiper高度自适应解决方案

    scroll-view 里面继续套一个 scroll-view ,设置纵向允许滚动 <swiper class="swiper"> <swiper-item> ...

  3. uni-app swiper设置自定义高度

    话不多少先上图, 大家可以看到图片中红色区域是头部区域,黄色区域则是我们要滑动的区域. 大家可以在uni-app官网上看到swiper高度是默认100%,而swiper-item则是要有固定宽高的,要 ...

  4. swiper的自适应高度问题

    #swiper的自适应高度问题 ​ 众所周知,swiper组件的元素swiper-item是设置了绝对定位的,所以里面的内容是无法撑开swiper的,并且给swiper盒子设置overflow:vis ...

  5. 微信小程序之swiper组件高度自适应

    微信小程序之swiper组件高度自适应 要求: (顶部广告栏 ) 改变swiper组件的固定高度,使之随内部每张图片的高度做自适应 原理: 图片加载完之后,获取图片的原始宽高,根据宽高比,计算出适应后 ...

  6. 微信小程序 - 自适应swiper高度(非组件)

    微信小程序swiper默认高度375rpx,一旦超过这高度,就滑动不到内容了,我们利用css3可以很简单做到这件事情 原理: 利用css3 横轴滚动属性overflow:scroll,设置死swipe ...

  7. iOS开发之多种Cell高度自适应实现方案的UI流畅度分析

    本篇博客的主题是关于UI操作流畅度优化的一篇博客,我们以TableView中填充多个根据内容自适应高度的Cell来作为本篇博客的使用场景.当然Cell高度的自适应网上的解决方案是铺天盖地呢,今天我们的 ...

  8. iframe高度自适应(同域)

    今天解决了iframe高度自适应的问题,不过这只是同域下的页面嵌入,以下是代码: function SetCwinHeight(){ var iframeid = document.getElemen ...

  9. div仿textarea使高度自适应

    今天真的有些无语,在百度上找了很多关于textarea和input高度自适应的代码,并且考虑到了要判断textarea的滚动条,从而动态改变它的高度,直到我搜索了这个让我目瞪狗呆的办法…… <d ...

随机推荐

  1. nginx+tomcat集群方法

    下载地址:wget http://nginx.org/download/nginx-1.16.1.tar.gz 解压:tar -zxvf 预编译 nginx+tomcat集群方法: 进入nginx配置 ...

  2. Actor:人生如戏全靠演技--“三维度”逻辑编程语言的设计(3)

    在上一篇介绍了逻辑编程的作用,介绍了逻辑编程中的一些概念,包括逻辑程序的结构:事实.规则和问题:知识的表达方式:谓词演算.产生式规则,以及这些概念与三维度(角色+场景+时间)理论的契合关系,正式提出了 ...

  3. Centos-显示目录或者目录下文件信息-ls

    ls 显示指定目录信息或指定目录下文件和目录信息,后边不跟文件目录路径信息默认为当前工作目录 默认显示输出信息的总行数统计数 相关参数 -a 显示所有文件或子目录,包含隐藏文档 # linux中以 . ...

  4. ACMer不得不会的线段树,究竟是种怎样的数据结构?

    大家好,欢迎阅读周三算法数据结构专题,今天我们来聊聊一个新的数据结构,叫做线段树. 线段树这个数据结构很多人可能会有点蒙,觉得没有听说过,但是它非常非常有名,尤其是在竞赛圈,可以说是竞赛圈的必备技能. ...

  5. E: 无法获得锁 /var/lib/dpkg/lock - open (11: 资源暂时不可用)

    Linux下sudo apt-get install 安装时报错: 解决办法 1.   终端输入 ps  -aux ,列出进程.找到含有apt'-get或者wget的进程,      直接sudo k ...

  6. LCD1602 库函数

    LCD1602 库函数 This library allows an Arduino board to control LiquidCrystal displays (LCDs) based on t ...

  7. 利用 Python 插入 Oracle 数据

    # coding=utf-8 ''''' Created on 2020-01-05 @author: Mr. Zheng ''' import json; import urllib2 import ...

  8. Python:MySQL数据库环境相关问题

    系统环境 Ubuntu 16.04.2 LTS mysql Ver 14.14 Distrib 5.7.18, for Linux (x86_64) using  EditLine wrapper P ...

  9. 迅雷bt种子的制作

    BT是目前最热门的下载方式之一,它的全称为"BitTorrent"简称"BT",中文全称"比特流",但很多朋友将它戏称为"变态下载 ...

  10. 多测师讲解 自动化测试理论(1)_高级讲师肖sir

    自动化测试理论什么是自动化测试?广义的:通过工具或程序替代或辅助人工测试的行为叫自动化测试狭义的:通过工具录制或编写脚本模拟手工测试的过程,通过回放或运行脚本执行测试用例,从而代替人工对系统的功能验证 ...