首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >微信小程序从零开始开发步骤(五)轮播图

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

作者头像
王小婷
发布于 2025-05-18 06:08:25
发布于 2025-05-18 06:08:25
26200
代码可运行
举报
文章被收录于专栏:编程微刊编程微刊
运行总次数: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 删除。

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

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
微信小程序从零开始开发步骤(五)轮播图
上一章完成页面自定义分享,这一章来说说轮播图,最常见的一个轮播图,中间带小圆点,自动轮播。 Swiper是滑动特效插件,面向手机、平板电脑等移动终端。能实现触屏焦点图、触屏Tab切换、触屏多图切换等常
王小婷
2018/05/31
1.9K0
小程序点击轮播图跳转到tab导航界面
一切准备好之后,在wxml文件里面,我们要使用 bindtap在图片上绑定一个事件,在js里面写事件函数的具体操作。
王小婷
2018/10/11
1.6K0
小程序点击轮播图跳转到tab导航界面
小程序开发基础-swiper 滑块视图容器
参考官方文档:https://developers.weixin.qq.com/miniprogram/dev/component/
达达前端
2019/07/03
2.1K0
小程序开发基础-swiper 滑块视图容器
小程序轮播图片高度自适应
微信小程序中使用 swiper 组件可以实现图片轮播效果,但是默认 swiper 高度是固定的 150px,如果项目中图片大于固定高度就会被隐藏,所以本篇文章要实现轮播图片的高度自适应。 1.以最高的图片为基准(需要考虑图片全部一样的大小) 关于小程序轮播图自适应的问题,目前网上的资料不少,但是都是目前这种,不会随着图片的高度去变化。会以最高的一张图片高度为基准。正常的需求应该都能满足,但是现在的需求是需要随着图片的高度去改变。所以有了第二点。 image.png <swiper style="
leader755
2022/03/09
2.1K0
小程序轮播图片高度自适应
微信小程序之Swiper组件
说明:从 1.4.0 版本开始,change事件返回detail中包含一个source字段,表示导致变更的原因,可能值如下:
xiangzhihong
2022/11/30
3.9K0
全栈开发工程师微信小程序-上
wx:for是列表渲染标签,默认当前循环项的变量名为item.wx:key用于在动态列表渲染中保存子项的特征和状态.
达达前端
2019/07/03
7850
全栈开发工程师微信小程序-上
「小程序JAVA实战」小程序的视图组件(23)
开始了解下小程序的组件。源码:https://github.com/limingios/wxProgram.git 中的No.10 视图组件 多个组件构成一张视图页面 经过样式和布局,页面其实理解成h
IT架构圈
2018/12/25
9320
关于微信小程序内置组件swiper,circular使用分享
swiper,关于滑块的一些效果无缝,断点,视差等等...我想这里就不用做太多的赘述,这里给大家分享一下实战项目中使用circular(衔接)的一点小特性、小技巧,当然你也可以理解为遇到了一个小坑,因为不能把整个项目搬上来,所以这里用一个小事例去简单的描述一下。
疯狂的小程序
2018/01/22
3.7K0
关于微信小程序内置组件swiper,circular使用分享
小程序 轮播图
swiper小圆点 默认样式修改 (以下代码 上面都有 这里只是做个截屏说明一下)
全栈程序员站长
2022/08/25
6790
小程序 轮播图
微信小程序|两种基本配置
轮播图能够让我们的微信小程序显得更加美观,微信小程序中总是需要很多点击页面的跳转,那我们运用什么样的代码才能够实现呢?
算法与编程之美
2019/12/30
7490
【微信小程序】轮播图——swpier组件
哈喽大家好,本期是微信小程序专栏第六期,本期主要内容是文章列表页面。文章列表页面主体分为轮播图和文章列表两部分。本期主要通过轮播图来学习swiper组件。 注意:每期内容是连载呢,建议大家可以看看往期内容,更好理解噢~
颜颜yan_
2022/12/01
6.6K0
【微信小程序】轮播图——swpier组件
三分钟实现微信小程序轮播图「建议收藏」
小程序的轮播图可比Android的简单多了,官方直接给出了这个组件,让我们看一看如何快速实现微信小程序的轮播图呢
全栈程序员站长
2022/08/31
8670
三分钟实现微信小程序轮播图「建议收藏」
微信小程序|图片轮播
Swiper滑块视图容器用来在指定区域内切换内容的显示,可以用于制作图片轮播效果。
算法与编程之美
2019/12/24
3.1K0
微信小程序|图片轮播
微信小程序|轮播图
轮播图通俗的说就是在一个模块或者说窗口,通过电脑上鼠标点击、手机上手指滑动后,可以看到多张图片。轮播图的位置一般放置在页面首部,具有内容醒目、重点突出等特点。轮播图在一般的页面中常用于特色推荐,如淘宝网上轮播图中的都是特价商品以及其他一些好物推荐。轮播图在使用过程中,最重要的一个特点就是实时更新。小程序中的轮播图也大致具有以上特点。
用户7118204
2020/04/06
2.6K0
微信小程序|轮播图
轮播图通俗的说就是在一个模块或者说窗口,通过电脑上鼠标点击、手机上手指滑动后,可以看到多张图片。轮播图的位置一般放置在页面首部,具有内容醒目、重点突出等特点。轮播图在一般的页面中常用于特色推荐,如淘宝网上轮播图中的都是特价商品以及其他一些好物推荐。轮播图在使用过程中,最重要的一个特点就是实时更新。小程序中的轮播图也大致具有以上特点。
算法与编程之美
2020/03/13
4.4K0
【小程序项目开发-- 京东商城】uni-app开发之轮播图
👋👋欢迎来到👋👋 🎩魔术之家!!🎩 该文章收录专栏 ✨ 2022微信小程序京东商城实战 ✨ 专栏内容 ✨ 京东商城uni-app项目搭建 ✨ ✨ 京东商城uni-app 配置tabBar & 窗口样式 ✨ ✨ 京东商城uni-app开发之分包配置 ✨ ✨ 京东商城uni-app开发之轮播图 ✨ ✨ 京东商城uni-app之分类导航区域 ✨ ✨ 京东商城uni-app 首页楼层商品 ✨ ✨ 京东商城uni-app 商品分类页面(上) ✨ ✨ 京东商城uni-app 商品分
计算机魔术师
2022/08/23
9900
【小程序项目开发-- 京东商城】uni-app开发之轮播图
微信小程序实战开发五:使用自定义组件配置一个通用的图片轮播组件。
在开发中有很多时候为了节约代码,方便使用各种功能,我们需要创建很多类、方法、过程。小程序也是一样,小程序所有的方法、过程、类都封装成了一个叫组件的东西,包括微信提供的WEUL组件等等,而且我们还可以自定义组件,把重复使用性高的代码封装成组件方便调用。
睿儿网络郝刚
2020/09/08
6760
微信小程序实战开发五:使用自定义组件配置一个通用的图片轮播组件。
五分钟掌握微信小程序轮播图
从公共库v1.4.0开始,change事件返回detail中包含一个source字段,表示导致变更的原因,可能值如下: autoplay 自动播放导致 swiper 变化; touch 用户划动引起swiper变化; 其他原因将用空字符串表示。 注意:其中只可放置 组件,否则会导致未定义的行为。 swiper-item 仅可放置在 组件中,宽高自动设置为100%。 swiper { height: 421.5rpx; } swiper-item image { width: 100%;
企鹅号小编
2018/01/30
8510
五分钟掌握微信小程序轮播图
微信小程序实现banner图轮播(动态获取数据),自动获取图片高度
indicator-active-color=”#007aff”//当前选中的指示点颜色
全栈程序员站长
2022/08/31
1.4K0
微信小程序实现banner图轮播(动态获取数据),自动获取图片高度
小程序学习笔记分享(含1-tabBar、轮播图和九宫格)
今天分享一些学习小程序的代码,希望大家喜欢。
疯狂的小程序
2018/01/24
1.1K0
推荐阅读
相关推荐
微信小程序从零开始开发步骤(五)轮播图
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档