一分钟学会如何自定义小程序轮播图

最近开发小程序项目用到了轮播图，默认的有点单调，作为后端程序员，研究一番最终实现了。本文会从思路，代码详细介绍，相信读过此文后，不管以后在开发中碰到轮播图还是需要自定义修改其他的样式都可以按这个思路解决。

框架	编辑器
uni-app	Hbuilder X

先上原代码和默认样式

<template>
	<swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000">
		<swiper-item>
			<view class="swiper-item">
				<image src="https://cdn.uviewui.com/uview/swiper/swiper1.png" style="height: 350rpx;"></image>
			</view>
		</swiper-item>
		<swiper-item>
			<view class="swiper-item">
				<image src="https://cdn.uviewui.com/uview/swiper/swiper2.png" style="height: 350rpx;"></image>
			</view>
		</swiper-item>
	</swiper>
</template>

再看看我们要实现的目标样式

开搞~

1. 小程序前端样式控制还是css，那么我们找到css就可以修改。先在浏览器打开，方便调试。

2. 鼠标放到轮播图点上，鼠标变成小手后--->点击鼠标右键--->检查

好了，我们定位到了控制样式的css

<div class="uni-swiper-dots uni-swiper-dots-horizontal">
	<div class="uni-swiper-dot uni-swiper-dot-active">
	</div>
	<div class="uni-swiper-dot">
	</div>
</div>

经过我3级英语的反复分析
uni-swiper-dot 是轮播图的默认点样式
uni-swiper-dot-active 在标签class里不停的切换，说明这个是轮播到当前index的样式

3. 这下可以开始搞了，不过先别急着代码里更改，我们先在调试窗口试着更改下css样式，看是否定位正确。

哦了，当我把宽高都变为20px后，明显轮播图的点变大了。这样就确定之前的分析是正确的。

4. 开始在代码里改成我们想要的样式。（如果对css不熟悉的小伙伴，可以继续在浏览器里不停尝试到自己想要的效果再在代码里做更改）

先分析目标样式，发现它的点偏左，且轮播到当前index后样式为一个白色的长条。

5.话不多说，直接在页面style里加入css。

  // 控制轮播图点整体布局在左边
   uni-swiper .uni-swiper-dots{
		left: 60px;
	}
	// 默认样式
	uni-swiper .uni-swiper-dot{
		height: 5px;
		width: 5px;
		background: rgba(0,0,0,.1);
	}
	// 轮播到当前index的样式
	uni-swiper .uni-swiper-dot-active{
		width: 20px;
		height: 3px;
		border-radius: 10px;
		background-color: #FFF ;
	}

o yeah！完工了，我真是个天才。
嗳，不对，浏览器打开怎么还是以前的样式?
是不是编译器没编译最新的？好，再编译一次，不行
是不是浏览器缓存导致的？好，删除缓存，还是不行。。
哦，知道了，一定是没写 !important，它的样式没有覆盖掉，加上，还是不行。。。毁灭吧，累了!
long long time after，再次翻看这段代码，我一直在想为什么在浏览器中更改可以，而在代码里更改却没生效呢？好吧，我承认我百度了，可是翻了很多没有找到我碰到的问题，只能继续翻翻翻，最终碰到一个类似的问题，文章说的是有些组件在编译过后是原生组件,生成后不能更改，需要把css样式放到app.vue中，好吧，抱着试一试的心态把css放到app.vue的style下，没想到问题解决了。。

6. 贴改完的H5效果图

哦 yeah，这次终于完工了吧。

是的，你没猜错。当我把代码运行在微信小程序的时候，那熟悉的2个黑点我真的不忍直视。why？

打起精神接着来吧

1. 在微信小程序中调试竟然原封不动的展示了我的代码

根本没有发现什么dot样式之类的，那我还怎么调？

（这里我没有找到其他办法，有懂的小伙伴可以留言分享下微信开发工具如何调试，提前感谢。）

不过我还是找到了一个办法可以调试，就是在他的官网，这个办法以后可以用到其他的css修改上，不只是swiper。

2. 浏览器打开官网微信小程序开发 https://www.hsoar.com

3. 我们按照之前的方法定位元素，找到css

发现他的class 名字在h5是uni-开头，在微信小程序中是wx-开头，
和之前的不一样，这样导致不生效，好，那我们把代码改成wx-开头。

最终效果

有些小伙伴应该看到之前的标题栏不存在了，这个很简单，在uni-app里pages.json文件修改"navigationStyle": "custom"。小程序的修改方式大家自行百度。

"pages": [{
		"path": "pages/index/index",
		"style": {
			"navigationBarTitleText": "轮播图demo",
			"navigationStyle": "custom"
		}
	}

最终css代码

// ifdef H5 代表在h5环境下生效，以此类推。
//如果只需在微信下修改，只需把ifdef mp-weixin下内容复制到app.vue的style中
/* #ifdef H5 */
	// 控制轮播图点整体布局在左边
	uni-swiper .uni-swiper-dots{
		left: 60px;
	}
	// 默认样式
	uni-swiper .uni-swiper-dot{
		height: 5px;
		width: 5px;
		background: rgba(0,0,0,.1);
	}
	// 轮播到当前index的样式
	uni-swiper .uni-swiper-dot-active{
		width: 20px;
		height: 3px;
		border-radius: 10px;
		background-color: #FFF ;
	}
	/* #endif */
	/* #ifdef MP-WEIXIN */
	// 控制轮播图点整体布局在左边
	wx-swiper .wx-swiper-dots{
		left: 60px;
	}
	// 默认样式
	wx-swiper .wx-swiper-dot{
		background: rgba(0,0,0,.1);
		height: 5px;
		width: 5px;
	}
	// 轮播到当前index的样式
	wx-swiper .wx-swiper-dot-active{
		width: 20px;
		height: 3px;
		border-radius: 10px;
		background-color: #FFF ;
	}
	/* #endif */

本人后端一枚，不过前端现在样式一般都能做到。(给我个设计图或者素材可以直接写出来)
其实基础css很容易学，在这里给后端程序员一个推荐，去看flex布局，最多也就2个小时时间，最最重要的是一定要练习，我做小程序前后端开发都是自己做，或许我接触的少，但是在我做的项目中flex布局可以搞定99%的事，剩下的position: absolute;就可以解决。只要把这两块掌握了，用uni-app也好，用小程序员原生也好，都是很简单的。