uni-app 启动页swiper

落日映苍穹つ 2023-01-12 14:57 66阅读 0赞

<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>