微信小程序swiper轮播图组件使用方法详解
作者：In Heaven
这篇文章主要为大家详细介绍了微信小程序swiper轮播图组件的使用方法，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了微信小程序swiper轮播图组件的使用，供大家参考，具体内容如下
在components中新建文件夹swiper
components/swiper/swiper.wxml
<!--components/swiper/swiper.wxml-->
<view class="container">
<swiper class="swiper-box" bind:change="swiperChange" interval="4000" circular autoplay>
<block wx:for="{{swiperList}}" wx:key="index">
<swiper-item>
<image class="targetImg" src="{{item}}" mode="aspectFill"></image>
</swiper-item>
</block>
</swiper>
<!--重置小圆点的样式 -->
<view class="dots">
<view class="dotsBox" style='width:{{(swiperList.length*26+swiperList.length*10) + "rpx"}}'>
<!-- <view class="dotsBox" style='width:180rpx'> -->
<block wx:for="{{swiperList}}" wx:key="index">
<text class="dot {{index == currentIndex ? 'dot-active' : ''}}"></text>
</block>
</view>
</view>
</view>
components/swiper/swiper.js
Component({
properties: {
swiperList: {
type: Array,
value: []// 默认数据（可以从引用组件处的属性传入该属性值）
data: {
currentIndex: 0 // 初始高亮下标
methods: {
/* 这里实现控制自定义轮播指示点高亮 */
swiperChange(e) {
this.setData({
currentIndex: e.detail.current
components/swiper/swiper.wxss
/* components/swiper/swiper.wxss */
.container {
position: relative;
.swiper-box {
width: 100%;
height: 364rpx;
.targetImg {
width: 100%;
height: 100%;
/*小圆点 */
.dots {
width: 100%;
height: 4rpx;
display: flex;
position: absolute;
bottom: 30rpx;
.dotsBox {
height: 4rpx;
display: flex;
margin: 0 auto;
/*未选中时的小圆点样式 */
.dot {
width: 26rpx;
height: 4rpx;
border-radius: 2rpx;
margin-right: 10rpx;
background-color: #ffffff;
opacity: 0.4;
/*选中以后的小圆点样式 */
.dot-active {
opacity: 1;
在pages文件中引用
json文件中
"usingComponents": {
"w-swiper":"/components/swiper/swiper"
html文件中
<w-swiper swiperList="{{sprList}}" />js文件中
data:{
sprList:['/images/img.png','/images/img.png'],
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
您可能感兴趣的文章:
