uniapp组件-uni-swiper-dot轮播图指示点

悠悠 2021-07-25 12:40 2025阅读 0赞

官方：[https://ext.dcloud.net.cn/plugin?id=284][https_ext.dcloud.net.cn_plugin_id_284]

![20210221010932474.gif][]

<template>
    	<view class="content">
    		<uni-swiper-dot @clickItem=clickItem :info="info" :current="current" :mode="mode" field="content" :dotsStyles="dotsStyles">
    			<swiper style="height: 400rpx;" @change="change" :current="swiperDotIndex">
    				<swiper-item v-for="(item, index) in info" :key="index">
    					<view>
    						<image  :src="item.url" mode="aspectFill" style="width: 100%;"/>
    					</view>
    				</swiper-item>
    			</swiper>
    		</uni-swiper-dot>
    	</view>
    </template>
    
    <script>
    	export default {
    		components: {},
    		data() {
    			return {
    				info: [{
    						url: 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/094a9dc0-50c0-11eb-b680-7980c8a877b8.jpg',
    						content: '内容 A'
    					},
    					{
    						url: 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/094a9dc0-50c0-11eb-b680-7980c8a877b8.jpg',
    						content: '内容 B'
    					},
    					{
    						url: 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/094a9dc0-50c0-11eb-b680-7980c8a877b8.jpg',
    						content: '内容 C'
    					}
    				],
    				current: 0,
    				mode: 'round',//default 、round 、 indexes、nav
    				swiperDotIndex: 0,
    				dotsStyles:{
    						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'
    					}
    			}
    		},
    		onLoad() {},
    		methods: {
    			change(e) {
    				this.current = e.detail.current
    			},
    			clickItem(e) {
    				this.swiperDotIndex = e
    			}
    		}
    	}
    </script>

注意：上面属性中的mode为nav时，uni-swiper-dot标签中的 field字段必须指定值，这里是info中的"content"

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70][]

此外，dotsStyles还可以有其他样式，如下：

![20210228205013273.png][]

{
    	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'
    } //蓝色

[https_ext.dcloud.net.cn_plugin_id_284]: https://ext.dcloud.net.cn/plugin?id=284
[20210221010932474.gif]: /images/20210725/3fa3c2f8672a4346a941714f21c59553.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70]: /images/20210725/c08ac3de14764540a0af26d112b55765.png
[20210228205013273.png]: /images/20210725/cf5cce1e76f24f9aa0f00bb0a514037f.png