TMUI4x

主题

TMUI4x2026-05-27
732
3.1m

轮播 xSwiper ​

在线预览
在线模拟尺寸:

介绍 ​

注意：本组件非官方的swiper轮播的封装，而是作者设计并开发的轮播，因此有些使用上的区别，请仔细看文档。 之所以要重新设计轮播，是为了后期的功能扩展。当前的一些功能已经比官方的还更好。 比如支持阻尼动效的设计，动效函数的设置。临界位置回弹的设置。指示点位置的偏移设置（这点非常有用，然官方不支持，而我的由于是自行开发的可以随意设置） 如果你有更多需求，你只需要阅读源码后自行扩展更多的功能。 内部只能放置子组件x-swiper-item

平台兼容 ​

HarmonyH5andriodIOS小程序UTSUNIAPP-X SDKversion
☑☑☑️☑️☑️☑️4.76+1.1.18

文件路径 ​

ts

@/uni_modules/tmx-ui/components/x-swiper/x-swiper.uvue

使用 ​

ts

<x-swiper></x-swiper>

Props 属性 ​

名称说明类型默认值
modelValue当前播放的索引值，可v-model动态更改。
number0
width宽
string'auto'
height高是必填，不可为auto。
string'150'
threshold当滑动时小于此值，会回弹到原位。
number30
damping拖动阻尼值，越小拖越费劲,1是不限制
number0.1
animationDuration当打开或者松开时的动画时间
number350
spaceOffset露边出来的距离，px单位
number0
space露边出来的间隙，px单位
number0
model模式：space/spaceIn/spaceOnly/card/空值
string''
animationFun缓动动画函数
string'cubic-bezier(0, 0.55, 0.45, 1)'
duration轮播时的间隔
number5000
vertical是否竖向
booleanfalse
round圆角
string'10'
dotColor指示点的颜色
string'rgba(255,255,255,0.5)'
dotActiveColor指示点的激活色
string'rgba(255,255,255,1)'
dotOffset指示点距离边界的位置
string'15'
dotSize指示点大小
string'6'
showDot是否显示指示
booleantrue
autoPlay是否开启自动播放
booleantrue
loop是否循环
booleantrue
showLastView是否显示最后视图
booleanfalse
showScalAni是否开启缩放动画
booleanfalse

Events 事件 ​

名称参数说明
changeindex: number切换变化时触发
clickindex: number组件被点击时触发。
dragLastEnd-当用户拖拉时，拖到最右侧最后一个后，还继续拉，拉不动时触发
update:modelValue--

Slots 插槽 ​

名称说明数据
default插槽内只允许放其子节点x-swiper-item-
lastView--
dotV竖向指示插槽,可完全自定义指示样式current: number
current: number
len: number
len: number
dot横向指示插槽,可完全自定义指示样式current: number
current: number
len: number
len: number

Ref 方法 ​

名称参数返回值说明
pushAdd---
delItem---
mStart---
mMove---
mEnd---
swiperClick---
mmStart---
mmMove---
mmEnd---
parentId---

示例文件路径 ​

json

/pages/zhanshi/swiper

示例源码 ​

