uni-app 启动页swiper

最新推荐文章于 2025-03-24 08:46:41 发布

TXGadair

最新推荐文章于 2025-03-24 08:46:41 发布

阅读量655

点赞数

分类专栏： uni-app 文章标签： uni-app vue

本文链接：https://blog.youkuaiyun.com/u014748857/article/details/113351060

版权

uni-app 专栏收录该内容

8 篇文章

订阅专栏

这是一个基于Vue.js的滑动引导页组件实现。通过`<swiper>`和`<swiper-item>`组件展示图片，并结合`uni-app`的API进行页面间跳转。在滑动到最后一张时，经过延时后自动跳转到首页。代码中设置了滑动效果、指示点、自动播放等特性，并根据设备窗口尺寸动态调整高度和宽度。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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