零基础学小程序007----首页轮播图,可以自动轮播,循环轮播,定时轮播

简介: 零基础学小程序007----首页轮播图,可以自动轮播,循环轮播,定时轮播

由于最近工作比较忙,好久没有更新系列课程了,今天终于抽出时间继续为大家更新零基础自学小程序系列课程了。

废话不多说,进入今天的课程


基本实现功能


1,首页轮播图

2,循环轮播

3,定时轮播

老规矩先看效果图

其实实现上面效果很简单,因为微信给我现成的api。

这里用到了微信的swiper控件,下面简单贴出一段代码

简单的解释下

indicator-dots:是否显示面板指示点

autoplay:是否自动轮播

interval:轮播时间间隔

其实这些在微信官方文档里都有。这里你还可以定义指示点的颜色,是否循环切换等。

传送门:https://mp.weixin.qq.com/debug/wxadoc/dev/component/swiper.html

今天的小程序首页轮播图就给大家讲到这里,后续我还会继续更新小程序自学系列教程

相关文章
|
7月前
|
小程序 JavaScript
【微信小程序】之轮播图、swiper、swiper-item、banner组件使用
【微信小程序】之轮播图、swiper、swiper-item、banner组件使用
【微信小程序】之轮播图、swiper、swiper-item、banner组件使用
|
7月前
|
存储 小程序 API
【微信小程序】-- uni-app 项目-- 购物车 -- 首页 - 轮播图效果(五十二)
【微信小程序】-- uni-app 项目-- 购物车 -- 首页 - 轮播图效果(五十二)
|
7月前
|
小程序 容器
企业官网小程序搭建教程-首页的搭建05
企业官网小程序搭建教程-首页的搭建05
|
7月前
|
小程序
小程序for循环中key值的作用?
小程序for循环中key值的作用?
|
7月前
|
小程序 IDE 搜索推荐
【社区每周】小程序新增自定义tabBar功能;支持指定默认启动首页(2022年6月第三期)
【社区每周】小程序新增自定义tabBar功能;支持指定默认启动首页(2022年6月第三期)
72 0
|
小程序 JavaScript
小程序简单循环列表数据渲染实例
小程序简单循环列表数据渲染实例
91 0
|
4月前
|
小程序 JavaScript
Taro@3.x+Vue@3.x+TS开发微信小程序,使用轮播图
本文介绍了使用 Taro 和 Vue 创建轮播组件的两种方法:一是通过 `<swiper>` 实现,二是利用 Nut UI 的 `<nut-swiper>` 组件实现。
100 1
Taro@3.x+Vue@3.x+TS开发微信小程序,使用轮播图
|
5月前
|
小程序 JavaScript 前端开发
【微信小程序-原生开发】实用教程06-轮播图、分类页签 tab 、成员列表(含Tdesign升级,切换调试基础库,设置全局样式,配置组件按需注入,添加图片素材,wx:for,生命周期 onLoad)
【微信小程序-原生开发】实用教程06-轮播图、分类页签 tab 、成员列表(含Tdesign升级,切换调试基础库,设置全局样式,配置组件按需注入,添加图片素材,wx:for,生命周期 onLoad)
177 0
|
7月前
|
小程序 JavaScript 数据库
微信小程序轮播图实现(超简单)
本文介绍了微信小程序使用内置swiper组件实现轮播图的简单方法。对于普通开发,示例代码展示了在wxml中配置swiper组件和嵌套image标签,以及相应的wxss样式设置。采用云开发时,wxml利用wx:for绑定数据列表,js部分展示如何从云端数据库获取数据并设置到list中。只需替换image的src为实际图片路径,即可完成轮播图功能。
445 0
|
7月前
|
移动开发 小程序 容器
家校互通小程序实战开发02首页搭建
家校互通小程序实战开发02首页搭建