#swiper的自适应高度问题

众所周知,swiper组件的元素swiper-item是设置了绝对定位的,所以里面的内容是无法撑开swiper的,并且给swiper盒子设置overflow:visible也是没有用的,有几种解决方法,根据不同的需求使用。

  1. 给swiper-item里的内容加scaoll-view包装;
  2. 通过uniapp api,直接选取有实际内容的DOM,并获取到他的高度,动态设置swiper的高度

1.方法一

html部分

<view class="nav">...</view>
<swiper class="swiper">
<swiper-item>
<scroll-view scroll-y="true" class="scroll">
<!-- 这里是内容 -->
</scroll-view>
</swiper-item>
</swiper>

css部分

.nav{
height:400px;
}
.swiper{
height: calc(100vh - 400rpx);
}
.scroll{
height: 100%;
}

2.方法二

html部分

<swiper class="swiper" :style="{height:swiperHeight + 'px'}" :current="current" @change="changeCurrent">
<swiper-item class="swiper1">
<!-- 这里是内容 -->
</swiper-item>>
<swiper-item class="swiper2">
<!-- 这里是内容 -->
</swiper-item>>
<swiper-item class="swiper3">
<!-- 这里是内容 -->
</swiper-item>>
</swiper>

js部分

export default {
data() {
return {
swiperHeight:0, //外部的高度
current:0
}
},
onLoad() {
this.getElementHeight('.swiper' + this.current)
},
methods:{
//点击tab切换
changeCurrent(index) {
this.current = index;
this.getElementHeight('.swiper' + this.current)
},
//动态获取高度
getElementHeight(element) {
//一定要 this.$nextTick 完成之后在获取dom节点高度
this.$nextTick(()=>{
let query = uni.createSelectorQuery().in(this);
query.select(element).boundingClientRect(data => {
console.log(data.height);
this.swiperHeight = data.height;
}).exec()
})
}
}
}

扩展:

html部分

<view class="main">
<!-- ...... --> <!-- 其他属性省略,动态绑定width -->
<u-charts :width="width" />
</view>

css部分

.main{
margin: 28rpx 14rpx 0 14rpx;
}

js部分

export default {
data() {
return {
width:0
}
},
onLoad() {
this.getElementWidth('.main')
},
methods:{
//动态获取高度
getElementWidth(element) {
//一定要 this.$nextTick 完成之后在获取dom节点高度
this.$nextTick(()=>{
let query = uni.createSelectorQuery().in(this);
query.select(element).boundingClientRect(data => {
console.log(data.width);
this.width = data.width;
}).exec()
})
}
}
}

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

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

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

  2. div实现自适应高度的textarea,实现angular双向绑定

    相信不少同学模拟过腾讯的QQ做一个聊天应用,至少我是其中一个. 过程中我遇到的一个问题就是QQ输入框,自适应高度,最高高度为3row. 如果你也像我一样打算使用textarea,那么很抱歉,你一开始就 ...

  3. iOS 设置UILabel的行间距并自适应高度

    NSString *contentStr = @"总以为,在最初的地方,有一个最原来的我,就也会有一个最原来的你"; UILabel *tempLabel = [[UILabel ...

  4. div自适应高度

    div自适应高度 Div即父容器不根据内容自适应高度,我们看下面的代码: <div id="main"> <div id="content"& ...

  5. JQuery 实现两列等高并自适应高度

    想要使用 JQuery 实现两列等高并自适应高度,其实也很简单,原理就是取得左右两边的高度,然后判断这个值,把大的值赋给小的就行了.看代码: $(document).ready(function() ...

  6. 自定义cell自适应高度

    UITableView在许多App种被大量的应用着,呈现出现的效果也是多种多样的,不能局限于系统的一种样式,所以需要自定义cell 自定义cell呈现的内容也是多种多样的,内容有多有少,所以需要一种能 ...

  7. 简单而兼容性好的Web自适应高度布局,纯CSS

    纯CSS实现的自适应高度布局,中间内容不符自动滚动条.兼容IE9以上.chrome.FF.关键属性是box-sizing: border-box. 不废话,直接上代码: <!doctype ht ...

  8. IOS7.0 UILabel实现自适应高度的新方法

    //IOS7.0中利用- (CGRect)boundingRectWithSize:(CGSize)size options:(NSStringDrawingOptions)options attri ...

  9. 【JS】点击目标外事件与IFRAM自适应高度

    一.点击目标外事件 $(document).mouseup(function(e){ var _con = $('.dropdown-multiSelect-list'); // 设置目标区域 if( ...

随机推荐

  1. 【CSS】电脑、移动端公用样式

    电脑端: /* Public */ @charset "utf-8"; html, body, div, p, ul, ol, li, dl, dt, dd, h1, h2, h3 ...

  2. kworkerds挖矿木马

    昨天一朋友的公司服务器中了挖矿病毒,一起帮忙查看并做下记录.   病毒信息 名称:kworkerds 目录:/tmp/ 关键点:文件 -i 属性   i :这个i可就很厉害了.它可以让一个文件“不能被 ...

  3. 常见的几种java排序算法

    一.分类: 1)插入排序(直接插入排序.希尔排序) 2)交换排序(冒泡排序.快速排序) 3)选择排序(直接选择排序.堆排序) 4)归并排序 5)分配排序(基数排序) 所需辅助空间最多:归并排序 所需辅 ...

  4. jreble备注

    版本:2019.1.4 激活URL:http://jrebel.pyjuan.com/36931214-7bb6-42d4-afd7-26eb5628e004

  5. [转] VMware中的Ubuntu无法通过桥接方式上网

    遇到的问题:主机可以上网(使用了代理),VMware设置为桥接方式连网.在主机中可以ping通虚拟机,在虚拟机中也可以ping通主机,可是在虚拟机中始终连接不了因特网. 感谢刘洋同学的博文,“在桥接模 ...

  6. 给博客使用Butterfly主题并部署到GitHub服务器

    目录 前言 一.安装Butterfly主题 二.将本地博客部署到GitHub服务器 三.将个人域名与GitHub绑定 前言 安装完Hexo框架后,自带的主题在thems文件夹下可以查看,应用后界面: ...

  7. JavaScript中的事件委托(转至大佬)

    转至:https://www.cnblogs.com/liugang-vip/p/5616484.html 起因: 1.这是前端面试的经典题型,要去找工作的小伙伴看看还是有帮助的: 2.其实我一直都没 ...

  8. Windows 程序设计(3) 关于字符串

    1. 宽窄字节的区别及重要性 1.1 宽窄字节简介: C语言/C++语言,使用的字符串指针就是 char* 类型,C++中的字符串是 string,内部也是对 char* 的封装 窄字节 其实最早的系 ...

  9. 完美解决asp.net core 3.1 两个AuthenticationScheme(cookie,jwt)共存在一个项目中

    内容 在我的项目中有mvc controller(view 和 razor Page)同时也有webapi,那么就需要网站同时支持2种认证方式,web页面的需要传统的cookie认证,webapi则需 ...

  10. centos下面基本的linux命令操作

    参考视频: 1.如何打开命令窗口 鼠标点击右键,选择open Terminal就可以打开命令行窗口了. 现在我们可以调整这个窗口的大小,增大窗口大小使用ctrl+shif+加号,缩小窗口ctrl+减号 ...