开启微信小程序之旅---轮播图使用

前言:

公司最近有个项目,为了节约成本放弃了传统的Android APP开发使用微信小程序，花了3天时间看了一下官方的api文档,有将近4年Android开发经验的我，之前先研究了H5/CSS/JS然后在看一下小程序感觉不是特别难开启微信小程序之旅---轮播图使用。新技术还是值得研究一下的。这个是小程序官方地址点击打开链接。

谈谈我对小程序的理解吧，感觉小程序还是有前景的对于小型企业来说起码减少了企业的开发成本，对于有开发经验的程序员特别是前端程序猿来说学起来相对来说比较简单。

正文:

今天主要是谈谈我做轮播图时遇到的问题和总结：

效果图展示：

我的代码:
1.wxml文件代码

<view>
<!--轮播图 -->
 <swiper class='swiper-container' indicator-dots='true' autoplay='true' interval='2000' vertical='true'>
 <swiper-item>
 <image class='swiper-image' src='../../images/lifelike.jpg'></image>
 </swiper-item>
 <swiper-item>
 <image class='swiper-image' src='../../images/qinnv.jpg'></image>
 </swiper-item>
 <swiper-item>
 <image class='swiper-image' src='../../images/zxc.jpg'></image>
 </swiper-item>
 </swiper>

</view>

2.wxss文件代码

/* pages/main/main.wxss */

.swiper-container{
 width: 100%;
 height: 400rpx;
}

.swiper-image{
 width: 100%;
}

Tip: 直接复制就能使用。

1.设置轮播图片的宽度的时候发现在image标签下和swiper-item标签下都无法使用，只能在图片上面修改才管用。

2.设置图片的高度的时候需要在swiper跟标签下声明。

小程序不像传统的Android开发,它官方给了轮播图banner组件swiper

Tip: 这个是这个组件在官方的位置,常用的属性api文档中的位置。

开启微信小程序之旅---轮播图使用

相关推荐