swiper轮播组件：轮播图片，文字

<template>
		<view >瓜兮兮的世界</view>
		<view >
			
			<swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000" class="sv">
				<swiper-item>111111</swiper-item>
				<swiper-item>222222</swiper-item>
				<swiper-item>333333</swiper-item>
			</swiper>
		
		</view>
</template>

<script setup>
	//vue3 组合式

</script>

<style lang="scss">
	.sv{
		width: 100vw;  //100%屏宽
		height: 100px;
		border: 1px solid red;
	}
	
</style>

---------------------swiper轮播组件---------------------

uniapp swiper轮播组件使用指南

基本用法

在uniapp中，swiper组件用于实现轮播效果，支持横向滑动和纵向滑动。基本结构如下：

<swiper 
  :indicator-dots="true" 
  :autoplay="true" 
  :interval="3000"
>
  <swiper-item v-for="(item, index) in list" :key="index">
    <image :src="item.image" mode="aspectFill"></image>
  </swiper-item>
</swiper>

常用属性

• indicator-dots：是否显示面板指示点，默认为false
• autoplay：是否自动切换，默认为false
• interval：自动切换时间间隔（毫秒），默认为5000
• duration：滑动动画时长（毫秒），默认为500
• circular：是否采用衔接滑动，默认为false
• vertical：滑动方向是否为纵向，默认为false

样式定制

可以通过CSS自定义swiper样式：

swiper {
  height: 350rpx;
}
.swiper-item {
  display: flex;
  justify-content: center;
  align-items: center;
}

事件处理

swiper组件支持多种事件：

<swiper @change="onSwiperChange">
  <!-- swiper内容 -->
</swiper>

methods: {
  onSwiperChange(e) {
    console.log('当前swiper索引:', e.detail.current)
  }
}

高级功能

实现自定义指示点：

<swiper 
  :indicator-dots="false" 
  @change="onSwiperChange"
>
  <!-- swiper内容 -->
</swiper>
<view class="custom-indicator">
  {{current+1}}/{{list.length}}
</view>

data() {
  return {
    current: 0
  }
},
methods: {
  onSwiperChange(e) {
    this.current = e.detail.current
  }
}

注意事项

• 在H5端，swiper组件基于swiper.js实现
• 在小程序端，使用原生swiper组件
• 在APP端，使用weex的swiper组件
• 不同平台的表现可能略有差异，需要测试各端效果