如何调整uniapp轮播图swiper的样式（dot的样式和位置）-向日葵屋

如何调整uniapp轮播图swiper的样式（dot的样式和位置）

背景

官网文档不解释很多，这里我来详细说明下，很简单可以做到任意修改自己想要的效果。

需求

我们需要做一个轮播图，其他没什么但是dot的位置要偏上一些，而且样式有要求。
在这里插入图片描述

实现

利用uniapp官网的demo组件uni-swiper-dot，这个组件可以只用几行代码实现想要的效果，代码如下

<template>
    <view class="content">
        <uni-swiper-dot :info="info" :current="current" :mode="mode" :dots-styles="dotsStyles" field="content">
            <swiper class="swiper-box" @change="change">
                <swiper-item v-for="(item ,index) in info" :key="index">
                    <view :class="item.colorClass" class="swiper-item">
                        <image :src="item.url" mode="aspectFill" />
                    </view>
                </swiper-item>
            </swiper>
        </uni-swiper-dot>
    </view>
</template>
<script>
    import uniSwiperDot from '@/components/uni-swiper-dot/uni-swiper-dot.vue'
    export default {
        components: {
            uniSwiperDot
        },
        data() {
            return {
                info: [{
                        colorClass: 'uni-bg-red',
                        url: 'https://img-cdn-qiniu.dcloud.net.cn/uniapp/images/shuijiao.jpg',
                        content: '内容 A'
                    },
                    {
                        colorClass: 'uni-bg-green',
                        url: 'https://img-cdn-qiniu.dcloud.net.cn/uniapp/images/muwu.jpg',
                        content: '内容 B'
                    },
                    {
                        colorClass: 'uni-bg-blue',
                        url: 'https://img-cdn-qiniu.dcloud.net.cn/uniapp/images/cbd.jpg',
                        content: '内容 C'
                    }
                ],            
                modeIndex: -1,
                styleIndex: -1,
                current: 0,
                mode: 'long',
                dotsStyles: {
                        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',
                        bottom:100
                    }
            }
        },
        onLoad() {},
        methods: {
            change(e) {
                this.current = e.detail.current
            },
        }
    }
</script>
<style>
    page {
        display: flex;
        flex-direction: column;
        box-sizing: border-box;
        background-color: #fff
    }
    view {
        font-size: 28upx;
        line-height: inherit
    }
    .example {
        padding: 0 30upx 30upx
    }
    .example-title {
        font-size: 32upx;
        line-height: 32upx;
        color: #777;
        margin: 40upx 25upx;
        position: relative
    }
    .example .example-title {
        margin: 40upx 0
    }
    .example-body {
        padding: 0 40upx
    }
    .swiper-box {
        height: 400upx;
    }
    .swiper-item {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100%;
        background: #eee;
        color: #fff;
    }
    .swiper-item image {
        width: 100%;
        height: 100%;
    }
    .uni-bg-red {
        background: #ff5a5f;
    }
    .uni-bg-green {
        background: #09bb07;
    }
    .uni-bg-blue {
        background: #007aff;
    }
    .uni-swiper__box {
        margin-top: 30upx;
    }
    .uni-swiper__header {
        padding: 0 30upx;
        font-size: 32upx;
        color: #333;
    }
    .uni-swiper__info {
        display: flex;
        padding: 0 15upx;
    }
    .uni-swiper__info-item {
        display: flex;
        justify-content: center;
        align-items: center;
        margin: 15upx;
        height: 60upx;
        width: 100%;
        font-size: 28upx;
        color: #333;
        border: 1px #eee solid;
        border-radius: 10upx;
    }
    .uni-swiper__info-dots {
        width: 16upx;
        height: 16upx;
        border-radius: 50%;
        background: #333333;
        margin-left: 10upx;
        box-sizing: border-box;
    }
    .uni-swiper__info-dots:first-child {
        margin: 0;
    }
    .active {
        border: 1px #000 solid;
    }
    slider {
        width: 100%;
    }
</style>

修改dot的距离底部的位置

增加一个bottom，默认值是10，这里我修改为了100（根据需要），dot的位置就上移了。

dotsStyles: {
                        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',
                        bottom:100
                    }