本文主要是介绍uniapp swiper设置高度以及切换时滚动条回到顶部,下滑加载,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!
getSwiperItemHeight(current = 0) {uni.createSelectorQuery().in(this).selectAll('.swiper-item-wrap').boundingClientRect().exec(res => {console.log(res, "高度是什么")this.swiperItemHeight = res[0][current].heightlet windowHeight = uni.getSystemInfoSync().windowHeight;let height = (windowHeight * 2) - 176 - 72})},async changeTabIndex(e) {// 在这里判断,发请求。if (this.loading == true) {} else {this.current = e.detail.currentawait this.loadData()this.$nextTick(() => {this.contentTop = this.scrollTopthis.$nextTick(() => {this.contentTop = 0})this.getSwiperItemHeight(e.detail.current)})}},
<scroll-view scroll-y @scrolltolower="lowerBottom" class="scrollHeight" :scroll-top="contentTop"@scroll="onScroll"><view class="container" style="padding-bottom: 0rpx;"><swiper :style="{height: swiperItemHeight + 'px'}" class="swiper" :current="current"@change="changeTabIndex"><swiper-item><view class="swiper-item-wrap"><scroll-view scroll-y @scrolltolower="lowerBottom"><view><swiperItem :rankData="dayRankData" @getSwiperItemHeight="getSwiperItemHeight"></swiperItem></view></scroll-view></view></swiper-item></swiper></view></scroll-view>
scrollHeight {height: 100%;position: fixed;top: 268rpx;left: 0;background-color: transparent;}
这篇关于uniapp swiper设置高度以及切换时滚动条回到顶部,下滑加载的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!