常用属性:

效果图:

swiper.wxml添加代码:

<swiper indicator-dots="{{indicatorDots}}"
autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}} " bindchange="bindchangeTag">
<block wx:for="{{imgUrls}}">
<swiper-item>
<image src="{{item}}" class="slide-image"/>
</swiper-item>
</block>
</swiper>
<button bindtap="changeIndicatorDots"> 是否显示面板指示点 </button>
<button bindtap="changeAutoplay"> 是否自动切换 </button>
<slider bindchange="intervalChange" show-value min="1000" max="2000"/> 自动切换时间间隔
<slider bindchange="durationChange" show-value min="1800" max="10000"/> 滑动动画时长

js:

Page({
data: {
imgUrls: [
'http://img02.tooopen.com/images/20150928/tooopen_sy_143912755726.jpg',
'http://img06.tooopen.com/images/20160818/tooopen_sy_175866434296.jpg',
'http://img06.tooopen.com/images/20160818/tooopen_sy_175833047715.jpg'
],
indicatorDots: false,
autoplay: false,
interval: 1000,
duration: 1800
},
//是否显示面板指示点
changeIndicatorDots: function(e) {
this.setData({
indicatorDots: !this.data.indicatorDots
})
},
//是否自动切换
changeAutoplay: function(e) {
this.setData({
autoplay: !this.data.autoplay
})
},
//自动切换时间间隔
intervalChange: function(e) {
this.setData({
// e.detail.value获取slider的值
interval: e.detail.value
})
},
//滑动动画时长
durationChange: function(e) {
this.setData({
duration: e.detail.value
})
},
//当页面改变是会触发
bindchangeTag:function(e){
console.log("bindchangeTag...")
},
onLoad:function(options){
// 页面初始化 options为页面跳转所带来的参数
},
onReady:function(){
// 页面渲染完成
},
onShow:function(){
// 页面显示
},
onHide:function(){
// 页面隐藏
},
onUnload:function(){
// 页面关闭
}
})

css:

.slide-image{
width: 100%;
height: 160px;
}

第五篇、微信小程序-swiper组件的更多相关文章

  1. 基于angular实现模拟微信小程序swiper组件

    这段时间的主业是完成一个家政类小程序,终于是过审核发布了.不得不说微信的这个小程序生态还是颇有想法的,抛开他现有的一些问题不说,其提供的组件系统乍一看还是蛮酷的.比如其提供的一个叫swiper的视图组 ...

  2. 微信小程序 swiper 组件坑

    swiper 组件高度被限制为150px了,所以内容无法撑开. 解决办法 给这组件重新设置个高度,然后在把里面的图片设置为自动适应容器大小.图片模式设置为 宽度不变 自动适应高度 <swiper ...

  3. 微信小程序--swiper组件

    <view class='swiper-container'> <swiper indicator-dots="true" autoplay=" ver ...

  4. 微信小程序swiper组件实现图片宽度自适应

    wxml 代码: <!--pages/swipe/swipe.wxml--> <view> <swiper circular="true" indic ...

  5. 微信小程序_(组件)swiper轮播图

    微信小程序swiper轮播图组件官方文档 传送门 Learn: swiper组件 一.swiper组件 indicator-dots:是否显示面板指示点[默认值false] autoplay:是否自动 ...

  6. 微信小程序的组件总结

    本文介绍微信小程序的组件 视图容器 基础内容 表单组件 导航组件 媒体组件 视图容器 view 布局容器 <view hover-class='bg'>222</view> 可 ...

  7. 微信小程序_(组件)scroll-view可滚动视图

    微信小程序scroll-view组件官方文档 传送门 提前准备:使用<view>组件制作五条撑满的横向区域 <!--index.wxml--> Cynical丶Gary < ...

  8. 微信小程序picker组件两列关联使用方式

    在使用微信小程序picker组件时候,可以设置属性   mode = multiSelector   意为多列选择,关联选择,当第一列发生改变时侯,第二列甚至第三列发生相应的改变.但是官方文档上给的只 ...

  9. 微信小程序swiper实现 句子控app首页滑动卡片

    微信小程序swiper实现 句子控app首页滑动卡片 引言:最近看到句子控APP首页的效果很清新,可是发现他的微信小程序端没有实现这个功能,我看了一下难度不大,于是尝试着去实现. 实现效果如下: 1. ...

随机推荐

  1. MEF 编程指南(九):部件生命周期

    理解 MEF 容器部件生命周期和实现是非常重要的事情.考虑到 MEF 关注可扩展应用程序.这变得尤为重要.生命期可以解释为期望部件的共享性(transitively, its exports)   共 ...

  2. win7常用快捷键

    Win+1:打开/显示超级任务栏第一个图标代表的程序Win+2:打开/显示超级任务栏第二个图标代表的程序(3.4.……如此类推)Win+Tab:3D切换窗口,你要是按住不松口,则所有窗口会轮流翻转Wi ...

  3. PostgreSQL中如何查询在当前的哪个数据库中

    [pgsql@localhost bin]$ ./psql -d tester psql () Type "help" for help. tester=# select curr ...

  4. Get-ChildItem参数之 -Exclude,Filter,Recurse应用

    $p = "D:\PSScript" gci $p -Exclude "UpdateLog" #排除子目录"UpdateLog",但是后面不 ...

  5. Oracle_11g_R2安装详解_for_Windows_7

    Oracle 11g R2安装全攻略 - For Windows 7 图文教程 1.下载Oracle 11g R2的Windows版本,官方下载地址如下: http://download.oracle ...

  6. 模拟TAB键

    模拟TAB键 (2013/6/7 22:35:29) SelectNext(ActiveControl,True,True); 屏蔽Alt+F4关闭键 (2013/6/7 22:35:39) 启动某些 ...

  7. Android中Activity启动模式详解

    在Android中每个界面都是一个Activity,切换界面操作其实是多个不同Activity之间的实例化操作.在Android中Activity的启动模式决定了Activity的启动运行方式. An ...

  8. iOS开发——网络编程Swift篇&(四)异步Get方式

    异步Get方式 // MARK: - 异步Get方式 func asynchronousGet() { //创建NSURL对象 var url:NSURL! = NSURL(string: " ...

  9. iOS开发——UI篇OC篇&UITableView简单封装

    UITableView简单封装 UITableView时iOS开发中使用最多也是最重的一个UI空间,其实在App Store里面的%80以上的应用都用到了这个控件,所以就给大家介绍一下,前面的文章中也 ...

  10. PhpStorm, XDebug, and DBGp Proxy

    phpstorm 利用 xdebug.dbgp-proxy配置远程调试 1.单客户机远程调试 a.安装xdebug库文件(windows:php_xdebug.dll;linux:php_xdebug ...