小程序层叠轮播图
2021/6/18 17:31:28
本文主要是介绍小程序层叠轮播图,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
刚开始并没有接触到层叠轮播图,拿到这个案列的时候特意查阅了一下资料,发现previousmargin和nextmargin可以试下层叠效果,就尝试着用了一下。
微信小程序XX.wxml下
<view class="banner-swiper">
<swiper indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}" current='{{swiperCurrent}}'
indicator-color="{{beforeColor}}" indicator-active-color="{{afterColor}}" circular='{{circular}}'
previous-margin="{{previousmargin}}" next-margin="{{nextmargin}}" bindchange="swiperChange" >
<block wx:for="{{arr}}" wx:key="key">
<swiper-item>
<image src="{{item.images}}" class="slide-image{{index == swiperCurrent ? ' active' : ''}}"
bindchange="chuangEvent" id="{{index}}"></image>
</swiper-item>
</block>
</swiper>
</view>
微信小程序XX.wxss下
.banner-swiper {
width: 100%;
height: 400rpx;
overflow: hidden;
}
swiper {
display: block;
height: 400rpx;
position: relative;
}
.slide-image {
width: 97%;
display: block;
margin: 0 auto;
height: 360rpx;
margin-top:20rpx;
border-radius: 10rpx;
}
.active{
margin-top:0rpx;
height: 400rpx;
border-radius:10rpx;
}
微信小程序下XX.js下
data: {
//轮播图
swiperCurrent: 1,
arr: [{
images: 'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1236346326,307764142&fm=26&gp=0.jpg'
},
{
images: 'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=2220007103,2896848207&fm=26&gp=0.jpg'
},
{
images: 'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1122456855,1999792981&fm=26&gp=0.jpg'
}],
indicatorDots: true,
autoplay: true,
interval: 2000,
duration: 1000,
circular: true,
beforeColor: "white",//指示点颜色
afterColor: "coral",//当前选中的指示点颜色
previousmargin: '40rpx',//前边距
nextmargin: '40rpx',//后边距
},
//轮播图的切换事件
swiperChange: function (e) {
console.log(e.detail.current);
this.setData({
swiperCurrent: e.detail.current //获取当前轮播图片的下标
})
},
//滑动图片切换
chuangEvent: function (e) {
this.setData({
swiperCurrent: e.currentTarget.id
})
}
相关地址:
https://blog.csdn.net/weixin_42679187/article/details/89450982?utm_medium=distribute.pc_relevant_download.none-task-blog-2~default~BlogCommendFromBaidu~default-5.nonecase&depth_1-utm_source=distribute.pc_relevant_download.none-task-blog-2~default~BlogCommendFromBaidu~default-5.nonecas
这篇关于小程序层叠轮播图的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-10-04微信小程序如何实现点击图片查看大图功能-icode9专业技术文章分享
- 2024-09-28uniapp 小程序获取到数据库的换行符怎么展示-icode9专业技术文章分享
- 2024-09-20微信小程序全栈项目实战:从零开始的全面指南
- 2024-09-20微信小程序项目实战:零基础入门教程
- 2024-09-19微信小程序项目中miniprogram_npm文件跟node_modules文件的差别-icode9专业技术文章分享
- 2024-08-27小程序 单行显示,超出部分省略号显示的方法代码-icode9专业技术文章分享
- 2024-08-27微信小程序如何获取到特种设备的刘海屏高度-icode9专业技术文章分享
- 2024-08-27微信小程序如何获取苹果手机底部一横线高度信息方法代码-icode9专业技术文章分享
- 2024-08-27微信小程序 顶部状态栏标签背景为none但还是看不到状态栏什么原因-icode9专业技术文章分享
- 2024-08-21微信小程序全栈入门:从零开始的一站式指南