【微信小程序开发】微信小程序 swiper组件轮播图详解及实例

网友投稿2022-01-25140

微信小程序 swiper组件轮播图

照着开发文档尝试,总是能有所收获.之前做Android开发,做个轮播图并不简单,用上viewpage再设置圆点,折腾一通之后还一堆bug.今天尝试微信小程序开发做轮播图,真是感动的泪流满面.废话说完了,上图.

上图就是一个简易的轮播图,是不是很简易.23333

主要是代码也很简单.

1.index.wxml

1
2
3
4
5
6
7
8
<!--index.wxml--> 
  <swiper class="swiper" indicator-dots="true" autoplay="true" interval="5000" duration="1000"
   <block wx:for="{{movies}}" wx:for-index="index"
    <swiper-item> 
     <image src="{{item.url}}" class="slide-image" mode="aspectFill"/> 
    </swiper-item> 
   </block> 
  </swiper>

这里有几个属性需要说明.

微信小程序开发的循环用到了<block wx:for >


我这里是遍历movies[]数组.<swiper-item>就是item

2.index.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
//index.js 
//获取应用实例 
var app = getApp() 
Page({ 
 data: { 
  movies:[ 
  {url:'http://img04.tooopen.com/images/20130712/tooopen_17270713.jpg'} , 
  {url:'http://img04.tooopen.com/images/20130617/tooopen_21241404.jpg'} , 
  {url:'http://img04.tooopen.com/images/20130701/tooopen_20083555.jpg'} , 
  {url:'http://img02.tooopen.com/images/20141231/sy_78327074576.jpg'}  
  
 }, 
 onLoad: function () { 
 
})

3.WXML

1
2
3
4
5
6
7
8
9
/**index.wxss**/
.swiper {
 height: 400rpx;
 width: 100%;
}
.swiper image {
 height: 100%;
 width: 100%;
}

WXSS不多说,跟CSS没啥区别.

感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!

网友评论

最新发布

扫一扫二维码,添加客服微信