微信小程序--一个简洁好看的轮播图组件（含源码）

效果图

组件源码

文件示意图

js

// components/theSwiper.js
Component({/*** 组件的属性列表*/properties: {imgUrls: Array,},/*** 组件的初始数据*/data: {currentIndex: 0},/*** 组件的方法列表*/methods: {swiperChange(e) {this.setData({currentIndex: e.detail.current});}}
});
/*<view class="dots-box own-class"><view class="dots {{currentIndex == index ? 'bg-333' : ''}}" wx: for="{{ imgUrls }}" wx:key="{{ index }}"></view>
</view >
*/

json

{"component": true,"usingComponents": {}
}

wxml

<swiper indicator-dots="false" autoplay="{{true}}" interval="5000" indicator-dots="{{false}}" indicator-color='#8a8a8a' indicator-active-color='#333' circular="true" class="swiper-block" bindchange="swiperChange" previous-margin="100rpx" next-margin="100rpx" current="{{0}}"><block wx:for="{{imgUrls}}" wx:index="{{index}}" wx:key="{{index}}"><swiper-item class="swiper-item "><image mode="aspectFill" src="{{item}}" class="slide-image {{currentIndex == index ? 'active' : 'common'}}" /></swiper-item></block>
</swiper>

wxss

page{background-color: #fff;
}
.swiper-block {background: #fff;height: 500rpx;width: 100%;
}.swiper-item{display: flex;flex-direction: column;justify-content: start;align-items: flex-start;overflow: unset;width: 550rpx;height: 450rpx;padding-top: 70rpx;padding-bottom: 20rpx;box-sizing: border-box;
}.slide-image{height: 300rpx;width: 450rpx;border-radius: 10rpx;margin: 0rpx 50rpx ;z-index: 1;box-shadow: 10rpx 5px 40rpx rgba(0, 0, 0,0.5);
}
.active{transform: scale(1.3);transition: all .5s ease-in 0s;z-index: 20;opacity: 1;
}
.common{transform: scale(1);transition: all .5s ease-in 0s;z-index: 0;opacity: 0.4;
}.dots-box{display: flex;justify-content: center;align-items: center;
}.dots{width: 30rpx;height: 6rpx;margin: 0 4rpx;background-color: #aaa;margin-top: -80rpx;
}
.bg-333{background-color: #333;
}

如何使用？

使用界面的 wxml 添加

<custom-swiper imgUrls="{{carouselImgUrls}}" />

json
这里组件地址写自己放组件的地址就行

{"usingComponents": {"custom-swiper": "../../components/customSwiper/customSwiper"},
}

js中的data添加数据：

  carouselImgUrls:["https://wx1.sinaimg.cn/mw690/006cV2kkly1g90322akslj30on1hcjvf.jpg","https://wx2.sinaimg.cn/mw690/006cV2kkly1g9032310y9j30on1hcdkw.jpg","https://wx3.sinaimg.cn/mw690/006cV2kkly1g90323z18oj30on1hc77z.jpg","https://wx1.sinaimg.cn/mw690/006cV2kkly1g90324d2mrj30on1hcwic.jpg","https://wx3.sinaimg.cn/mw690/006cV2kkly1g903258itpj30on1hctby.jpg"],

获取更多资料、代码，微信公众号：海轰Pro
回复海轰即可

微信小程序--一个简洁好看的轮播图组件（含源码）相关推荐

制作微信小程序第三天（轮播图导航栏按钮框）
1.轮播图的实现 .wxss swiper{width: 100%;height: calc(100vm * 352 / 1125) } image{width:100% } .wxml <sw ...
微信小程序轮子 - 基于 swiper 常见轮播图轮子大全（竖立卡片式 / 横向卡片式 / 带左右箭头 / 细条指示器）
前言复制 → 粘贴 → 修改 → 你的了. 第一种(竖立卡片式) wxml: <view class='pageBox pageOne'><view class='list'
【微信小程序】好看的轮播图组件
微信小程序好看的轮播图组件效果示例使用步骤第一步: 新建components文件夹第二步: 按照以下目录创建文件:(文件名可以自定义,但后面引入组件时应保持前后一致) 第三步: 各个文件的代码: ...
基于微信小程序共享停车位设计与实现SSM_car.rar（项目源码+数据库文件+微信小程序开发+后端java语言）
主要功能实现了共享车位的创建,车位的管管理,创建车辆.车辆的管理.附近车位.显示车位的编号,车位的位置,车位的状态,车位.可以查看订单记录车位.停费时间,确认时间计费的时间.可以删除,订单也可以确认是 ...
抖音小程序基础之目前提供哪些API（教程含源码）
抖音小程序基础之目前提供哪些API(教程含源码) 小程序开发框架提供丰富的字节跳动宿主原生 API,可以方便的调起字节跳动宿主提供的能力,如获取系统信息等.详细介绍请参考 API 文档. 通 ...
swiper叠加轮播效果（含源码） - 案例篇
swiper叠加轮播效果(含源码) - 效果图效果图: 图片素材来源于网络. [swiper 源码效果 · 对比地址] 代码: <!DOCTYPE html> <html lang ...
vue开发一个实用美观的轮播图组件
网上有不少vue开发的轮播图资源,相信读者也看过不少,这里笔者开发了一个轮播图组件,简单美观实用. 先上示例图: 常见的轮播图都是占满屏幕的形式,像上图所示的轮播图虽然经常见到,但是在一些常见的轮播组 ...
springboot+基于微信小程序的心理医生系统的设计实现毕业设计-附源码191610
小程序springboot心理医生系统摘要信息化社会内需要与之针对性的信息获取途径,但是途径的扩展基本上为人们所努力的方向,由于站在的角度存在偏差,人们经常能够获得不同类型信息,这也是技术最为难 ...
springboot基于微信小程序的电器商城系统的设计与实现毕业设计源码251453
Springboot电器商城小程序的开发摘要近年来,随着移动互联网的快速发展,电子商务越来越受到网民们的欢迎,电子商务对国家经济的发展也起着越来越重要的作用.简单的流程.便捷可靠的支付方式.快捷 ...

微信小程序--一个简洁好看的轮播图组件（含源码）

效果图

组件源码

如何使用？

更多

微信小程序--一个简洁好看的轮播图组件（含源码）相关推荐

最新文章

热门文章