当前位置:网站首页>【微信小程序】好看的轮播图组件
【微信小程序】好看的轮播图组件
2022-07-04 03:52:00 【Pulseum】
微信小程序好看的轮播图组件效果示例
使用步骤
第一步:
新建components文件夹
第二步:
按照以下目录创建文件:(文件名可以自定义,但后面引入组件时应保持前后一致)
第三步:
各个文件的代码:
customSwiper.js:
// components/customSwiper.js
Component({
/** * 组件的属性列表 */
properties: {
imgUrls: Array,
},
/** * 组件的初始数据 */
data: {
currentIndex: 0
},
/** * 组件的方法列表 */
methods: {
swiperChange(e) {
this.setData({
currentIndex: e.detail.current
});
}
}
})
customSwiper.json:
{
"component": true,
"usingComponents": {
}
}
customSwiper.wxml:
<!--components/customSwiper.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>
customSwiper.wxss:
/* components/customSwiper.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;
}
第四步:
在所需页面引入该组件
以在home页面引入为例
home.wxml:
<!--pages/home/home.wxml-->
<view>
<!-- 轮播图2 -->
<custom-swiper imgUrls="{
{carouselImgUrls}}" />
</view>
home.js: (轮播图数据根据自己的图片路径更改)
// pages/home/home.js
Page({
/** * 页面的初始数据 */
data: {
// 轮播图2数据 (轮播图数据根据自己的图片路径更改)
carouselImgUrls:[
"/images/yyqx1.jpg",
"/images/yyqx2.jpg",
"/images/yyqx3.jpg",
"/images/yyqx4.jpg",
"/images/yyqx5.jpg"
],
},
/** * 生命周期函数--监听页面加载 */
onLoad: function (options) {
},
/** * 生命周期函数--监听页面初次渲染完成 */
onReady: function () {
},
/** * 生命周期函数--监听页面显示 */
onShow: function () {
},
/** * 生命周期函数--监听页面隐藏 */
onHide: function () {
},
/** * 生命周期函数--监听页面卸载 */
onUnload: function () {
},
/** * 页面相关事件处理函数--监听用户下拉动作 */
onPullDownRefresh: function () {
},
/** * 页面上拉触底事件的处理函数 */
onReachBottom: function () {
},
/** * 用户点击右上角分享 */
onShareAppMessage: function () {
}
})
home.json:
{
"usingComponents": {
"custom-swiper": "../../components/customSwiper/customSwiper"
}
}
home.wxss: 无需增加样式(组件带有)
结束
根据以上步骤就可以正确显示轮播图组件了,只需更改图片路径即可。
边栏推荐
- [webrtc] M98 Ninja build and compile instructions
- Leetcode brush questions: binary tree 05 (flip binary tree)
- Flink学习8:数据的一致性
- How was my life in 2021
- Confession code collection, who says program apes don't understand romance
- Myslq delete followed by limit
- VIM mapping command
- 资深开发人员告诉你,怎样编写出优秀的代码?
- Unity资源路径
- Redis:哈希hash类型数据操作命令
猜你喜欢
Perf simple process for multithreaded profile
I Build a simple microservice project
2020 Bioinformatics | TransformerCPI
微信脑力比拼答题小程序_支持流量主带最新题库文件
Keysight N9320B射频频谱分析仪解决轮胎压力监测方案
一个漂亮的API文档生成工具
Tcp- simple understanding of three handshakes and four waves
苹果CMS仿西瓜视频大气响应式视频模板源码
仿《游戏鸟》源码 手游发号评测开服开测合集专区游戏下载网站模板
*. No main manifest attribute in jar
随机推荐
(pointeur) Écrivez - vous une fonction qui compare la taille de la chaîne et fonctionne comme strcmp.
Leetcode skimming: binary tree 04 (sequence traversal of binary tree)
(pointer) write a function to compare the size of strings by yourself, which is similar to StrCmp.
Flink learning 8: data consistency
Why is the probability of pod increasing after IPtable
Katalon使用script实现查询List大小
Idea configuration 360zip open by default -- external tools
Msgraphmailbag - search only driveitems of file types
Distributed system: what, why, how
tdk-lambda电源主要应用
Flink学习7:应用程序结构
批处理初识
RHCSA 08 - automount配置
仿《游戏鸟》源码 手游发号评测开服开测合集专区游戏下载网站模板
毕业设计项目
Lnk2038 detected a mismatch of "runtimelibrary": the value "md_dynamicrelease" does not match the value "mdd_dynamicdebug" (in main.obj)
统计遗传学:第三章,群体遗传
北漂程序员,月薪20K,一年攒15W,正常吗?
一位毕业生的自我分享
The maximum expiration time of client secret in azure ad application registration is modified to 2 years