微信小程序 swiper组件轮播图详解及实例
2019/6/27 21:38:54
本文主要是介绍微信小程序 swiper组件轮播图详解及实例,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
微信小程序 swiper组件轮播图
照着开发文档尝试,总是能有所收获.之前做Android开发,做个轮播图并不简单,用上viewpage再设置圆点,折腾一通之后还一堆bug.今天尝试微信小程序开发做轮播图,真是感动的泪流满面.废话说完了,上图.
上图就是一个简易的轮播图,是不是很简易.23333
主要是代码也很简单.
1.index.wxml
<!--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
//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
/**index.wxss**/ .swiper { height: 400rpx; width: 100%; } .swiper image { height: 100%; width: 100%; }
WXSS不多说,跟CSS没啥区别.
感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!
这篇关于微信小程序 swiper组件轮播图详解及实例的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-10-04package.json 文件位置在哪?-icode9专业技术文章分享
- 2024-10-01Craco.js学习:从入门到实践指南
- 2024-10-01Create-React-App学习:入门与实践指南
- 2024-10-01CSS-in-JS学习:从入门到实践指南
- 2024-09-30JSX语法学习:从入门到初步掌握
- 2024-09-30Mock.js学习:入门教程与实战演练
- 2024-09-30React Hooks学习:从入门到实践
- 2024-09-30受控组件学习:React中的基础入门教程
- 2024-09-29JS定时器教程:初学者必看指南
- 2024-09-29JS对象教程:初学者的全面指南