CommunityApp/pages/guide/guide_old.vue

<template>
<view class="swiper-container">
  <swiper class="guide_swiper" :autoplay="autoplay" :interval="interval" :duration="duration" @change="swiperChange">
    <block v-for="(item, index) in imgUrls" :key="index">
      <swiper-item>
        <image :src="item" mode="aspectFit" class="slide-image"></image>
        <button class="button-img" @tap="goto_next" v-if="index == imgUrls.length - 1">立即体验</button>
      </swiper-item>
    </block>
  </swiper>

  <view class="dots">
    <block v-for="(item, index) in imgUrls" :key="index">
        <view :class="'dot' + (index == swiperCurrent ? ' active' : '')"></view>
    </block>
  </view>

</view>
</template>

<script>
var app=getApp()
export default {
  data() {
    return {
      imgUrls: ["http://139.9.103.171:1888/img/image/guide_rl.png", "http://139.9.103.171:1888/img/image/guide_sq.png", "http://139.9.103.171:1888/img/image/guide_jr.png", "http://139.9.103.171:1888/img/image/guide_km.png"],
      //广告轮播图
      autoplay: false,
      interval: 5000,
      duration: 300,
      swiperCurrent: 0
    };
  },

  components: {},
  props: {},

  /**
   * 生命周期函数--监听页面加载
   */
  onReady: function (options) {
	  console.log("onready");
    //调用API从本地缓存中获取数据
    var isFir = uni.getStorageSync('isFirst');

    if (isFir == 'true') {
		uni.reLaunch({
			url:"/pages/index/index?isFlush=true"
		})
    }
  },
 onLoad() {
 },
  methods: {
    goto_next: function (val) {
      uni.setStorageSync("isFirst", 'true');
      uni.reLaunch({
      	url:"/pages/index/index?isFlush=true"
      })
    },
    swiperChange: function (e) {
        this.swiperCurrent=e.detail.current
    }
  }
};
</script>
<style>
page {
  background-color: #fff;
}
.swiper-container {
  position: relative;
}
.guide_swiper {
  width: 100%;
  height: 100vh;
}

.slide-image {
  margin: 0 auto;
  height: 100vh;
  width: 100%;
}

.button-img 

 {
  position: fixed;
  z-index: 1000;
  bottom: 220rpx;
  width: 210rpx;
  height: 60rpx;
  line-height: 60rpx;
  left: 270rpx;
  font-size: 30rpx;
  text-align: center;
  box-sizing: border-box;
  background-color: #33b6ea;
  opacity: 0.7;
  color: #fff;
  border-radius: 30rpx;
}
.dots{
  position: absolute;
  left: 50%;
  transform: translate(-50%,0);
  right: 0;
  bottom: 150rpx;
  display: flex;
  justify-content: center;
}

.dot{
  margin: 0 8rpx;
  width: 14rpx;
  height: 14rpx;
  background: #33b6ea;
  border-radius: 8rpx;
  transition: all .6s;
}
.dot.active{
  width: 24rpx;
  background: #f80;
}

</style>