小程序轮播图代码,微信小程序轮播图开发文档

—— 2018 ——

01/12

00:00

来源：

作者：未知

栏目：小程序开发

2018/1/12 0:00:00 来源：不详作者：未知

轮播图是小程序中很重要的一个组件，对于开发小程序来说，要如何做呢，如下：

使用微信提供的swiper控件，在页面wxml中添加控件

<view class="page-body">

<view class="page-section page-section-spacing swiper">

<swiper indicator-dots="{{indicatorDots}}"

autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}">

<block wx:for="{{background}}" wx:key="*this">

<swiper-item>

<image src='{{item.url}}' class='slide-image' mode='aspectFill' ></image>

</swiper-item>

</block>

</swiper>

</view>

在wxss中设置样式

.swiper {

height: 400rpx;

width: 100%;

}

.swiper image {

height: 100%;

width: 100%;

}

在js 中设置数据

data: {

background:[

{url:'../../images/banner/banner1.jpeg'},

{ url: '../../images/banner/banner2.png' },

{ url: '../../images/banner/banner3.png' },

],

indicatorDots: true,

vertical: false,

autoplay: true,

interval: 2000,

duration: 500

},

小程序轮播图代码,微信小程序轮播图开发文档

就这么简单，轮播图就出现了，是不是很简单呢。

【本站声明】
1、本站文章中所选用的图片及文字来源于网络以及用户投稿，由于未联系到知识产权人或未发现有关知识产权的登记，如有知识产权人并不愿意我们使用，如果有侵权请立即联系。
2、本网站不对文章中所涉及的内容真实性、准确性、可靠性负责，仅系客观性描述，如您需要了解该类商品/服务详细的资讯，请您直接与该类商品/服务的提供者联系。

KESION 科汛软件
KESION 科汛软件是国内领先的在线教育软件及私域社交电商软件服务提供商，长期专注于为企业提供在线教育软件及社交电商SaaS平台解决方案。
公司核心产品云开店SaaS社交电商服务平台、在线教育SaaS服务平台、教育企业数字化SaaS云平台、企微营销助手、私有化独立部署品牌网校和在线教育咨询等。
KESION 不断通过技术创新，提供产品和服务，助力企业向数字化转型，通过科技驱动商业革新，让商业变得更智慧！

▼点击进入科汛官网了解更多

热门标签

微信小程序开发小程序 SaaS

上/下篇

小程序怎么生成二维码,小程序二维码开发文档

一般进入小程序除了搜索名称，还可以通过扫描二维码进入，那么小程序如何生成二维码这个小程序入口。...

2018/1/12 0:00:00
微信小程序实现滚动加载更多的方法

小程序实现滚动加载更多是电商行业中很重要的需求，如下是具体的方法：...

微信小程序SaaS 2018/1/12 0:00:00

换一换相关推荐

精选内容

热点精选

© 2006-2025 厦门科汛软件有限公司版权所有

ICP证闽B2-20190777 闽ICP备06009871号-1

闽公网安备 35020302001540号统一社会信用代码：91350206MA2XN2XQ4A 国家高新技术企业编号：GR201735100465 软件企业证书号：厦RQ-2017-0034 软件产品证书号：厦RC-2017-0005 认证联盟企业编号：928180109031687687593 国际权威认证：信息技术服务管理体系标准（ISO 20000）信息安全管理体系国际认证（ISO/IEC 27001）