uniapp封装一个轮播组件

小灰灰 2022-08-30 11:55 310阅读 0赞

<template>
    	<view class="content">
    		<uni-swiper-dot class="uni-swiper-dot-box" @clickItem=clickItem :info="info" :current="current" :mode="mode"
    			:dots-styles="dotsStyles" field="content">
    			<swiper class="swiper-box" @change="change" :current="swiperDotIndex" autoplay="true">
    				<swiper-item v-for="(item, index) in info" :key="index">
    					<view :class="item.colorClass" class="swiper-item">
    						<image class="image" :src="item.url" mode="aspectFill" />
    					</view>
    				</swiper-item>
    			</swiper>
    		</uni-swiper-dot>
    		
    		<view style="display: none;">
    			<uni-section title="模式选择" type="line"></uni-section>
    			<view class="example-body">
    				<view :class="{ active: modeIndex === 0 }" class="example-body-item" @click="selectMode('default', 0)">
    					<text class="example-body-item-text">default</text></view>
    				<view :class="{ active: modeIndex === 1 }" class="example-body-item" @click="selectMode('dot', 1)"><text
    						class="example-body-item-text">dot</text></view>
    				<view :class="{ active: modeIndex === 2 }" class="example-body-item" @click="selectMode('round', 2)">
    					<text class="example-body-item-text">round</text></view>
    				<view :class="{ active: modeIndex === 3 }" class="example-body-item" @click="selectMode('nav', 3)"><text
    						class="example-body-item-text">nav</text></view>
    				<view :class="{ active: modeIndex === 4 }" class="example-body-item" @click="selectMode('indexes', 4)">
    					<text class="example-body-item-text">indexes</text></view>
    			</view>
    			<uni-section title="颜色样式选择" type="line"></uni-section>
    			<view class="example-body">
    				<template v-if="mode !== 'nav'">
    					<view v-for="(item, index) in dotStyle" :class="{ active: styleIndex === index }" :key="index"
    						class="example-body-item" @click="selectStyle(index)">
    						<view :style="{ 'background-color': item.selectedBackgroundColor, border: item.selectedBorder }"
    							class="example-body-dots" />
    						<view :style="{ 'background-color': item.backgroundColor, border: item.border }"
    							class="example-body-dots" />
    						<view :style="{ 'background-color': item.backgroundColor, border: item.border }"
    							class="example-body-dots" />
    					</view>
    				</template>
    				<template v-if="mode === 'nav'">
    					<view v-for="(item, index) in dotStyle" :class="{ active: styleIndex === index }" :key="index"
    						:style="{ 'background-color': item.selectedBackgroundColor }" class="example-body-item"
    						@click="selectStyle(index)">
    						<text class="example-body-item-text" :style="{ color: item.color }">内容</text>
    					</view>
    				</template>
    			</view>
    		</view>
    	</view>
    
    </template>
    
    <script>
    	import ss from "../uni-swiper-dot/uni-swiper-dot.vue"
    	export default { 
    		components: { },
    		name: "my_Carousel",
    		data() { 
    			return { 
    				info: [{ 
    						colorClass: 'uni-bg-red',
    						url: 'http://jifenyx.cn/resource//banner/20201125165752567_portraint.png',
    						content: '内容 A'
    					},
    					{ 
    						colorClass: 'uni-bg-green',
    						url: 'http://jifenyx.cn/resource//banner/20210409094941926_portraint.png',
    						content: '内容 B'
    					}
    				],
    				dotStyle: [{ 
    						backgroundColor: 'rgba(0, 0, 0, .3)',
    						border: '1px rgba(0, 0, 0, .3) solid',
    						color: '#fff',
    						selectedBackgroundColor: 'rgba(0, 0, 0, .9)',
    						selectedBorder: '1px rgba(0, 0, 0, .9) solid'
    					},
    					{ 
    						backgroundColor: 'rgba(255, 90, 95,0.3)',
    						border: '1px rgba(255, 90, 95,0.3) solid',
    						color: '#fff',
    						selectedBackgroundColor: 'rgba(255, 90, 95,0.9)',
    						selectedBorder: '1px rgba(255, 90, 95,0.9) solid'
    					},
    					{ 
    						backgroundColor: 'rgba(83, 200, 249,0.3)',
    						border: '1px rgba(83, 200, 249,0.3) solid',
    						color: '#fff',
    						selectedBackgroundColor: 'rgba(83, 200, 249,0.9)',
    						selectedBorder: '1px rgba(83, 200, 249,0.9) solid'
    					}
    				],
    				modeIndex: -1,
    				styleIndex: -1,
    				current: 0,
    				mode: 'default',
    				dotsStyles: { },
    				swiperDotIndex: 0
    			}
    		}, 
    		mounted(){ 
    		
    			this.mode = "dot"
    			this.modeIndex = 1
    			this.styleIndex = -1
    			this.dotsStyles = this.dotStyle[1]
    		}, 
    		methods: { 
    			change(e) { 
    				this.current = e.detail.current
    				//console.log(this.current)
    			},
    			selectStyle(index) { 
    				this.dotsStyles = this.dotStyle[index]
    				this.styleIndex = index
    				console.log(111, index)
    			},
    			selectMode(mode, index) { 
    				this.mode = mode
    				this.modeIndex = index
    				this.styleIndex = -1
    				this.dotsStyles = this.dotStyle[0]
    				console.log(222, mode, index)
    			},
    			clickItem(e) { 
    				this.swiperDotIndex = e
    				console.log(333)
    			}
    		}
    	}
    </script>
    
    <style>
    	@charset "UTF-8";
    
    	/* 头条小程序组件内不能引入字体 */
    	/* #ifdef MP-TOUTIAO */
    	@font-face { 
    		font-family: uniicons;
    		font-weight: normal;
    		font-style: normal;
    		src: url("~@/static/uni.ttf") format("truetype");
    	}
    
    	/* #endif */
    	/* #ifndef APP-NVUE */
    	page { 
    		display: flex;
    		flex-direction: column;
    		box-sizing: border-box;
    		background-color: #efeff4;
    		min-height: 100%;
    		height: auto;
    	}
    
    	view { 
    		font-size: 14px;
    		line-height: inherit;
    	}
    
    	.example { 
    		padding: 0 15px 15px;
    	}
    
    	.example-info { 
    		padding: 15px;
    		color: #3b4144;
    		background: #ffffff;
    	}
    
    	.example-body { 
    		/* #ifndef APP-NVUE */
    		display: flex;
    		/* #endif */
    		flex-direction: row;
    		flex-wrap: wrap;
    		justify-content: center;
    		padding: 0;
    		font-size: 14px;
    		background-color: #ffffff;
    	}
    
    	/* #endif */
    	.example { 
    		padding: 0 15px;
    	}
    
    	.example-info { 
    		/* #ifndef APP-NVUE */
    		display: block;
    		/* #endif */
    		padding: 15px;
    		color: #3b4144;
    		background-color: #ffffff;
    		font-size: 14px;
    		line-height: 20px;
    	}
    
    	.example-info-text { 
    		font-size: 14px;
    		line-height: 20px;
    		color: #3b4144;
    	}
    
    	.example-body { 
    		flex-direction: column;
    		padding: 15px;
    		background-color: #ffffff;
    	}
    
    	.word-btn-white { 
    		font-size: 18px;
    		color: #FFFFFF;
    	}
    
    	.word-btn { 
    		/* #ifndef APP-NVUE */
    		display: flex;
    		/* #endif */
    		flex-direction: row;
    		align-items: center;
    		justify-content: center;
    		border-radius: 6px;
    		height: 48px;
    		margin: 15px;
    		background-color: #007AFF;
    	}
    
    	.word-btn--hover { 
    		background-color: #4ca2ff;
    	}
    
    	.swiper-box { 
    		height: 200px;
    	}
    
    	.swiper-item { 
    		/* #ifndef APP-NVUE */
    		display: flex;
    		/* #endif */
    		flex-direction: column;
    		justify-content: center;
    		align-items: center;
    		background-color: #999;
    		color: #fff;
    	}
    
    	.image { 
    		width: 750rpx;
    	}
    
    	@media screen and (min-width: 500px) { 
    		.uni-swiper-dot-box { 
    			width: 400px;
    			margin: 0 auto;
    			margin-top: 8px;
    		}
    
    		.image { 
    			width: 100%;
    		}
    	}
    
    	/* #ifdef H5 */
    	/deep/ .image img { 
    		-webkit-user-drag: none;
    		-khtml-user-drag: none;
    		-moz-user-drag: none;
    		-o-user-drag: none;
    		user-drag: none;
    	}
    
    	/* #endif */
    
    	.uni-bg-red { 
    		background-color: #ff5a5f;
    	}
    
    	.uni-bg-green { 
    		background-color: #09bb07;
    	}
    
    	.uni-bg-blue { 
    		background-color: #007aff;
    	}
    
    	.example-body { 
    		/* #ifndef APP-NVUE */
    		display: flex;
    		/* #endif */
    		flex-direction: row;
    		padding: 20rpx;
    	}
    
    	.example-body-item { 
    		flex-direction: row;
    		justify-content: center;
    		align-items: center;
    		margin: 15rpx;
    		padding: 15rpx;
    		height: 60rpx;
    		/* #ifndef APP-NVUE */
    		display: flex;
    		padding: 0 15rpx;
    		/* #endif */
    		flex: 1;
    		border-color: #e5e5e5;
    		border-style: solid;
    		border-width: 1px;
    		border-radius: 5px;
    	}
    
    	.example-body-item-text { 
    		font-size: 28rpx;
    		color: #333;
    	}
    
    	.example-body-dots { 
    		width: 16rpx;
    		height: 16rpx;
    		border-radius: 50px;
    		background-color: #333333;
    		margin-left: 10rpx;
    	}
    
    	.active { 
    		border-style: solid;
    		border-color: #007aff;
    		border-width: 1px;
    	}
    </style>

效果图：

![在这里插入图片描述][4bb38963ea7fc4c92a749930e625d5ed.png]

[4bb38963ea7fc4c92a749930e625d5ed.png]: /images/20220829/f67c78464fa242028cedd26ecc9f9559.png