yicangzongtai_app_240321/pages/index/guide.vue

<template>
  <view class="main">
    <view class="swiper">
      <swiper class="swiper-list" indicator-dots indicator-color="#ffffff" indicator-active-color="rgb(3,160,168)"
        interval="5000" :autoplay="autoplay" :duration="duration" @change="swiperChange">
        <swiper-item v-for="(item, index) in swiperList" :key="index">
          <view class="swiper-item">
            <view class="swiper-item-img">
              <!-- aspectFill -->
              <image :src="item.image" mode="aspectFit"></image>
            </view>
          </view>
        </swiper-item>
      </swiper>

      <view class="jumpover" @tap="launchFlag()" v-if="swiperCurrent+1 < swiperLength">{{ jumpover }}</view>
      <view class="experience" @tap="launchFlag()" v-if="swiperCurrent+1 == swiperLength">{{ experience }}</view>
    </view>
  </view>
</template>

<script>
  import {
    getBannerList
  } from "@/api/government.js"
  export default {
    data() {
      return {
        titleNViewBackground: '',
        swiperCurrent: 0,
        swiperLength: 0,
        // swiperList: [{
        //     imgUrl: '/static/guide/1-1.jpg',
        //     bgColor: ''
        //   },
        //   {
        //     imgUrl: '/static/guide/2-2.jpg',
        //     bgColor: ''
        //   },
        //   {
        //     imgUrl: '/static/guide/3-3.jpg',
        //     bgColor: ''
        //   },
        //   {
        //     imgUrl: '/static/guide/4-4.jpg',
        //     bgColor: ''
        //   }
        // ],
		swiperList: [],
        autoplay: false,
        duration: 500,
        jumpover: '跳过',
        experience: '立即体验'
      };
    },
    onLoad() {
      // #ifdef APP-PLUS
      if (plus.os.name == 'iOS') {
        // 首先获取一次网络状态
        uni.getNetworkType({
          success: (res) => {
            if (res.networkType != 'none') {
              this.getList()
            }
          }
        });
        // 监听网络变化
        uni.onNetworkStatusChange((res) => {
          if (res.isConnected) {
            this.getList()
          }
        });
      } else {
        this.getList()
      }
      // #endif
      // this.titleNViewBackground = this.swiperList[0].bgColor;
    },
    methods: {
      getList() {
        getBannerList('ydtgg').then(res => {
          this.swiperList = res.data;
          this.swiperLength = this.swiperList.length;
        }).catch(err => {
        })
      },
      //轮播图切换修改背景色
      swiperChange(e) {
        const index = e.detail.current;
        this.swiperCurrent = index;
        this.swiperLength = this.swiperList.length;
        // this.titleNViewBackground = this.swiperList[index].bgColor;
      },
      launchFlag: function() {
        /**
         * 向本地存储中设置launchFlag的值，即启动标识；
         */
        uni.setStorage({
          key: 'launchFlag',
          data: true
        });
        uni.switchTab({
          url: '/pages/home'
        });
      }
    }
  };
</script>
<style lang="scss" scoped>
  page,
  .main {
    width: 100%;
    height: 100%;
    padding: 0;
    background-size: 100% auto;
  }

  .swiper {
    flex-direction: column;
    width: 100%;
    height: 100vh;
    background: #fff;
  }

  .swiper-list {
    width: 100%;
    height: 100%;
  }

  .swiper-item {
    position: relative;
    display: flex;
    align-items: center;
    flex-direction: column;
    width: 100%;
    height: 100%;
    text-align: center;
  }

  .swiper-item-img {
    justify-content: center;
    width: 100%;
    height: 100%;
    margin: 0 auto;
  }

  .swiper-item-img image {
    width: 100%;
    height: 100%;
  }

  .jumpover,
  .experience {
    position: absolute;
    z-index: 999;
    height: 60rpx;
    line-height: 56rpx;
    padding: 0 40rpx;
    font-size: 32rpx;
    color: rgb(3, 160, 168);
    border: 2rpx solid rgb(3, 160, 168);
    border-radius: 30rpx;
  }

  .jumpover {
    right: 30rpx;
    top: 90rpx;
  }

  .experience {
    width: 300rpx;
    height: 80rpx;
    right: 50%;
    bottom: 20vh !important;
    margin-right: -20%;
    padding: 0;
    background: rgb(3, 160, 168);
    color: #fff;
    line-height: 80rpx;
    text-align: center;
    border-radius: 40rpx;
  }

  /deep/ uni-swiper .uni-swiper-dot {
    border: 1rpx solid rgb(3, 160, 168);
  }

  /deep/ uni-swiper .uni-swiper-dots-horizontal {
    bottom: 10vh !important;
  }
</style>