uni-app 动态设置 swiper 的高度

开发中遇到两种需要动态设置 swiper 高度的情况：

1. 第一种，需要除开顶部或底部元素获取屏幕剩余高度。

如果顶部或底部元素高度固定，直接使用 calc 函数来计算；
如果高度不固定，通过 uni.createSelectorQuery 来获取高度后计算。

2. 第二种，需要根据子元素来计算 swiper 的高度。

通过 uni.createSelectorQuery 来获取所有子元素的高度，通过传入 current 来获取当前 item 的高度。

<template><view><page-head title="swiper" class="page-head"></page-head><view class="uni-margin-wrap"><!-- <swiper class="swiper"> --><!-- <swiper class="swiper" :style="{height: swiperHeight + 'px'}"> --><swiper class="swiper" :current="current" :style="{height: swiperItemHeight + 'px'}" @change="swiperChange"><swiper-item><view class="swiper-item-wrap"><view class="swiper-item uni-bg-red" v-for="item in 3" :key="item">A-{{item}}</view></view></swiper-item><swiper-item><view class="swiper-item-wrap"><view class="swiper-item uni-bg-green" v-for="item in 1" :key="item">B-{{item}}</view></view></swiper-item><swiper-item><view class="swiper-item-wrap"><view class="swiper-item uni-bg-blue" v-for="item in 2" :key="item">C-{{item}}</view></view></swiper-item></swiper></view></view>
</template>
<script>export default {data() {return {swiperHeight: 0,swiperItemHeight: 0}},mounted() {// 第一种 获取屏幕剩余高度// this.getSwiperHeight()// 第二种 获取子元素的高度this.getSwiperItemHeight()},methods: {getSwiperHeight() {uni.createSelectorQuery().in(this).select('.page-head').boundingClientRect().exec(res => {const windowHeight = uni.getSystemInfoSync().windowHeight// 屏幕高度 - 顶部高度this.swiperHeight = windowHeight - res[0].height})},getSwiperItemHeight(current = 0) {uni.createSelectorQuery().in(this).selectAll('.swiper-item-wrap').boundingClientRect().exec(res => {this.swiperItemHeight = res[0][current].height})},swiperChange(e) {this.getSwiperItemHeight(e.detail.current)}}}
</script><style>page {background-color: #e2e2e2;}.uni-margin-wrap {width:690rpx;margin:0 30rpx;background-color: #fff;}/* 使用 calc 函数来计算 *//* .swiper {height: calc(100vh - 78px);} */.swiper-item {display: block;height: 300rpx;line-height: 300rpx;text-align: center;}
</style>

uni-app 动态设置 swiper 的高度相关推荐

uniapp动态获取swiper的高度
布局一下高度为动态的 <swiper class="swiper" :style="{height: windowHeight + 'px'}":curr ...
按照文字内容动态设置TableViewCell的高度
最近再做个项目需要使用UITableView来显示评论列表,但是有的评论字数特别多,固定的Cell高度显示不完,只能动态地根据字数来设置Cell的高度了只要实现UITableViewDelegate ...
JavaScript动态设置table的高度
这两天在调测系统的兼容性时遇到一个设置table高度的问题,页面功能很简单,就是页面中央一个文件,文件下方有一个保存按钮,文件内可以点击"添加项目按钮"来在该文件内增加表格数(这就 ...
android 动态设置View的高度和宽度，ViewTreeObserver使用
private int mMonitorHeight = 0; private int mMonitorWidth = 0; private boolean bisSetScreen = false; ...
微信小程序-动态设置图片的高度
1.在index.wxml文件中:给图片绑定一个图片加载完成的方法: <image bindload="onImageLoad" class="img" ...
vue 动态设置div的高度_Vue 动态设置元素高度
1. Vue文件如下 let windowHeight = parseInt(window.innerHeight) export default { data() { return { window ...
swift 动态设置UILabel的高度
2019独角兽企业重金招聘Python工程师标准>>> import UIKit class ViewController3: UIViewController {override ...
微信小程序-----解决swiper默认高度150px
微信小程序缺陷就是swiper是固定死的150px高度,这样如果传入的图片大于这个高度就会被隐藏.那么,怎样让图片自适应不同分辨率呢? 思路是:获取屏幕宽度,获取图片的宽高,然后等比设置当前屏幕宽度下 ...
php轮播怎么调整图片大小,微信小程序内轮播图怎样设置成自适应高度
这次给大家带来微信小程序内轮播图怎样设置成自适应高度,微信小程序内轮播图怎设置成自适应高度的注意事项有哪些,下面就是实战案例,一起来看一下. 我的思路是:获取屏幕宽度,获取图片的宽高,然后等比设置当前 ...

uni-app 动态设置 swiper 的高度

uni-app 动态设置 swiper 的高度相关推荐

最新文章

热门文章