微信小程序 swiper组件轮播图详解及实例
更新时间：2016年11月16日 11:52:27 作者：dzp_coder
这篇文章主要介绍了微信小程序 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没啥区别.
感谢阅读，希望能帮助到大家，谢谢大家对本站的支持！
相关文章
微信小程序组件 contact-button（客服会话按钮）详解及实例代码
这篇文章主要介绍了微信小程序组件 contact-button（客服会话按钮）详解及实例代码的相关资料,需要的朋友可以参考下2017-01-01
这篇文章主要介绍关于JavaScript防抖与节流的区别与实现，防抖就是用户多次触发事件，在用户一直触发事件中，事件不会执行，只有在用户停止触发事件一段时间之后再执行这个事件一次，二节流是用户多次触发事件，具体详情一i起来学习下面文章内容吧2021-10-10
这篇文章主要介绍了微信小程序 本地图片按照屏幕尺寸处理的相关资料,这里提供具体实现步骤，需要的朋友可以参考下2017-08-08
本文针对埋点系统和监控系统的融合的一点进行简单的介绍与探索，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-07-07
这篇文章主要为大家介绍了JS图形编辑器实现标尺功能示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-01-01
这篇文章主要为大家介绍了Electron 中的快捷键使用技巧及示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-03-03
这篇文章主要介绍了微信小程序开发入门基础教程的相关资料,需要的朋友可以参考下2017-04-04
这篇文章主要为大家介绍了ECMAScript modules规范示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-11-11
这篇文章主要为大家介绍了TS 类型收窄教程示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-09-09
在开发微信小程序时我们会在小程序内加入纯HTML代码，且HTML中包括图片，视频，甚至是事件，微信小程序为我们提供了3种解决方法，但它们的功能与实现方式与最终效果并不理想2020-01-01
最新评论