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( ...
随机推荐
- java实现趣味拼算式
匪警请拨110,即使手机欠费也可拨通! 为了保障社会秩序,保护人民群众生命财产安全,警察叔叔需要与罪犯斗智斗勇,因而需要经常性地进行体力训练和智力训练! 某批警察叔叔正在进行智力训练: 1 2 3 4 ...
- Java实现 蓝桥杯 算法提高 矩阵翻转
问题描述 Ciel有一个N*N的矩阵,每个格子里都有一个整数. N是一个奇数,设X = (N+1)/2.Ciel每次都可以做这样的一次操作:他从矩阵选出一个X*X的子矩阵,并将这个子矩阵中的所有整数都 ...
- UVIYN的基本设置
- python自学Day03(自学书籍python编程从入门到实践)
第4章 操作列表 只需要几行代码无论列表有多长,循环都能够让我对列表的每个元素都采取一个或一系列相同的措施,从而高效的处理任何长度的列表. 4.1 遍历整个列表 对列表中每个元素都拿出来,进行一个或者 ...
- Python快速入门文档
前言 此文本质为本人学习Python过程中的笔记,部分地方叙述表达可能不够清晰,欢迎留言. (本文适合有一定程序语言基础的读者阅读(最好是c语言)) 一.基本语法 1.框架: (1)以缩进表示层次所属 ...
- 【1】Vim 进阶操作
一.标签 :tabnew one.c 新建标签[♥] 常用 :tabc 关闭文件 :tabp 切换前一个页面 :tabn 切换下一个页面 gt 普通模式下操作 常用 二.窗口 :sp 水平 ...
- PAT 1039 Course List for Student (25分) 使用map<string, vector<int>>
题目 Zhejiang University has 40000 students and provides 2500 courses. Now given the student name list ...
- HashMap的方法及功能、StringBuffer的方法
Hashmap的存值:(map.put(key,value)) 1 public static void main(String[] args) { 2 ///Integer/map.put(&quo ...
- SuperSlide之属性targetCell介绍
禁用页面菜单js代码: <script type="text/javascript"> document.oncontextmenu=function(){ retur ...
- python3 中调用post和get接口
用了很多方法都没有这个实用 POST API接口: import jsonimport requestsif __name__ == '__main__': url = "http://12 ...