微信小程序广告轮播图的制作

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

效果图.gif

swiper属性介绍

广告轮播图效果的实现

一、wxml界面的实现

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

<!-- banner -->
<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
    })
  },

js中的属性我都在代码中注释了，想要更改属性，直接修改对应的值就好，durationChange是用来控制滑动动画时长的，通过滑动进度条即可

三、wxss样式

* 直接设置swiper属性 */

swiper {
  height: 400rpx;
}

swiper-item image {
  width: 100%;
  height: 100%;
}

别小看这几行代码，代码君之前为了设置轮播图从满屏幕，找了好久，才设置成功的，一般使用的时候，把上面代码拷贝进去就行，顶多去设置一下swiper的高度

总结

今天周五，所以讲解的内容也比较少，相信大家看一遍，大概就学的差不多啦，最后祝大家周末愉快~

相关文章推荐：微信小程序实战篇-购物车