微信小程序,简称小程序,英文名Mini Program,是一种不需要下载安装即可使用的应用,它实现了应用“触手可及”的梦想,用户扫一扫或搜一下即可打开应用。小程序是一种不用下载就能使用的应用,也是一项门槛非常高的创新,经过将近两年的发展,已经构造了新的小程序开发环境和开发者生态。
应用中最常见的应该就是轮图了,本文讲轮播的实现,部分内容来源于官方文档,增加了笔者实际操作中的一些问题与经验。
本文基于微信小程序公测版,IDE:微信开发者工具 0.10.102800
组件 swiper
当不设置 vertical 属性,或者 vertical=”false” 时,指示点在组件下部,图片轮播从左至右,效果如下:
当设置 vertical=”true” 时,指示点在组件右部,图片轮播从下至上,效果如下:
注意: swiper是一个容器类视图,但是其中只能放置组件,如放置其他节点,会被自动删除。
swiper-item
代码如下:
<!--main.wxml-->
<view>
<swiper class="swiper_box" indicator-dots="{{indicatorDots}}" vertical="{{vertical}}"
autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}" bindchange="swiperchange">
<block wx:for="{{images}}">
<swiper-item>
<image src="{{item.picurl}}" class="slide-image"/>
</swiper-item>
</block>
</swiper>
</view>