【微信小程序】实现广告轮播图

最终效果图

一、示例代码

在微信小程序开发文档里，组件模块，视图容器分类下，有swiper和swiper-item组件，这就是用来实现轮播图的组件，并且官方还提供了示例代码和演示效果

swiper

官方示例代码如下：

1、javascript

Page({
  onShareAppMessage() {
    return {
      title: 'swiper',
      path: 'page/component/pages/swiper/swiper'
    }
  },

  data: {
    background: ['demo-text-1', 'demo-text-2', 'demo-text-3'],
    indicatorDots: true,
    vertical: false,
    autoplay: false,
    interval: 2000,
    duration: 500
  },

  changeIndicatorDots() {
    this.setData({
      indicatorDots: !this.data.indicatorDots
    })
  },

  changeAutoplay() {
    this.setData({
      autoplay: !this.data.autoplay
    })
  },

  intervalChange(e) {
    this.setData({
      interval: e.detail.value
    })
  },

  durationChange(e) {
    this.setData({
      duration: e.detail.value
    })
  }
})

2、wxml

<view class="container">
  <view class="page-body">
    <view class="page-section page-section-spacing swiper">
      <swiper indicator-dots="{{indicatorDots}}"
        autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}">
        <block wx:for="{{background}}" wx:key="*this">
          <swiper-item>
            <view class="swiper-item {{item}}"></view>
          </swiper-item>
        </block>
      </swiper>
    </view>
    <view class="page-section" style="margin-top: 40rpx;margin-bottom: 0;">
      <view class="weui-cells weui-cells_after-title">
        <view class="weui-cell weui-cell_switch">
          <view class="weui-cell__bd">指示点</view>
          <view class="weui-cell__ft">
            <switch checked="{{indicatorDots}}" bindchange="changeIndicatorDots" />
          </view>
        </view>
        <view class="weui-cell weui-cell_switch">
          <view class="weui-cell__bd">自动播放</view>
          <view class="weui-cell__ft">
            <switch checked="{{autoplay}}" bindchange="changeAutoplay" />
          </view>
        </view>
      </view>
    </view>

    <view class="page-section page-section-spacing">
      <view class="page-section-title">
        <text>幻灯片切换时长(ms)</text>
        <text class="info">{{duration}}</text>
      </view>
      <slider bindchange="durationChange" value="{{duration}}" min="500" max="2000"/>
      <view class="page-section-title">
        <text>自动播放间隔时长(ms)</text>
        <text class="info">{{interval}}</text>
      </view>
      <slider bindchange="intervalChange" value="{{interval}}" min="2000" max="10000"/>
    </view>
  </view>
</view>

不得不说，这个示例代码的效果跟我们预期想实现的效果比起来还是差一点的，接下来我们开始一点一点修改以达到最终效果图

二、展示优化

1、衔接滑动

官方示例中的图片轮播从最后一张再滑回第一张时，切换特效和其他几张不一样，这样看着会有点突兀，应该改成一样的切换特效才会显得自然，swiper控件添加如下属性和值即可

 circular="true"

2、居中显示

让包裹swiper控件的view居中

.lb_swiper{
  width: 80%;
  margin-left: 5%;
  margin-right: 5%;
  margin-top: 10rpx;
  margin-bottom: 10rpx;
  padding: 5%;
}

3、图片完整

swiper是固定的150px高度，这样如果传入的图片大于这个高度就会被隐藏，那么如何才能显示完整的轮播图图片呢？

解决方法如下：

（1）布局文件中swiper控件添加动态高度属性

<swiper style='height:{{Hei}}'>

（2）布局文件中图片控件绑定load事件

 <image mode="widthFix" bindload='imgH' src="{{item.url}}" >

（3）js文件中根据图片宽高和屏幕宽度来动态设置swiper高度

imgH:function(e){
    var winWid = wx.getSystemInfoSync().windowWidth;         //获取当前屏幕的宽度
    var imgh=e.detail.height;　　　　　　　　　　　　　　　　//图片高度
    var imgw=e.detail.width;							  // 图片宽度
    var swiperH=winWid*imgh/imgw + "px"　　　　　　　　　　//等比设置swiper的高度。  即 屏幕宽度 / swiper高度 = 图片宽度 / 图片高度    ==》swiper高度 = 屏幕宽度 * 图片高度 / 图片宽度
    this.setData({
        Hei:swiperH　　　　　　　　//设置高度
    })
},

4、图片标题

就是轮播图中既显示image也显示text，且文字不会被图片覆盖，这时就需要设置css定位

<swiper style='position:relative'></swiper>

<view style="position:absolute;bottom:94rpx;left:30rpx;width:100%">
     <text style="color:white">{{item.title}}</text>
</view>

三、指示点优化

1、样式优化

默认是几个小灰圆点，这里改成当前页是红色圆角矩形，其他还是小灰圆点

.lb_swiper .wx-swiper-dot{
  width: 8rpx;
  height: 8rpx;
  border-radius:3rpx;
  background: #ccc;
}
.lb_swiper .wx-swiper-dot-active{
  width: 26rpx;
  border-radius:10rpx;
  background: rgba(236, 28, 28, 0.801);
}

2、特效优化

就是图片轮播之间的效果，这里使用了缩放动画作为切换特效

//轮播current切换监听事件
bannerChange: function(e){
  console.log("监听轮播事件",e);
  this.setData({
    bannerCurrent: e.detail.current
  })
},

<swiper  current="{{bannerCurrent}}" bindchange="bannerChange" ></swiper>

<image mode="widthFix" bindload='imgH' src="{{item.url}}" class="slide-image {{bannerCurrent==index?'slide-active':''}}" style="transition: all 1s"></image>
        

