uni-app swiper 无法显示的解决方案

在使用全屏滑动时遇到swiper高度无法自适应的问题，原因就在于需要给scroll外部添加一层position的样式，而swiper也是如此

<template>
	<u-tabs-swiper 
      ref="uTabs"
      :list="list"
      :current="current"
      @change="tabsChange"
      :is-scroll="false"
      inactive-color="#969799"
      active-color="#FFFFFF"
      bg-color="#FFFFFF"
      :bold="false"
      font-size="28"
      :bar-style="barStyle"
      swiperWidth="750"/>
    <view class="swiper-wrapper">
      <swiper :current="swiperCurrent" @transition="transition" @animationfinish="animationfinish">
          <swiper-item class="swiper-item" v-for="(item, index) in tabs" :key="index">
            <scroll-new @lower="onreachBottom" :scrollStyle="{top: '105rpx'}" ref="scrollNew" :scrollTop="scrollTop" :isData="isData" :loading="loading" :isNext="isNext">
              <view class="scroll-list">
                <view v-for="n in 20" :key="n" class="scroll-list__item">
                  <user-info
                    avatar=""
                    name="A光影设计臭啊...（李女士瓦...）"
                    time="2020/12/16 10:46:52"
                    :rate="4"
                    phone="18720496215 | 拨打"
                    :tags="['狼狈为奸', '虎狼之师']"
                  />
                </view>
              </view>
            </scroll-new>
          </swiper-item>
      </swiper>
    </view>
</template>

<script>
import ScrollNew from '@/components/scroll/scroll-new.vue'

export default {
  components: {
    ScrollNew
    UserInfo
  },
  data () {
    return {
      list: [{
        name: '全部'
      }, {
        name: '按星级管理'
      }, {
        name: '未管理'
      }],
      // 因为内部的滑动机制限制，请将tabs组件和swiper组件的current用不同变量赋值
      current: 0, // tabs组件的current值，表示当前活动的tab选项
      swiperCurrent: 0, // swiper组件的current值，表示当前那个swiper-item是活动的
      barStyle: {
        width: '182rpx',
        height: '60rpx',
        background: '#1989FA',
        borderRadius: '50rpx',
        transform: 'translateX(-72rpx)',
        bottom: '10rpx'
      }
    }
  }，
  methods: {
    // tabs通知swiper切换
    tabsChange(index) {
      this.current = index
      this.swiperCurrent = index
    },
    // swiper-item左右移动，通知tabs的滑块跟随移动
    transition(e) {
      let dx = e.detail.dx
      this.$refs.uTabs.setDx(dx)
    },
    // 由于swiper的内部机制问题，快速切换swiper不会触发dx的连续变化，需要在结束时重置状态
    // swiper滑动结束，分别设置tabs和swiper的状态
    animationfinish(e) {
      let current = e.detail.current
      this.$refs.uTabs.setFinishCurrent(current)
      this.swiperCurrent = current
      this.current = current
    }
  }
}
</script>

<style lang="scss" scoped>
.swiper-wrapper {
  position: absolute;
  left: 0;
  top: 60rpx;
  right: 0;
  bottom: 0;
}
.intention {
  uni-swiper {
    width: 100%;
    height: 100%;
  }
  .scroll-list {
    padding: 23rpx 20rpx;
    &__item {
      margin-bottom: 20rpx;
    }
  }
}
</style>

/components/scroll/scroll-new.vue

<template>
	<view class="scrollNew">
		<scroll-view scroll-y="true" :scroll-top="scrollTop?scrollTop:0" class="scrollY" @scrolltolower="lower" :style="scrollStyle?scrollStyle:''">
				<slot></slot>
				<loadingView :loadingText="loadingText" :show="loading"></loadingView>
				<noData :show="!isData" :noDataText="noDataText" :url="noDataUrl"></noData>
				<noNext :noNextText="noNextText" :show="!isNext"></noNext>
		</scroll-view>
	</view>
	
</template>

<script>
	import loadingView from "@/components/scroll/loading-view.vue"
	import noData from "@/components/scroll/noData.vue"
	import noNext from "@/components/scroll/noNext.vue"
	export default {
		components:{
			loadingView,
			noData,
			noNext
		},
		name: "scrollNew",
		props: ["scrollStyle","noDataText","loadingText","noDataUrl","noNextText","scrollTop","isData","loading","isNext"],
		data() {
			return {
				
			};
		},
		mounted() {
			
		},
		methods: {
			lower(){
				this.$emit("lower")
			}
		}
	}
</script>

<style scoped>
	.scrollY{
		position: absolute;
		left: 0;
		top: 0;
		right: 0;
		bottom: 0;
	}
</style>