[新手教程] 微信小程序 轮播图 swiper图片组件
来源:互联网 发布:app牛机器人软件 编辑:程序博客网 时间:2024/05/16 15:23
http://www.9miao.com/thread-113781-1-1.html
照着开发文档尝试,总是能有所收获.之前做Android[/url]开发,做个轮播图并不简单,用上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>
[color=rgb(51, 51, 51) !important]复制代码
这里有几个属性需要说明.
微信小程序开发的循环用到了<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 () {
- }
- })
[color=rgb(51, 51, 51) !important]复制代码
3.WXML
/**index.wxss**/
.swiper {
height: 400rpx;
width: 100%;
}
.swiper image {
height: 100%;
width: 100%;
}
.swiper {
height: 400rpx;
width: 100%;
}
.swiper image {
height: 100%;
width: 100%;
}
WXSS不多说,跟CSS没啥区别.
阅读全文
0 0
- [新手教程] 微信小程序 轮播图 swiper图片组件
- 微信小程序 轮播图 swiper图片组件
- 微信小程序(轮播图 swiper组件)
- 微信小程序swiper组件实现图片宽度自适应
- 微信小程序swiper组件实现图片宽度自适应
- [微信小程序]根据图片宽高动态改变swiper(轮播图)组件宽高
- 微信小程序中的swiper组件
- 微信小程序----组件之swiper
- swiper组件构建小程序轮播图
- 微信小程序把玩(十)swiper组件
- 【微信小程序】视图容器-swiper组件
- 学习微信小程序--组件(swiper)
- 微信小程序组件(二)swiper
- 微信小程序例子——使用swiper组件实现图片切换
- 小程序swiper组件做轮播图图片高度问题
- 微信小程序--swiper图片显示不完整
- 微信小程序之swiper轮播图
- 微信小程序之swiper轮播图
- SSD编译出现问题
- js原型对象
- 《Spring技术内幕》学习笔记10——Web环境中Spring的启动过程
- MySQL互为主从数据库配置方案
- html中data-uri和data-href的属性有什么作用
- [新手教程] 微信小程序 轮播图 swiper图片组件
- ros launch 文件的编写
- c# 读取文档
- NOIP2009 T3最优贸易
- # 小试牛刀之责任链模式
- 虚函数与多态需要注意的地方
- 2017 CCPC- 杭州站总结!
- Linux 下 MongoDB 安装使用
- 干货满满,Android热修复方案介绍