.slide-image{
  width:100%;
  height:100%;
  transform: scale(0.6,0.6);
  border-radius:10rpx;
  overflow: hidden;
}
.slide-active{
  transform: scale(1,1);
}

四、所有代码

友情提示：代码中图片地址请换成实际图片地址

1、代码下载

代码地址： https://download.csdn.net/download/diyangxia/15466833

2、lunbo.js

// miniprogram/pages/lunbo/lunbo.js
Page({

  data: {
    background: [{title:'图一',url:'cloud://xigua-8iu5n.7a68-xigua-8iu5n-1301033907/banner1.jpg'}, 
    {title:'图二',url:'cloud://xigua-8iu5n.7a68-xigua-8iu5n-1301033907/banner2.jpg'}, 
    {title:'图三',url:'cloud://xigua-8iu5n.7a68-xigua-8iu5n-1301033907/banner3.jpg'},
    {title:'图四',url:'cloud://xigua-8iu5n.7a68-xigua-8iu5n-1301033907/banner4.jpg'}, 
    {title:'图五',url:'cloud://xigua-8iu5n.7a68-xigua-8iu5n-1301033907/banner5.jpg'}],
    vertical: false,
    interval: 2000,
    duration: 500,
    bannerCurrent: 0,
    Hei:""    
  },
  
//轮播current切换监听事件
bannerChange: function(e){
  console.log("监听轮播事件",e);
  this.setData({
    bannerCurrent: e.detail.current
  })
},


  imgH:function(e){
    var winWid = wx.getSystemInfoSync().windowWidth;         //获取当前屏幕的宽度
    var imgh=e.detail.height;　　　　　　　　　　　　　　　　//图片高度
    var imgw=e.detail.width;
    var swiperH=winWid*imgh/imgw + "px"　　　　　　　　　　//等比设置swiper的高度。  即 屏幕宽度 / swiper高度 = 图片宽度 / 图片高度    ==》swiper高度 = 屏幕宽度 * 图片高度 / 图片宽度
    this.setData({
        Hei:swiperH　　　　　　　　//设置高度
    })
},

  intervalChange(e) {
    this.setData({
      interval: e.detail.value
    })
  },

  durationChange(e) {
    this.setData({
      duration: e.detail.value
    })
  }
})

3、lunbo.wxml

<!--miniprogram/pages/lunbo/lunbo.wxml-->
<view>
  <view class="lb_swiper">
    <swiper style='height:{{Hei}};position:relative' indicator-dots="true" circular="true"
     current="{{bannerCurrent}}" bindchange="bannerChange"
      autoplay="true" interval="{{interval}}" duration="{{duration}}">
      <block wx:for="{{background}}" wx:key="*this">
        <swiper-item>
          <image mode="widthFix" bindload='imgH' src="{{item.url}}" class="slide-image {{bannerCurrent==index?'slide-active':''}}" style="transition: all 1s"></image>
          <view style="position:absolute;bottom:94rpx;left:30rpx;width:100%">
            <text style="color:white">{{item.title}}</text>
          </view>
        </swiper-item>
      </block>
    </swiper>
  </view>
</view>

4、lunbo.wxss

/* miniprogram/pages/lunbo/lunbo.wxss */
.lb_swiper{
  width: 80%;
  margin-left: 5%;
  margin-right: 5%;
  margin-top: 10rpx;
  margin-bottom: 10rpx;
  padding: 5%;
}


.lb_swiper .wx-swiper-dot{
  width: 8rpx;
  height: 8rpx;
  border-radius:3rpx;
  background: #ccc;
}
.lb_swiper .wx-swiper-dot-active{
  width: 26rpx;
  border-radius:10rpx;
  background: rgba(236, 28, 28, 0.801);
}

 
.slide-image{
  width:100%;
  height:100%;
  transform: scale(0.6,0.6);
  border-radius:10rpx;
  overflow: hidden;
}
.slide-active{
  transform: scale(1,1);
}

五、参考博文

1、微信小程序 swiper 轮播图片显示不全解决办法

2、微信小程序----解决swiper指示点样式

3、微信小程序swiper切换特效

六、视频图片混播

1、实现图片视频混合轮播功能，那么首先swiper的item里既有image控件也得有video控件，然后根据type来判断显示哪个控件，此处建议video控件不要多，否则可能会造成页面卡顿，影响用户体验。

  {
        type: 1,
        title: '视频',
        url: 'cloud://xigua-8iu5n.7a68-xigua-8iu5n-1301033907/banner.mp4'
      },

2、可以正常显示image和video控件后，还得让video自动播放，并且能自动获取video的时长，从而动态控制当前轮播页的播放时间，并监听video播放完毕后自动滑到下一页。
如果用户手动滑动swiper，那么需要判断从视频页滑走的时候，不管左滑还是右滑，视频都要停止播放，避免下次滑到视频页时，视频播放到中间某个画面。

获取视频时长

  getSC: function (res) {
   if (this.data.videotime == 0) {
      this.setData({
        videotime: parseInt(res.detail.duration + 1) * 1000
      })
    }
  },

swiper监听

 bannerChange: function (e) {
 	if (e.detail.current == 3) {
      wx.createVideoContext('adVideo', this).play();

      this.setData({
        interval: self.data.videotime,
      })
    } else {
      // 停止视频
      wx.createVideoContext('adVideo', this).stop();
      this.setData({
        interval: 2000,
      })
    }
 }

3、控制video的宽高，官方提示如下图，所以我们要在style中动态设置宽高，这样视频才会显示的更加自然

 <video  style="width:100%;height:{{Hei}}" id="adVideo" bindtimeupdate="getSC"
            src="{{item.url}}" wx:if="{{item.type==1}}" autoplay="true" controls="false"></video>