分享

微信小程序轮播图两种实现方法及效果-小程序教程

发布于:2020-02-23 21:41    阅读次数:50    作者:云码素材    分类:行业经验    关键词:小程序教程  小程序  

在制作微信小程序时,要用到轮播图,查看了微信小程序官方的手册,仔细看了看分为两种实现方法。一种是自带的轮播图,也是默认的,另外一种是自定义轮播图。下面把这两种实现的方法都分享给大家,代码如下:


一.js代码如下:

//index.js
Page({

/**
  * 页面的初始数据
  */
data: {
/*轮播图 配置*/
imgUrls: [
'/images/lb1.png',
'/images/lb2.png',
'/images/lb3.png'
],
indicatorDots: true, // 是否显示面板指示点
indicatorColor: "#2d7dee", // 指示点颜色
afterColor: "white", // 当前选中的指示点颜色
autoplay: true, // 是否自动切换
interval: 5000, // 自动切换时间间隔
duration: 500, // 滑动动画时长
circular: true, // 是否采用衔接滑动
/*自定义轮播图 配置*/
slider: [
{ id: '0', linkUrl: 'pages/index/index', picUrl: '/images/lb1.png' },
{ id: '0', linkUrl: 'pages/index/index', picUrl: '/images/lb2.png' },
{ id: '0', linkUrl: 'pages/index/index', picUrl: '/images/lb3.png' }
],
swiperCurrent: 0
},

/**
  * 生命周期函数--监听页面加载
  */
onLoad: function (options) {

},

//轮播图的切换事件 
swiperChange: function (e) {
//只要把切换后当前的index传给<swiper>组件的current属性即可 
this.setData({
swiperCurrent: e.detail.current
})
},
//点击指示点切换 
chuangEvent: function (e) {
this.setData({
swiperCurrent: e.currentTarget.id
})
}
})

二.页面代码如下:

<!--index.wxml-->
<view>
<!-- 轮播图 -->
<swiper class="swiper" indicator-dots="{{indicatorDots}}" 
indicator-active-color="{{afterColor}}"
autoplay="{{autoplay}}" indicator-color="{{indicatorColor}}" 
interval="{{interval}}" duration="{{duration}}" circular="{{circular}}">
<block wx:for="{{imgUrls}}" wx:key="id">
<swiper-item>
<image src="{{item}}" class="slide-image" />
</swiper-item>
</block>
</swiper>
<!-- 自定义轮播图 -->
<view class="swiper-container"> 
<swiper circular="true" autoplay="auto" interval="5000" duration="500" 
current="{{swiperCurrent}}" bindchange="swiperChange" class="swiper"> 
<block wx:for="{{slider}}" wx:key="unique"> 
<swiper-item data-id="{{item.id}}" data-url="{{item.linkUrl}}"> 
<image src="{{item.picUrl}}" class="img"></image> 
</swiper-item> 
</block> 
</swiper> 
<view class="dots"> 
<block wx:for="{{slider}}" wx:key="unique"> 
<view class="dot{{index == swiperCurrent ? ' active' : ''}}" bindtap="chuangEvent" 
id="{{index}}">{{index+1}}</view> 
</block> 
</view> 
</view>
</view>

三.样式代码如下:

/**index.wxss**/
/**轮播图 start**/
.swiper {
height: 400rpx;
width: 100%;
}
.swiper image {
height: 100%;
width: 100%;
}
/**轮播图 end**/
/**自定义轮播图 start**/
.swiper-container{
position: relative;
}
.swiper-container .swiper{
height: 400rpx;
}
.swiper-container .swiper .img{
width: 100%;
height: 100%;
}
.swiper-container .dots{
position: absolute;
right: 40rpx;
bottom: 20rpx;
display: flex;
justify-content: center;
}
.swiper-container .dots .dot{
margin: 0 10rpx;
width: 28rpx;
height: 28rpx;
background: #fff;
border-radius: 50%;
transition: all .6s;
font: 300 18rpx/28rpx "microsoft yahei";
text-align: center;
}
.swiper-container .dots .dot.active{
background: #f80;
color:#fff;
}
/**自定义轮播图 end**/

四.运行的结果如下图:

微信小程序轮播图.jpg


程序员你不是一个人战斗,欢迎加小编微信:xnynews 加入500人微信群,一起学习,一起进步,一起分享资源!(备注:云码素材)

欢迎关注云码素材,交流分享! 云码素材原创作品,更多精品资源下载,技术分享请关注,私信云码素材!云码素材原创作品,转载请联系微信:xnynews


云码素材公众号


推荐源码
查看更多

免费领
签到客服赚钱 反馈 回顶部