<template>
<view id="guide">
<swiper class="swiper" :style="{height:height+'px'},{width:width+'px'}"
indicator-color='#34FF47'
indicator-active-color='#ff0000'
indicator-dots=true
autoplay=false
interval="3000"
duration="500"
easing-function='easeInCubic'
@change='EventHandle'
:current="current"
>
<swiper-item v-for="(item, index) in guidelList" :key="index">
<image class="banner" :src="item.img_text" mode="widthFix"></image>
</swiper-item>
</swiper>
</view>
</template>
<script>
export default {
data(){
return{
guidelList:[],
height:731,
width:0 ,
current:0,
isCurrentTabs:'',
num:''
}
},
onLoad() {
// 从本地缓存中同步获取指定 key 对应的内容,用于判断是否是第一次打开应用
this.getBanner();
},
methods:{
//监听当前的index是否是最后一个,如果是,则进入首页
EventHandle(e){
if (typeof(e) == "number") {
this.isCurrentTabs = e
console.log(this.isCurrentTabs);
} else {
this.isCurrentTabs = e.detail.current
if(this.isCurrentTabs==this.num){
setTimeout(function() {
uni.redirectTo({
url: '/pages/index/index'
});
},2000)
}
}
},
//获取接口返回的图片数据
getBanner(){
let that = this;
uni.getSystemInfo({
success: function (res) {
that.height = res.windowHeight;
that.width = res.windowWidth;
}
});
this.height = that.height;
this.width = that.width;
let uri = '接口地址';
this.$api.http.post(uri, {}).then(res => {
if (res.code == 1) {
//获取列表
this.guidelList = res.data;
this.num=this.guidelList.length-1;
console.log(this.num);
setTimeout(function() {
}, 2000* res.data.length)
}
});
}
}
}
</script>
<style lang="less">
#guide{
height:100vh;
width: 100%;
.swiper{
height:100vh;
width: 100%;
image{
height: 100%!important;
}
}
}
.banner{
height:100vh;
width: 100%;
}
</style>