微信小程序 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代码详解，包括了微信小程序轮播图swiper代码详解的使用技巧和注意事项，需要的朋友参考一下 微信小程序自定义swiper 滑块视图容器。其中只可放置swiper-item组件，否则会导致未定义的行为。 先在index.wxml中写 style=“background:{ {item}}” 报错不要管，不影响页面布局 再在index.js中写 最后在ind
-
本文向大家介绍微信小程序 swiper组件构建轮播图的实例，包括了微信小程序 swiper组件构建轮播图的实例的使用技巧和注意事项，需要的朋友参考一下 微信小程序 swiper组件构建轮播图的实例 实现效果图： wxml基础文件： wxss样式文件 app.json文件入口 如有疑问请留言或者到本站社区交流讨论，感谢阅读，希望能帮助到大家，谢谢大家对本站的支持！
-
本文向大家介绍微信小程序使用swiper组件实现层叠轮播图，包括了微信小程序使用swiper组件实现层叠轮播图的使用技巧和注意事项，需要的朋友参考一下 本文实例为大家分享了微信小程序实现层叠轮播图的具体代码，供大家参考，具体内容如下 wxml: wxss: js: 效果图： 以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持呐喊教程。
-
本文向大家介绍微信小程序视图容器（swiper）组件创建轮播图，包括了微信小程序视图容器（swiper）组件创建轮播图的使用技巧和注意事项，需要的朋友参考一下 本文为大家分享了微信小程序swiper组件创建轮播图的具体代码，供大家参考，具体内容如下 一、视图容器（Swiper） 1、swiper：滑块视图容器 微信官方文档 二、swiper应用 1、页面逻辑（index.js） 其中 imgUr
-
本文向大家介绍微信小程序 video组件详解及实例代码，包括了微信小程序 video组件详解及实例代码的使用技巧和注意事项，需要的朋友参考一下 视频播放组件与图片加载组件也没啥差别，使用起来也没啥注意的 重要属性： wxml js 相关文章： hello WeApp icon组件 Window tex
-
本文向大家介绍微信小程序 form组件详解及简单实例，包括了微信小程序 form组件详解及简单实例的使用技巧和注意事项，需要的朋友参考一下 微信小程序form 相关文章： 微信小程序 Button 微信小程序 radio 微信小程序 slider 微信小程序 switch 微信小程序 textarea 微信小程序 picker-view 微信小程序 picker 微信小程序 label 微信小程序