轮播图指示点的使用

系统管理员 2023-01-18 11:29 19阅读 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>
    	export default { 
    		components: { },
    		data() { 
    			return { 
    				info: [{ 
    						colorClass: 'uni-bg-red',
    						url: '../../../static/lunbo/cainilunbo1.jpg',
    						content: '内容 A'
    					},
    					{ 
    						colorClass: 'uni-bg-green',
    						url: '../../../static/lunbo/cainilunbo2.jpg',
    						content: '内容 B'
    					},
    					{ 
    						colorClass: 'uni-bg-blue',
    						url: '../../../static/lunbo/cainilunbo3.jpg',
    						content: '内容 C'
    					},
              { 
              	colorClass: 'uni-bg-blue',
              	url: '../../../static/lunbo/cainilunbo4.jpg',
              	content: '内容 C'
              },
              { 
              	colorClass: 'uni-bg-blue',
              	url: '../../../static/lunbo/cainilunbo5.jpg',
              	content: '内容 C'
              }
    				],
    				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
    			}
    		},
    		onLoad() { 
          this.dotsStyles = this.dotStyle[1]
          this.styleIndex = 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>

效果如图：

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTkzMjE1Nw_size_16_color_FFFFFF_t_70]

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTkzMjE1Nw_size_16_color_FFFFFF_t_70 1]

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTkzMjE1Nw_size_16_color_FFFFFF_t_70 2]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTkzMjE1Nw_size_16_color_FFFFFF_t_70 3]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTkzMjE1Nw_size_16_color_FFFFFF_t_70 4]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTkzMjE1Nw_size_16_color_FFFFFF_t_70 5]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTkzMjE1Nw_size_16_color_FFFFFF_t_70]: /images/20221021/39b1d018c1564fa4821befa5f9cc4ba2.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTkzMjE1Nw_size_16_color_FFFFFF_t_70 1]: /images/20221021/5eda967206434fc6a0b1a1754fc7ff59.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTkzMjE1Nw_size_16_color_FFFFFF_t_70 2]: /images/20221021/2f17e600ddb74175b9cf88ae003a38f2.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTkzMjE1Nw_size_16_color_FFFFFF_t_70 3]: /images/20221021/f5ea98acda95427bbbb5873c3f655b5b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTkzMjE1Nw_size_16_color_FFFFFF_t_70 4]: /images/20221021/86590d52777c47019bc1298af7837ea9.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTkzMjE1Nw_size_16_color_FFFFFF_t_70 5]: /images/20221021/7b297d5653eb48b4a52e6f6b35998f58.png