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

2018-01-12

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

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

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

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

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

<swiper-item>

</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、该篇文章中所涉及的商标、标识的商品/服务并非来源于本网站，更非本网站提供，与本网站无关，系他人的商品或服务，本网站对于该类商标、标识不拥有任何权利；
3、本网站不对该篇文章中所涉及的商标、标识的商品/服务作任何明示或暗示的保证或担保；
4、本网站不对文章中所涉及的内容真实性、准确性、可靠性负责，仅系客观性描述，如您需要了解该类商品/服务详细的资讯，请您直接与该类商品/服务的提供者联系。

您可能感兴趣: 小程序微信小程序

上一篇：小程序滚动穿透的解决办法,小程序遮罩穿透问题 下一篇：微信小程序实现九宫格,小程序九宫格布局怎么做