首页 > 移动平台 > 详细

uniapp swiper高度自适应问题

时间:2020-05-31 15:24:23      阅读:654      评论:0      收藏:0      [点我收藏+]

这里的话是想做一个比较常见的左右滑动更改tab的效果,引用了uview-ui中的u-tabs-swiper组件,需要结合swiper组件来使用

先来讲下主体思路:每个tab页(swiper-item)都嵌套在swiper中,swiper-item中在放置一个scroll-view,实现超出部分滑动;即让swiper、scroll-view高度都占满屏幕剩余部分

技术分享图片

1)、设置swiper占满

技术分享图片

技术分享图片

 2)、取得swiper高度

mounted() {
	let info = uni.createSelectorQuery().in(this).select(‘.swiper_group‘).boundingClientRect()
	info.exec(res => {
		this.scrollHeight = res[0].height
		console.log(this.scrollHeight)
	})
}

3)、将高度传入tab页的组件中,组件布局如下,嵌套了一个scroll-view,设置高度(scroll-view纵向划动必须设置高度)

技术分享图片

 

 技术分享图片

然后就行了,哈哈

技术分享图片

 

参考文章:http://www.luyixian.cn/news_show_324576.aspx

       https://www.cnblogs.com/is-meeeee/p/12407855.html

       https://ask.dcloud.net.cn/question/69782

 

uniapp swiper高度自适应问题

原文:https://www.cnblogs.com/yejunm3/p/12997380.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!