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