微信小程序轮播图怎么做(微信小程序广告轮播图的制作)

我的意中人是盖世英雄认证优质作者

2022-04-20 19:14:44

广告轮播图几乎每个小程序都会用到的，所以有必要讲解一下，老规矩，先看效果图，其实不看我相信大家也都知道，拿出来讲就是让大家熟悉一下小程序基础控件swiper的属性

swiper属性介绍

属性名	作用	参数值
indicator-dots	是否显示面板指示点	true/false 默认是false
indicator-color	指示点颜色	默认值rgba(0, 0, 0, .3)
indicator-active-color	当前选中的指示点颜色	默认颜色#000000
autoplay	是否自动切换	true/false 默认是false
interval	自动切换时间间隔	number 默认是5000
duration	滑动动画时长	number 默认是500
vertical	滑动方向是否为纵向	true/false 默认是false
bindchange	current 改变时会触发 change 事件，event.detail = {current: current, source: source}

广告轮播图效果的实现

一、wxml界面的实现

<view class='title-line'>swiper</view>

<swiper indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}" interval="{{interval}}" vertical="{{isVertical}}" duration="{{duration}}" circular='false'>
<swiper-item wx:for="{{imgUrls}}">
<image src="{{item}}" />
</swiper-item>
</swiper>
滑动进度条控制滚动过度时间
<slider bindchange="durationChange" show-value min="500" max="2000"/>
<view class='line'></view>
<swiper indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}" interval="{{interval}}" vertical="{{true}}" duration="{{duration}}" circular='true'>
<block wx:for="{{imgUrls}}">
<swiper-item>
<image src="{{item}}" />
</swiper-item>
</block>
</swiper>

界面实现简单，运用小程序封装的控件swipe就可以轻松实现，为了对比效果，我生成了两个广告轮播图，一个是横行滚动，一个是纵向滚动

二、xxx.js属性的控制

Page({
data: {
// banner
imgUrls: [
'http://7xnmrr.com1.z0.glb.clouddn.com/red.png',
'http://7xnmrr.com1.z0.glb.clouddn.com/yellow.png',
'http://7xnmrr.com1.z0.glb.clouddn.com/green.png'
],
indicatorDots: true, //是否显示面板指示点
autoplay: true, //是否自动切换
interval: 3000, //自动切换时间间隔,3s
duration: 1000, //滑动动画时长1s
},
durationChange:function(e)
{
this.setData({
duration: e.detail.value
})
},