如何调整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
}
修改dot的样式
修改data里的mode,这里默认四种样式 default,long,nav,indexes,可以参考官方示例,如果还不满意,就自己修改就好了。
总结
通过这个组件可以节省不少时间,希望对大家有用
https://ext.dcloud.net.cn/plugin?id=284
还没有评论,来说两句吧...