微信小程序视图容器(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%;
}

三、小程序效果图

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

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

您可能感兴趣的文章:

JavaScript实现楼梯滚动特效(jQuery实现)
这篇文章主要为大家详细介绍了JavaScript实现楼梯滚动特效，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2021-09-09
layui在表格中嵌入上传按钮并修改上传进度条的实例
这篇文章主要介绍了layui在表格中嵌入上传按钮并修改上传进度条的实例,本文给大家介绍的非常详细,感兴趣的朋友跟随小编一起看看吧
2024-07-07
JavaScript常用工具方法封装
今天小编就为大家分享一篇关于JavaScript常用工具方法封装，小编觉得内容挺不错的，现在分享给大家，具有很好的参考价值，需要的朋友一起跟随小编来看看吧
2019-02-02
脚本吧 - 幻宇工作室用到js,超强推荐base.js
脚本吧 - 幻宇工作室用到js,超强推荐base.js...
2006-12-12
JavaScrip如何安全使用Payment Request API详解
这篇文章主要为大家介绍了JavaScrip如何安全使用Payment Request API详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2022-10-10
JavaScript 巧学巧用
本文主要给大家分享一下在编写JavaScript代码的时候存在的一些方法和技巧，虽然有时候条条大路都通向罗马，但是也许总会有那么一条最短的路径可走。希望通过以下几点JavaScript技巧让大家的代码“化繁为简，化简为精”
2017-05-05
js实现七夕表白弹幕效果 jQuery实现弹幕技术
这篇文章主要介绍了js实现七夕表白弹幕效果，jQuery实现弹幕技术，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2021-08-08
20行JS代码实现网页刮刮乐效果
下面小编就为大家带来一篇20行JS代码实现网页刮刮乐效果。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-06-06
详解JavaScript中Promise的原理与应用
Promise是JavaScript中的一个重要概念，也是现代JavaScript开发中必不可少的一部分，本文主要介绍了Promise的实现原理、使用方法及常见应用场景，需要的可以收藏一下
2023-06-06
js中onclick和addEventListener的区别
本文对javascript中onclick事件处理的方法和addEventListener监听器进行讲解,具有一定的参考价值,感兴趣的可以了解一下
2023-08-08