频道导航

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

2019-01-03 微信小程序前端之家

前端之家收集整理的这篇文章主要介绍了微信小程序视图容器（swiper）组件创建轮播图，前端之家小编觉得挺不错的，现在分享给大家，也给大家做个参考。

一、视图容器（Swiper）

1、swiper：滑块视图容器

nofollow" target="_blank" href="https://developers.weixin.qq.com/miniprogram/dev/component/swiper.html">微信官方文档

二、swiper应用

页面逻辑（index.js）

自动轮播 interval: 3000,//间隔时间 duration: 3000,//滑动时间 } @H_404_24@

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

indicatgorDots 是否出现焦点

autoplay 是否自动播放

interval 自动播放间隔时间

duration 滑动动画时间

页面结构（index.wxml）

@H_404_24@

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

页面样式(index.wxss)

@H_404_24@

三、小程序效果图

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

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

swiper swiper 微信小程序轮播图

上一篇：微信小程序使用wxParse解析html的实下一篇：微信小程序的部署方法步骤

猜你在找的微信小程序相关文章

[小程序]微信小程序获取input并发送网络请求

1. 获取输入框数据wxml中的input上增加bindinput属性，和方法值在js部分定义与之对应的方法...

作者：前端之家时间：2021-02-06

[小程序]微信小程序获取位置展示地图并标注信息

1.map组件的高度如果想要铺满屏幕，要是使用height:100vh样式2.获取位置要在app.json中标明...

作者：前端之家时间：2021-02-06

QQ小程序支付

QQ小程序支付 Java后端同学折腾QQ小程序的支付折腾了好几天，没有完成统一下单，因为我做...

作者：前端之家时间：2020-12-19

.NET之微信小程序获取用户UnionID

前言：在实际项目开发中我们经常会遇到账号统一的问题，如何在不同端或者是不同的登录方式...

作者：前端之家时间：2024-10-02

微信小程序picker组件关于objectArray数据类型绑定

一、前言：我发现很多的同学都在抱怨说微信小程序的picker的mode = selector/mode = mult...

作者：前端之家时间：2024-10-02

uni-app微信小程序开发之引入腾讯视频小程序播放插件

登录微信小程序管理后台添加腾讯视频播放插件：正式开始使用腾讯视频小程序插件之前需先在...

作者：前端之家时间：2024-10-02

微信小程序开发笔记

前言：因为前段时间一直在做关于微信小程序方面的项目，作为一名后端的攻城狮而言做一些简...

作者：前端之家时间：2024-10-02

微信小程序之onLaunch与onload异步问题

所述问题：前端时间开发了一个微信小程序商城项目，因为这个项目我们的需求是进入小程序就...

作者：前端之家时间：2024-10-02

微信小程序开发之多图片上传+.NET WebAPI后端服务保存图片资源

前言：最近开发的一个微信小程序项目需要做一个同时选中三张（或者是多张）图片一起上传到...

作者：前端之家时间：2024-10-02

小程序修改原生标题栏返回键的方法

在开发的过程中，我遇到过一个需求，需要将4到5个页面合为一个，在页面里制作切换和返回方...

作者：前端之家时间：2020-11-20

最新文章