微信小程序轮播图 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没啥区别.

不明白的看看开发文档

http://blog.csdn.net/qq_31383345

微信小程序轮播图 swiper图片组件相关推荐

微信小程序 # 轮播图swiper滑动到最后一页进行页面跳转
需求背景首次启动小程序时要用轮播图做展示,希望能实现滑动到最后一页自动就跳转到首页实现思路 <view class="container" id="first- ...
微信小程序轮播图swiper详细代码介绍
微信小程序自定义swiper 滑块视图容器.其中只可放置swiper-item组件,否则会导致未定义的行为. 先在index.wxml中写 style="background:{{item} ...
微信小程序轮播图高度与图片高度不匹配问题
微信小程序轮播图高度与图片高度不匹配问题在微信小程序项目中,为了美观给page设置了padding值,然后让轮播图里面的图片宽度为100%,高度widthFix自适应,出现了如下问题:指示器位置不对 ...
五分钟掌握微信小程序轮播图
微信小程序轮播图实现,比Android 轮播图来说,显得轻松多了. 微信小程序提供swiper组件,官网api提供的swiper滑块视图容器. 属性名类型默认值说明 autoplay Boole ...
微信小程序---轮播图
0. 微信小程序轮播图的实现 a. 是利用了swiper组件滑块视图容器 b. swiper的文档文档https://developers.weixin.qq.com/miniprogram/dev ...
微信小程序轮播中的current_微信小程序轮播图
微信小程序轮播图实现,比Android 轮播图来说,显得轻松多了. 微信小程序提供swiper组件,官网api提供的swiper滑块视图容器. 属性名类型默认值说明 autoplay Boolean ...
微信小程序--轮播图
微信小程序轮播图的实现是利用了swiper组件(滑块视图容器). 主要参数如下: 属性名类型默认值说明 indicator-dots Boolean false 是否显示面板指示点 indica ...
微信小程序轮播图代码
微信小程序轮播图的代码如下: 首先,在小程序的 wxml 文件中,添加如下代码:  <swiper class="swiper" in ...
微信小程序轮播图单独添加图片、修改轮播图图片、单独修改某张图片
小老弟上课的基本见解,有错误欢迎大牛们指正  <text>pages/swiper/swiper.wxml< ...

微信小程序轮播图 swiper图片组件

微信小程序轮播图 swiper图片组件相关推荐

最新文章

热门文章

微信小程序 轮播图 swiper图片组件

微信小程序 轮播图 swiper图片组件相关推荐

最新文章

热门文章

微信小程序轮播图 swiper图片组件

微信小程序轮播图 swiper图片组件相关推荐