tuniao-ui/vipPage/components/custom-swiper/vertical/custom-swiper.vue

<template>
  <view class="vip-component-custom-swiper--horizontal tn-safe-area-inset-bottom">
    <!-- 顶部自定义导航 -->
    <tn-nav-bar fixed>图鸟轮播(纵向)</tn-nav-bar>
        
    <!-- 页面内容 -->
    <view :style="{paddingTop: vuex_custom_bar_height + 'px'}">
      <view class="container" :style="{height: containerHeight + 'px'}">
        <tn-custom-swiper
          class="swiper"
          :current="0"
          :duration="450"
          :autoplay="true"
          :circular="true"
          :vertical="true"
          :indicator="true"
          indicatorType="round"
          indicatorPosition="topCenter"
          indicatorActiveColor="#838383"
        >
          <block v-for="(item, index) in swiperList" :key="index">
            <tn-custom-swiper-item class="swiper__item">
              <image :src="item.image" mode="heightFix"></image>
              <view class="text">{{ item.title }}</view>
            </tn-custom-swiper-item>
          </block>
        </tn-custom-swiper>
      </view>
        
    </view>
    
  </view>
</template>

<script>
  export default {
    name: 'VipComponentCustomVerticalSwiper',
    data() {
      return {
        containerHeight: 0,
        swiperList: [
          {
            title: '图鸟UI YYDS-1',
            image: 'https://resource.tuniaokj.com/images/swiper/read.jpg'
          },
          {
            title: '图鸟UI YYDS-2',
            image: 'https://resource.tuniaokj.com/images/swiper/read.jpg'
          },
          {
            title: '图鸟UI YYDS-3',
            image: 'https://resource.tuniaokj.com/images/swiper/read.jpg'
          },
          {
            title: '图鸟UI YYDS-4',
            image: 'https://resource.tuniaokj.com/images/swiper/read.jpg'
          },
          {
            title: '图鸟UI YYDS-5',
            image: 'https://resource.tuniaokj.com/images/swiper/read.jpg'
          }
        ],
      }
    },
    onLoad() {
      this.getContainerHeight()
    },
    methods: {
      // 获取可用区域的高度
      getContainerHeight() {
        const systemInfo = uni.getSystemInfoSync()
        this.containerHeight = systemInfo.safeArea.height - this.vuex_custom_bar_height + systemInfo.statusBarHeight
      }
    }
  }
</script>

<style lang="scss" scoped>
  .vip-component-custom-swiper--horizontal {
    background-color: $tn-bg-gray-color;
  }
  
  .swiper {
    width: 100%;
    height: 100%;
    display: block;
    
    &__item {
      width: 100%;
      height: 100%;
      
      image {
        border-radius: 10rpx;
        width: 100%;
        height: 100%;
      }
      .text {
        position: absolute;
        left: 10rpx;
        bottom: 0;
        font-size: 46rpx;
        color: #FFFFFF;
      }
    }
  }
</style>