文章目录

一、示例代码
二、展示优化
- 1、衔接滑动
- 2、居中显示
- 3、图片完整
- 4、图片标题
三、指示点优化
- 1、样式优化
- 2、特效优化
四、所有代码
五、参考博文
六、视频图片混播

最终效果图

一、示例代码

在微信小程序开发文档里，组件模块，视图容器分类下，有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>

【微信小程序】实现广告轮播图相关推荐

php实现轮播图代码,微信小程序实例：轮播图的代码实现与分析
本篇文章给大家带来的内容是关于微信小程序实例:轮播图的代码实现与分析,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 本文来说说轮播图,最常见的一个轮播图,中间带小圆点,自动轮播. S ...
微信小程序：swiper轮播图添加外层圆角
微信小程序:swiper轮播图添加外层圆角 .swiper-wrap{overflow: hidden;border-radius: 8rpx;box-sizing: border-box;width ...
微信小程序的swiper轮播图中的图片设置自适应高度的一种方法
微信小程序的swiper轮播图中的图片设置自适应高度的一种方法小程序中的轮播图很简单,但是唯一的缺陷就是 swiper 是固定的150px 高度(320px 宽度),这样如果传入的图片大于这个高度就 ...
微信小程序swiper图片尺寸_微信小程序之swiper轮播图中的图片自适应高度的方法...
小程序中的轮播图很简单,官方都有例子的,但是唯一的缺陷就是swiper是固定死的150px高度,这样如果传入的图片大于这个高度就会被隐藏.辣么,怎样让图片自适应不同分辨率捏. 我的思路是:获取屏幕宽度 ...
微信小程序swiper图片尺寸_微信小程序之swiper轮播图中的图片自适应高度
小程序中的轮播图很简单,官方都有例子的,但是唯一的缺陷就是swiper是固定死的150px高度,这样如果传入的图片大于这个高度就会被隐藏.辣么,怎样让图片自适应不同分辨率捏. 我的思路是:获取屏幕宽度 ...
微信小程序实现3D轮播图
在写微信小程序时,有写到实现3D轮播图的效果,可以直接使用微信小程序中自带的组件swiper来实现效果图如下: 1.swiper的相关属性 indicator-dots 是否显示小圆点,也可以自己重 ...
微信小程序开发 | 02 - 轮播图实现（swiper组件）
一.实现思路轮播图基于微信小程序提供的swiper组件(文档)实现. swiper组件中使用到下列属性: display-multiple-items:同时显示的滑块数量 current:当前所在滑 ...
微信小程序之swiper轮播图
微信小程序,一个不是app胜似app的开发工具,更加准确的说是开发途径,给非专业开发app的同学们提供了一个绝妙的选择轮播图几乎是每一个网站.app必有得一个展示区,用于醒目自己的特点.特色.了解微 ...
微信小程序自定义swiper轮播图面板指示点|小圆点|进度条
描述: 在工作中开发一个页面,多少都会用到轮播图,但是由于微信官方提供的轮播图swiper组件局限性太大了,所以接下来我会教大家怎么去自定义轮播图的进度条. 简单修改: 如果你的项目只是简单的修改小圆 ...
微信小程序点击轮播图跳转到微信公众号文章
一.获取微信公众号文章列表要想获取微信公众号的文章列表,需要登录公众号运行账号,进行一下相关的设置. 1.1微信公众号获取文章列表 api接口文档: https://developers.weixi ...

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