swiper的自适应高度问题
#swiper的自适应高度问题
众所周知,swiper组件的元素swiper-item是设置了绝对定位的,所以里面的内容是无法撑开swiper的,并且给swiper盒子设置overflow:visible也是没有用的,有几种解决方法,根据不同的需求使用。
- 给swiper-item里的内容加scaoll-view包装;
- 通过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的自适应高度问题的更多相关文章
- uni-app swiper设置自定义高度
话不多少先上图, 大家可以看到图片中红色区域是头部区域,黄色区域则是我们要滑动的区域. 大家可以在uni-app官网上看到swiper高度是默认100%,而swiper-item则是要有固定宽高的,要 ...
- div实现自适应高度的textarea,实现angular双向绑定
相信不少同学模拟过腾讯的QQ做一个聊天应用,至少我是其中一个. 过程中我遇到的一个问题就是QQ输入框,自适应高度,最高高度为3row. 如果你也像我一样打算使用textarea,那么很抱歉,你一开始就 ...
- iOS 设置UILabel的行间距并自适应高度
NSString *contentStr = @"总以为,在最初的地方,有一个最原来的我,就也会有一个最原来的你"; UILabel *tempLabel = [[UILabel ...
- div自适应高度
div自适应高度 Div即父容器不根据内容自适应高度,我们看下面的代码: <div id="main"> <div id="content"& ...
- JQuery 实现两列等高并自适应高度
想要使用 JQuery 实现两列等高并自适应高度,其实也很简单,原理就是取得左右两边的高度,然后判断这个值,把大的值赋给小的就行了.看代码: $(document).ready(function() ...
- 自定义cell自适应高度
UITableView在许多App种被大量的应用着,呈现出现的效果也是多种多样的,不能局限于系统的一种样式,所以需要自定义cell 自定义cell呈现的内容也是多种多样的,内容有多有少,所以需要一种能 ...
- 简单而兼容性好的Web自适应高度布局,纯CSS
纯CSS实现的自适应高度布局,中间内容不符自动滚动条.兼容IE9以上.chrome.FF.关键属性是box-sizing: border-box. 不废话,直接上代码: <!doctype ht ...
- IOS7.0 UILabel实现自适应高度的新方法
//IOS7.0中利用- (CGRect)boundingRectWithSize:(CGSize)size options:(NSStringDrawingOptions)options attri ...
- 【JS】点击目标外事件与IFRAM自适应高度
一.点击目标外事件 $(document).mouseup(function(e){ var _con = $('.dropdown-multiSelect-list'); // 设置目标区域 if( ...
随机推荐
- 【CSS】电脑、移动端公用样式
电脑端: /* Public */ @charset "utf-8"; html, body, div, p, ul, ol, li, dl, dt, dd, h1, h2, h3 ...
- kworkerds挖矿木马
昨天一朋友的公司服务器中了挖矿病毒,一起帮忙查看并做下记录. 病毒信息 名称:kworkerds 目录:/tmp/ 关键点:文件 -i 属性 i :这个i可就很厉害了.它可以让一个文件“不能被 ...
- 常见的几种java排序算法
一.分类: 1)插入排序(直接插入排序.希尔排序) 2)交换排序(冒泡排序.快速排序) 3)选择排序(直接选择排序.堆排序) 4)归并排序 5)分配排序(基数排序) 所需辅助空间最多:归并排序 所需辅 ...
- jreble备注
版本:2019.1.4 激活URL:http://jrebel.pyjuan.com/36931214-7bb6-42d4-afd7-26eb5628e004
- [转] VMware中的Ubuntu无法通过桥接方式上网
遇到的问题:主机可以上网(使用了代理),VMware设置为桥接方式连网.在主机中可以ping通虚拟机,在虚拟机中也可以ping通主机,可是在虚拟机中始终连接不了因特网. 感谢刘洋同学的博文,“在桥接模 ...
- 给博客使用Butterfly主题并部署到GitHub服务器
目录 前言 一.安装Butterfly主题 二.将本地博客部署到GitHub服务器 三.将个人域名与GitHub绑定 前言 安装完Hexo框架后,自带的主题在thems文件夹下可以查看,应用后界面: ...
- JavaScript中的事件委托(转至大佬)
转至:https://www.cnblogs.com/liugang-vip/p/5616484.html 起因: 1.这是前端面试的经典题型,要去找工作的小伙伴看看还是有帮助的: 2.其实我一直都没 ...
- Windows 程序设计(3) 关于字符串
1. 宽窄字节的区别及重要性 1.1 宽窄字节简介: C语言/C++语言,使用的字符串指针就是 char* 类型,C++中的字符串是 string,内部也是对 char* 的封装 窄字节 其实最早的系 ...
- 完美解决asp.net core 3.1 两个AuthenticationScheme(cookie,jwt)共存在一个项目中
内容 在我的项目中有mvc controller(view 和 razor Page)同时也有webapi,那么就需要网站同时支持2种认证方式,web页面的需要传统的cookie认证,webapi则需 ...
- centos下面基本的linux命令操作
参考视频: 1.如何打开命令窗口 鼠标点击右键,选择open Terminal就可以打开命令行窗口了. 现在我们可以调整这个窗口的大小,增大窗口大小使用ctrl+shif+加号,缩小窗口ctrl+减号 ...