微信小程序10：WXML 组件- 轮播图 swiper

官网地址https://developers.weixin.qq.com/miniprogram/dev/component/swiper.html

示例代码

index.mxml

<view class="indexContainer"><!-- 轮播图区域 autoplay:自动滚动，interval:滚动间隔时间,其他看下面属性表 --><swiper class="banners" indicator-dots indicator-color='ivory' autoplayinterval="3000"indicator-active-color='#d43c33'><!-- 可以用wx:for=""来循环显示轮播项 --><!-- 1 网络图片 --><swiper-item><image src="https://pic1.zhimg.com/80/v2-4a06bc2eb6d6772565b36506e9913bc3_1440w.jpg"></image></swiper-item><!--2 网络图片  --><swiper-item><image src="https://pic3.zhimg.com/80/v2-3338fc3072f5fdb0007ac264a0850d9f_1440w.jpg"></image></swiper-item><!-- 3 本地图片 --><swiper-item><image src="/static/images/v2.jpg"></image></swiper-item></swiper>
</view>

index.wxss

/* pages/index/index.wxss */
.banners {width: 100%;height: 400rpx;}.banners image {width: 100%;height: 100%;
}

结果

几个重要的属性

更多属性请看官方文档

属性类型 默认值 必填说明

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

indicator-color color rgba(0, 0, 0, .3) 否指示点颜色

indicator-active-color color #000000 否当前选中的指示点颜色

autoplay boolean false 否是否自动切换

current number 0 否当前所在滑块的 index

interval number 5000（ms）否自动切换时间间隔

duration number 500 否滑动动画时长

circular boolean false 否是否采用衔接滑动

vertical boolean false 否滑动方向是否为纵向

属性	类型	默认值	必填	说明
indicator-dots	boolean	false	否	是否显示面板指示点
indicator-color	color	rgba(0, 0, 0, .3)	否	指示点颜色
indicator-active-color	color	#000000	否	当前选中的指示点颜色
autoplay	boolean	false	否	是否自动切换
current	number	0	否	当前所在滑块的 index
interval	number	5000（ms）	否	自动切换时间间隔
duration	number	500	否	滑动动画时长
circular	boolean	false	否	是否采用衔接滑动
vertical	boolean	false	否	滑动方向是否为纵向

静态文件说明

为了方便管理静态文件，例如图片，iconfont 图标，其他的静态css文件等等，。我们一般建立一个staic文件夹。

右键新建文件夹放在静态资源static（图片）

文件夹目录

在wxml文件使用图片地址是

<image src="/static/images/v2.jpg"></image>

微信小程序10：WXML 组件- 轮播图 swiper相关推荐

微信小程序最简单的轮播图
小程序轮播图今天给大家分享一个在微信开发者工具开发微信小程序的简单案例--轮播图(只用wxml和wxss) 话不多说,直接上代码!!! 效果图 WXML代码基本属性介绍 <!-- indic ...
【云开发】10分钟零基础学会做一个快递查询微信小程序，快速掌握微信小程序开发技能（轮播图、API请求）
大家好,我叫小秃僧这次分享的是10分钟零基础学会做一个快递查询微信小程序,快速掌握开发微信小程序技能. 这篇文章偏基础,特别适合还没有开发过微信小程序的童鞋,一些概念和逻辑我会讲细一点,尽可能用图说 ...
【微信小程序】好看的轮播图组件
微信小程序好看的轮播图组件效果示例使用步骤第一步: 新建components文件夹第二步: 按照以下目录创建文件:(文件名可以自定义,但后面引入组件时应保持前后一致) 第三步: 各个文件的代码: ...
微信小程序轮播中的current_微信小程序开发之自定义轮播图实例
轮播图是大部分应用的一个常用的功能,常用于广告投放.产品展示.活动展示等等. 漂亮的轮播图效果可以吸引用户的点击,达到推广产品的作用. 废话少说,下面开始动手. 业务需求: 5个图片轮番播放,可以左右 ...
用uni-app开发的微信小程序轮播图----和用微信小程序原生开发的轮播图
话不多说,附赠代码以下是用uni-app开发的轮播图 <template><view class="recommend"><view class=& ...
【微信小程序】实现广告轮播图
文章目录一.示例代码二.展示优化 1.衔接滑动 2.居中显示 3.图片完整 4.图片标题三.指示点优化 1.样式优化 2.特效优化四.所有代码五.参考博文六.视频图片混播最终效果图一. ...
【微信小程序】实现简单轮播图效果
微信小程序实现轮播图效果轮播图实现效果:(可循环播放) 代码实现:(复制可用) index.wxml: <view class="swiper"><swiper ...
微信小程序五（创建轮播图）
应用中最常见的就是轮播图了,今儿个就讲讲微信小程序中轮播图的使用轮播图,不外乎俩个要素,跳转链接和图片地址 1. 设置数据我在 pages/test/test.js中添加如下数据 //test ...
微信小程序之实现层叠轮播图的效果案例（前端学习收藏夹必备）
效果展示代码展示: WXML代码 <view class="selection_cards" bindtouchstart="touchstart" b ...

微信小程序10：WXML 组件- 轮播图 swiper

微信小程序10：WXML 组件- 轮播图 swiper

静态文件说明

微信小程序10：WXML 组件- 轮播图 swiper相关推荐

最新文章

热门文章