7***@qq.com
7***@qq.com
  • 发布:2019-04-19 20:52
  • 更新:2019-10-16 17:19
  • 阅读:5109

swiper怎么设置自适应高度

分类:uni-app

swiper固定高度,很大限制项目的开发,

在本站及百度查了多次也没一个合适的方法

毕竟swiper是uniapp自带的功能,能用的话,当然是首选

请问如果可以做到里面的内容做到自适应高度

2019-04-19 20:52 负责人:无 分享
已邀请:
酒菜儿

酒菜儿

亲测可用。

<template>  
	<view>  
		{{items[current].height}}  
		  
		<swiper class="swiper" @change="change" :style="{height: items[current].height + 'px'}">  
			<swiper-item>  
				<view class="swiper-item">  
					<view class="bgwhite mt16 p16" v-for="d in 4" :key="d">{{d}}</view>  
				</view>  
			</swiper-item>  
			<swiper-item>  
				<view class="swiper-item">  
					<view class="bgwhite mt16 p16" v-for="d in 20" :key="d">{{d}}</view>  
				</view>  
			</swiper-item>  
			<swiper-item>  
				<view class="swiper-item">  
					<view class="bgwhite mt16 p16" v-for="d in 10" :key="d">{{d}}</view>  
				</view>  
			</swiper-item>  
		</swiper>  
		  
		  
	</view>  
</template>  
  
<script>  
	export default {  
		data() {  
			return {  
				current: 0,  
				items: []  
			}  
		},  
		  
		mounted() {  
			uni.createSelectorQuery().selectAll('.swiper-item').boundingClientRect(data => this.items = data).exec()  
		},  
		  
		methods: {  
			change(e) {  
				this.current = e.detail.current  
			}  
		}  
	}  
</script>  

  • j***@163.com

    :style="{height: items[current].height + 'px'}" 多实验了几次,终于成功了,这里最好用个计算函数判断一下items是否为空


    2020-05-13 16:56

  • 1***@qq.com

    大佬有小程序的写法吗


    2020-05-22 09:13

  • zdb110

    回复 j***@163.com: 这种方式在app端好像不行哦!一直报错


    2021-03-17 22:35

  • zdb110

    回复 j***@163.com: 只要把值加在dom上,这种写法(:style="{height: items[current].height + 'px'}")加上就报错


    2021-03-17 22:37

  • DKUN

    初始化就保存各个页面的高度,动态加载数据怎么办,数据加载有延迟,获取的高度不准确,都是问题。必须想个办法监听高度的变化。


    2021-05-12 15:28

DCloud_UNI_CHB

DCloud_UNI_CHB

参考:http://ask.dcloud.net.cn/question/68519

星辰若风

星辰若风

楼主问题是否解决了?

该问题目前已经被锁定, 无法添加新回复