Loading [MathJax]/jax/input/TeX/config.js
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >微信小程序从零开始开发步骤(五)轮播图

微信小程序从零开始开发步骤(五)轮播图

作者头像
王小婷
发布于 2025-05-18 06:08:25
发布于 2025-05-18 06:08:25
32800
代码可运行
举报
文章被收录于专栏:编程微刊编程微刊
运行总次数:0
代码可运行

上一章完成页面自定义分享,这一章来说说轮播图,最常见的一个轮播图,中间带小圆点,自动轮播。

Swiper是滑动特效插件,面向手机、平板电脑等移动终端。能实现触屏焦点图、触屏Tab切换、触屏多图切换等常用效果。是目前应用较广泛的移动端网页触摸内容滑动插件。

实例:

更多样式,可以查看官方的API

参考链接:https://mp.weixin.qq.com/debug/wxadoc/dev/component/swiper.html?t=1475052054228

第一步:WXML文件:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<swiper indicator-dots="{{indicatorDots}}"
 autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}">
 <block wx:for="{{imgUrls}}" wx:key="unique">
  <swiper-item>
   <image src="{{item}}" class="slide-image"/>
  </swiper-item>
 </block>
</swiper>

第二步:js文件:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
Page({
  data: {
    imgUrls: [
      'http://img02.tooopen.com/images/20150928/tooopen_sy_143912755726.jpg',
      'http://img06.tooopen.com/images/20160818/tooopen_sy_175866434296.jpg',
      'http://img06.tooopen.com/images/20160818/tooopen_sy_175833047715.jpg'
    ],
    indicatorDots: true,
    autoplay: true,
    interval: 3000,
    duration: 500,
 
  },
})

介绍一下参数的意思:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
   indicatorDots: true,
    autoplay: true,
    interval: 3000,
    duration: 500,

indicator-dots Boolean false 是否显示面板指示点

autoplay Boolean false 是否自动切换

interval Number 5000 自动切换时间间隔

duration Number 500 滑动动画时长

下一章:微信小程序从零开始开发步骤(六)4种页面跳转的方法

阅读链接:

微信小程序从零开始开发步骤(一)搭建开发环境https://cloud.tencent.com/developer/article/1141318

微信小程序从零开始开发步骤(二)创建小程序页面https://cloud.tencent.com/developer/article/1141329

微信小程序从零开始开发步骤(三)底部导航栏https://cloud.tencent.com/developer/article/1140238

微信小程序从零开始开发步骤(四)自定义分享的功能https://cloud.tencent.com/developer/article/1140245

微信小程序从零开始开发步骤(五)轮播图https://cloud.tencent.com/developer/article/1140235

微信小程序从零开始开发步骤(六)4种页面跳转的方法https://cloud.tencent.com/developer/article/1140251

微信小程序从零开始开发步骤(七)引入外部js 文件https://cloud.tencent.com/developer/article/1140247

