微信小程序视图容器(swiper)组件创建轮播图

更新时间：2022年04月07日 12:41:28 作者：Crazy Struggle

这篇文章主要为大家详细介绍了微信小程序视图容器（swiper）组件创建轮播图，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

本文为大家分享了微信小程序swiper组件创建轮播图的具体代码，供大家参考，具体内容如下

一、视图容器（Swiper）

1、swiper：滑块视图容器

二、swiper应用

1、页面逻辑（index.js）

Page({
 data: {
 imgUrls: [
 {
 link: '/pages/index/index',
 url: '/images/001.jpg'
 }, {
 link: '/pages/list/list',
 url: '/images/002.jpg'
 }, {
 link: '/pages/list/list',
 url: '/images/003.jpg'
 }
 ],
 indicatorDots: true, //小点
 indicatorColor: "white",//指示点颜色
 activeColor: "coral",//当前选中的指示点颜色
 autoplay: false, //是否自动轮播
 interval: 3000, //间隔时间
 duration: 3000, //滑动时间
 }

其中 imgUrls 是我们轮播图中将要用到的图片地址和跳转链接

indicatgorDots 是否出现焦点

autoplay 是否自动播放

interval 自动播放间隔时间

duration 滑动动画时间

2、页面结构（index.wxml）

<!--轮播图-->
<swiper indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}" indicator-color="{{indicatorColor}}" 
 indicator-active-color="{{activeColor}}">
 <block wx:for="{{imgUrls}}">
 <swiper-item>
 <navigator url="{{item.link}}" hover-class="navigator-hover">
 <image src="{{item.url}}" class="slide-image" width="355" height="200" />
 </navigator>
 </swiper-item>
 </block>
</swiper>

注意：swiper 千万不要在外面加上任何标签例如 <view> 之类的，如果加了可能会导致轮播图出不来

3、页面样式(index.wxss)

/*轮播图*/
.slide-image {
 width: 100%;
}

三、小程序效果图

赶快动手实践就可以看到如图所示效果图：

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

js前端解决跨域问题的8种方案（最新最全）
本篇文章主要讲诉了前端跨域问题的几种解决方案，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2016-11-11
基于JavaScript实现回到页面顶部动画代码
这篇文章主要介绍了基于JavaScript实现回到页面顶部动画代码的相关资料,代码简单易用，非常实用，需要的朋友可以参考下
2016-05-05
小程序实现左滑删除的效果的实例代码
这篇文章主要介绍了小程序实现左滑删除的效果,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
2020-10-10
echarts中grid图表的位置配置详解
ECharts是一个纯JavaScript图表库,底层依赖于轻量级的Canvas类库ZRender,下面这篇文章主要给大家介绍了关于echarts中grid图表的位置配置的相关资料,文中通过图文介绍的非常详细,需要的朋友可以参考下
2023-04-04
layer ui 导入文件之前传入数据的实例
今天小编就为大家分享一篇layer ui 导入文件之前传入数据的实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2019-09-09
浅谈JavaScript 代码整洁之道
这篇文章主要介绍了浅谈JavaScript 代码整洁之道，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2018-10-10
探究JavaScript原型数据共享与方法共享实现
这篇文章主要介绍了探究JavaScript原型数据共享与方法共享实现,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2021-05-05
javascript json2 使用方法
这是个人在最近使用json时做的总结，拿出来给没接触过的小弟们晒晒，适用与没接触过json的人员，其中json2。js请到json官网下载。
2010-03-03
Javascript 解疑
Javascript 解疑，需要的朋友可以参考下。
2009-11-11
jquery的$(document).ready()和onload的加载顺序
最近在改一个嵌入在frame中的页面的时候，使用了jquery做效果，而页面本身也绑定了onload事件。改完后，Firefox下测试正常流畅，IE下就要等个十几秒jquery的效果才出现，黄花菜都凉了。
2010-05-05