uvue
vue
<template>
	<!-- #ifdef APP -->
	<scroll-view style="flex:1">
	<!-- #endif -->
	<!-- #ifdef MP-WEIXIN -->
	<page-meta :page-style="`background-color:${xThemeConfigBgColor}`">
		<navigation-bar :background-color="xThemeConfigNavBgColor" :front-color="xThemeConfigNavFontColor"></navigation-bar>
	</page-meta>
	<!-- #endif -->
	
		<x-sheet>
			<x-text font-size="18" class=" text-weight-b mb-8">轮播 Swiper</x-text>
			<x-text  color="#999999" >注意：本组件非官方的swiper轮播封装，而是作者设计并开发的轮播,后续拓展更为自由</x-text>
		</x-sheet>

		<x-sheet>
			<x-text font-size="18" class=" text-weight-b">横向</x-text>
			<x-text  class="mb-16" color="#999999" >拉到最后一个继续向左拉会有惊喜！！！</x-text>
			<x-swiper v-model="activeIndex" @change="change" :loop="false" :showLastView="true"  height="150" :autoPlay="true" >
				<x-swiper-item  v-for="(item,index) in list" :order="index" :key="index">
					<x-image @click="clicktest(index)" :preview="false" height="150" :src="item.image"></x-image>
				</x-swiper-item>
			</x-swiper>
			<x-text font-size="18" class=" text-weight-b my-16">纵向</x-text>
			<x-swiper v-model="activeIndex" :vertical="true" height="150" :autoPlay="true" >
				<x-swiper-item  v-for="(item,index) in list" :order="index" :key="index">
					<x-image @click="clicktest(index)" :preview="false" height="150" :src="item.image"></x-image>
				</x-swiper-item>
			</x-swiper>
			
		</x-sheet>
		<x-sheet>
			<x-text font-size="18" class=" text-weight-b ">单边向左边露出</x-text>
		</x-sheet>
		<x-sheet>
			<x-swiper height="150" :space="5" model="spaceOnly" :spaceOffset="20" :autoPlay="true" >
				<x-swiper-item v-for="(item,index) in 4" :order="index" :key="index">
					<x-image :preview="false"   height="150" :src="`https://picsum.photos/id/${60+index*10}/800/400`"></x-image>
				</x-swiper-item>
				
			</x-swiper>
		
		</x-sheet>
		<x-sheet>
			<x-text font-size="18" class=" text-weight-b ">两边露出</x-text>
		</x-sheet>
		<x-sheet>
			<x-swiper  :modelValue="1" height="150" :space="10" width="325" model="space" :spaceOffset="25" :autoPlay="false" >
				<x-swiper-item v-for="(item,index) in 5" :order="index" :key="index">
					<x-image :preview="false"  width="325"  height="150" :src="`https://picsum.photos/id/${110+index*10}/800/400`"></x-image>
				</x-swiper-item>
				
			</x-swiper>
		</x-sheet>
		<x-sheet>
			<x-text font-size="18" class=" text-weight-b ">向里堆叠</x-text>
		</x-sheet>
		<x-sheet>
			<x-swiper :modelValue="1" height="150" :space="10" model="spaceIn" :spaceOffset="25" :autoPlay="false" >
				<x-swiper-item v-for="(item,index) in 5" :order="index" :key="index">
					<x-image :preview="false"   height="150" :src="`https://picsum.photos/id/${160+index*10}/800/400`"></x-image>
				</x-swiper-item>
				
			</x-swiper>
		</x-sheet>
		
		<x-sheet>
			<x-text font-size="18" class=" text-weight-b mb-8">自定义插槽指示</x-text>
			<x-text  color="#999999" >如果你想了解如何自定义,请参考示例修改，插槽中已经返回了你所需参数。可以随意制作你想要样式</x-text>
		</x-sheet>
		<x-sheet>
			<x-swiper  height="150":autoPlay="true" >
				
				<x-swiper-item v-for="(item,index) in 5" :order="index" :key="index">
					<x-image :preview="false"   height="150" :src="`https://picsum.photos/id/${210+index*10}/800/400`"></x-image>
				</x-swiper-item>
				
				<template #dot="{current,len}">
					<view class="flex flex-row flex-center">
						<view v-for="(item,index) in (len as number)" :key="index"
						class="dotTest mx-5 round-16 flex flex-row flex-center" 
						:style="{backgroundColor:current==index?'rgb(0, 115, 255)':'rgba(255,255,255,0.5)'}">
							<text :style="{color:current==index?'white':'rgba(255,255,255,1)',fontSize:'9px'}">{{index+1}}</text>
						</view>
					</view>
				</template>
			</x-swiper>
		</x-sheet>
		
	
	<!-- #ifdef APP -->
	</scroll-view>
	<!-- #endif -->
</template>

<script>
	type itemType = {
		image:string,
		title:string
	}
	export default {
		data() {
			return {
				testCount:5,
				activeIndex:0,
				list:[] as itemType[]
			};
		},
		onLoad(){
			let t=  this
			setTimeout(function() {
				t.list = [
					{image:'https://picsum.photos/id/10/800/400',title:"1"} as itemType,
					{image:'https://picsum.photos/id/20/800/400',title:"2"} as itemType,
					{image:'https://picsum.photos/id/30/800/400',title:"3"} as itemType,
					{image:'https://picsum.photos/id/40/800/400',title:"4"} as itemType,
					{image:'https://picsum.photos/id/50/800/400',title:"5"} as itemType,
				] as itemType[]
			
			}, 1000);
		},
		methods:{
			change(page:number){
				console.log('change',page,'***')
			},
			clicktest(page:number){
				let t = this;
				console.log('click',page,'+++')
				// uni.previewImage({
				// 	current:t.list[page].image,
				// 	urls:t.list.map((el:itemType):string=>el.image)
				// })
				
			}
		}
	}
</script>

<style lang="scss">
.dotTest{
	width:16px;
	height:16px;
}
</style>
最近更新