【组件库】自定义swiper组件
海轰Pro
共 4475字,需浏览 9分钟
· 2021-08-23
效果展示
组件设置
步骤1
在pages目录下,新建文件夹components
步骤2
在components下建立新文件夹swiper
在swiper目录下,新建4个文件,分别为
swiper.js swiper.json swiper.wxml swiper.wxss
各文件位置示意图如下:
❝注:此时编译会报错 错误显示在json那里 先不用管 后面把代码复制粘贴上去再编译就好了
步骤3
分别把下面代码复制进swiper目录中的四个文件
swiper.js
Component({
/**
* 组件的属性列表
*/
properties: {
imgUrls: Array,
},
/**
* 组件的初始数据
*/
data: {
currentIndex: 0
},
/**
* 组件的方法列表
*/
methods: {
swiperChange(e) {
this.setData({
currentIndex: e.detail.current
});
}
}
});
swiper.json
{
"component": true,
"usingComponents": {}
}
swiper.wxml
<swiper indicator-dots="false" autoplay="{{true}}" interval="2000" 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>
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;
}
使用组件
步骤1
在需要使用swiper组件的页面的json文件中引入组件
{
"usingComponents": {
"custom-swiper": "../components/swiper/swiper"
}
}
❝注意:../components/swiper/swiper表示组件的位置 这里根据自己实际设置的位置关系进行替换即可
步骤2
在页面的wxml页面中,使用组件代码
<custom-swiper imgUrls="{{carouselImgUrls}}" />
carouselImgUrls
类型:数组 作用:用于存储轮播图图片的地址(网络地址 or 本地地址)
步骤3
在页面的js文件的data中,添加carouselImgUrls变量
data: {
carouselImgUrls: [
/*
图片的个数自定义
图片来源:围脖
作者:少女兔iiilass
侵删
*/
"https://wx1.sinaimg.cn/mw2000/7f97a73fly1gsgixv69f6j20j60j60ui.jpg",
"https://wx1.sinaimg.cn/mw2000/7f97a73fly1gsgixvage4j20j60j6tah.jpg",
"https://wx1.sinaimg.cn/mw2000/7f97a73fly1gsgixvadfnj20j60j60uk.jpg",
"https://wx1.sinaimg.cn/mw2000/7f97a73fly1gsgixvdcswj20j60j6jt6.jpg",
"https://wx1.sinaimg.cn/mw2000/7f97a73fly1gsgixv6kmbj20j60j6dhg.jpg"
],
},
最后只需要编译代码 就可以得到效果图了
结语
注:测试图片来源网络,侵删
创作不易
如果您觉得写的不错的话
点赞+在看+收藏 ❤️
评论
推荐 | 文本分析库cntext2.x使用手册
Tips: 公众号推送后内容只能更改一次,且只能改20字符。 如果内容出问题,或者想更新内容, 只能重复推送。 为了更好的阅读体验,建议阅读本文博客版, 链接地址https://textdata.cn/blog/2024-04-27-cntext2x-usage-tutorial/cntext是大邓
大邓和他的Python
1
强烈推荐一款好用到爆的可视化拖拽库
大厂技术 高级前端 Node进阶点击上方 程序员成长指北,关注公众号回复1,加入高级Node交流群今天给大家推荐这款拖拽组件VueDraggablePlus,试了一下非常不错,据说还被尤雨溪推荐过,咱们国人自己开发的,中国人不骗🇨🇳人,我就再来推
程序员成长指北
2
【Python】coverage,一个有趣的 Python 库!
大家好,今天为大家分享一个有趣的 Python 库 - coveragepy。Github地址:https://github.com/nedbat/coveragepy在软件开发中,测试是确保代码质量和稳定性的关键步骤之一。而代码覆盖率则是衡量测试覆盖代码的程度的重要指标之一。Python cove
机器学习初学者
0
顶级 Javaer 都在用的 20 个类库,真香!
点击关注公众号,Java 干货及时推送↓推荐阅读:投了 100 多份简历后…优秀且经验丰富的Java开发人员的特征之一是对API的广泛了解,包括JDK和第三方库。我花了很多时间来学习API,尤其是在阅读了Effective Java 3rd Edition之后 ,Joshua Bloch建
Java技术栈
1
面试官:在原生input上面使用v-model和组件上面使用有什么区别?
前言面试官:vue3的v-model都用过吧,来讲讲。粉丝:v-model其实就是一个语法糖,在编译时v-model会被编译成:modelValue属性和@update:modelValue事件。一般在子组件中定义一个名为modelValue的props来接收父组件v-model传递的值,然后当子组
高级前端进阶
0
delorean,一个超级实用的 Python 库!
作者通常周更,为了不错过更新,请点击上方“Python碎片”,“星标”公众号大家好,今天为大家分享一个超级实用的 Python 库 - delorean。Github地址:https://github.com/myusuf3/delorean/时间在计算机科学和软件开发中是一个至关重要的概念。Pyt
Python 碎片
0
CleverCSV,一个神奇的 python 库!
我的小册:(小白零基础用Python量化股票分析小册) ,原价299,限时特价2杯咖啡,满100人涨10元。来源丨网络介绍CleverCSV 是一个基于 Python 的库,旨在提供比标准库 csv 更智能和灵活的方法来处理 CSV 文件。该库使用机器学习算法来探测 CSV 文件的正确拨号结构,从而
菜鸟学Python
0
.NET 开源工具库,集成超过1000个扩展方法
前言推荐一个.NET 开源项目,集成了超过1000个扩展方法。项目简介Z.ExtensionMethods是由zzzprojects公司开发并维护的一款开源库,为.NET开发人员提供一系列实用的扩展方法,可以减少重复劳动、提高开发效率,支持.NET Framework 和 .NET Core。该项目
dotNET全栈开发
10