微信小程序从零开始开发步骤(八)引入框架WeUI:https://cloud.tencent.com/developer/article/1141379

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2018-08-16,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
[微信小程序][转载]swiper轮播图控件使用
<swiper autoplay interval="1000" circular indicator-dots indicator-color="#0094ff" indicator-active-color="#ff0094">
云未归来
2025/07/18
960
微信小程序从零开始开发步骤(五)轮播图
上一章完成页面自定义分享,这一章来说说轮播图,最常见的一个轮播图,中间带小圆点,自动轮播。 Swiper是滑动特效插件,面向手机、平板电脑等移动终端。能实现触屏焦点图、触屏Tab切换、触屏多图切换等常
王小婷
2018/05/31
2K0
三分钟实现微信小程序轮播图「建议收藏」
小程序的轮播图可比Android的简单多了,官方直接给出了这个组件,让我们看一看如何快速实现微信小程序的轮播图呢
全栈程序员站长
2022/08/31
8750
三分钟实现微信小程序轮播图「建议收藏」
小程序点击轮播图跳转到tab导航界面
一切准备好之后,在wxml文件里面,我们要使用 bindtap在图片上绑定一个事件,在js里面写事件函数的具体操作。
王小婷
2018/10/11
1.6K0
小程序点击轮播图跳转到tab导航界面
原生微信小程序轮播图点击放大
image标签中的 data-src=’{ {item}}’ data-list=’{ {goods.thumbs}}’ bindtap=“previewImage” 是解决轮播图片可点击放大的解决代码。 参见微信小程序中的图片预览api~
全栈程序员站长
2022/08/26
1.3K0
微信小程序轮播图实现(超简单)「建议收藏」
微信小程序的轮播图可以用官方给的swiper组件。 下图是官方给出的swiper属性,我截取了比较常用的一些属性。
全栈程序员站长
2022/08/31
5.9K0
微信小程序轮播图实现(超简单)「建议收藏」
微信小程序|两种基本配置
轮播图能够让我们的微信小程序显得更加美观,微信小程序中总是需要很多点击页面的跳转,那我们运用什么样的代码才能够实现呢?
算法与编程之美
2019/12/30
7560
手把手带你学习微信小程序 —— 八 (swiper组件 轮播图的实现)
在日常的使用 app 的过程中,大家一定遇到过这样的情况,今天就带领大家手动写一个这样的轮播图
Gorit
2021/12/08
2.3K0
手把手带你学习微信小程序 —— 八 (swiper组件 轮播图的实现)
【微信小程序】轮播图——swpier组件
哈喽大家好,本期是微信小程序专栏第六期,本期主要内容是文章列表页面。文章列表页面主体分为轮播图和文章列表两部分。本期主要通过轮播图来学习swiper组件。 注意:每期内容是连载呢,建议大家可以看看往期内容,更好理解噢~
颜颜yan_
2022/12/01
6.8K0
【微信小程序】轮播图——swpier组件
微信小程序之Swiper组件
说明:从 1.4.0 版本开始,change事件返回detail中包含一个source字段,表示导致变更的原因,可能值如下:
xiangzhihong
2022/11/30
3.9K0
微信小程序实训之轮播图效果
由于微信小程序,整个项目编译后的大小不能超过1M,编码之前需准备三张图片把它放在image目录里面。
张哥编程
2024/12/13
5970
微信小程序实训之轮播图效果
微信小程序实现banner图轮播(动态获取数据),自动获取图片高度
indicator-active-color=”#007aff”//当前选中的指示点颜色
全栈程序员站长
2022/08/31
1.4K0
微信小程序实现banner图轮播(动态获取数据),自动获取图片高度
小程序轮播图片高度自适应
微信小程序中使用 swiper 组件可以实现图片轮播效果,但是默认 swiper 高度是固定的 150px,如果项目中图片大于固定高度就会被隐藏,所以本篇文章要实现轮播图片的高度自适应。 1.以最高的图片为基准(需要考虑图片全部一样的大小) 关于小程序轮播图自适应的问题,目前网上的资料不少,但是都是目前这种,不会随着图片的高度去变化。会以最高的一张图片高度为基准。正常的需求应该都能满足,但是现在的需求是需要随着图片的高度去改变。所以有了第二点。 image.png <swiper style="
leader755
2022/03/09
2.2K0
小程序轮播图片高度自适应
关于微信小程序内置组件swiper,circular使用分享
swiper,关于滑块的一些效果无缝,断点,视差等等...我想这里就不用做太多的赘述,这里给大家分享一下实战项目中使用circular(衔接)的一点小特性、小技巧,当然你也可以理解为遇到了一个小坑,因为不能把整个项目搬上来,所以这里用一个小事例去简单的描述一下。
疯狂的小程序
2018/01/22
3.7K0
关于微信小程序内置组件swiper,circular使用分享
Uniapp开发鸿蒙购物项目实战教程:实现首页轮播图
过去几天的文章中我们讲过了如何创建跨平台项目,如何进行基础的布局、如何实现自定义导航栏等等,通过这一系列的文章教程,我们最终要实现一个购物app,今天我们要做购物应用首页的轮播图部分。
幽蓝计划
2025/06/09
1190
微信小程序|图片轮播
Swiper滑块视图容器用来在指定区域内切换内容的显示,可以用于制作图片轮播效果。
算法与编程之美
2019/12/24
3.1K0
微信小程序|图片轮播
小程序 轮播图之自动适应宽高度
发布者:全栈程序员栈长,转载请注明出处:https://javaforall.cn/143452.html原文链接:https://javaforall.cn
全栈程序员站长
2022/09/03
2.1K0
小程序 轮播图之自动适应宽高度
微信小程序实战开发五:使用自定义组件配置一个通用的图片轮播组件。
在开发中有很多时候为了节约代码,方便使用各种功能,我们需要创建很多类、方法、过程。小程序也是一样,小程序所有的方法、过程、类都封装成了一个叫组件的东西,包括微信提供的WEUL组件等等,而且我们还可以自定义组件,把重复使用性高的代码封装成组件方便调用。
睿儿网络郝刚
2020/09/08
6950
微信小程序实战开发五:使用自定义组件配置一个通用的图片轮播组件。
【小程序项目开发-- 京东商城】uni-app开发之轮播图
👋👋欢迎来到👋👋 🎩魔术之家!!🎩 该文章收录专栏 ✨ 2022微信小程序京东商城实战 ✨ 专栏内容 ✨ 京东商城uni-app项目搭建 ✨ ✨ 京东商城uni-app 配置tabBar & 窗口样式 ✨ ✨ 京东商城uni-app开发之分包配置 ✨ ✨ 京东商城uni-app开发之轮播图 ✨ ✨ 京东商城uni-app之分类导航区域 ✨ ✨ 京东商城uni-app 首页楼层商品 ✨ ✨ 京东商城uni-app 商品分类页面(上) ✨ ✨ 京东商城uni-app 商品分
计算机魔术师
2022/08/23
1K0
【小程序项目开发-- 京东商城】uni-app开发之轮播图
小程序 轮播图
swiper小圆点 默认样式修改 (以下代码 上面都有 这里只是做个截屏说明一下)
全栈程序员站长
2022/08/25
7220
小程序 轮播图
推荐阅读
相关推荐
[微信小程序][转载]swiper轮播图控件使用
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
本文部分代码块支持一键运行,欢迎体验
本文部分代码块支持一键运行,欢迎体验