文档章节

微信小程序的视图容器—swiper

博为峰教研组
 博为峰教研组
发布于 2017/05/16 09:14
字数 429
阅读 107
收藏 0

swiper​滑动面板(又称滑块视图容器,常见的轮播图)

属性名

类型

认值

indicator-dots

Boolean

false

是否显示面板指示点

autoplay

Boolean

false

是否自动切换

current

Number

0

当前所在页面的index

interval

Number

5000

自动切换时间间隔

duration

Number

1000

滑动动画时长

bindchange

EventHandle

 

current改变时会触发change事件,event.detail={current:current}

注意:其中只可放置swiper-item组件,其他节点会被自动删除

swiper-item

仅可放置在swiper组件中,宽高自动设置为100%

在.wxml文件中设置swiper

设置indicator-dots="true"显示面板指示点,当前页面为第4页,每次页面切换的时间为5000ms,滑动时长1000ms,绑定页面改变触发事件bindChange。页面显示的图片在imgArray数组中,通过wx:for绑定。

<swiper  indicator-dots="true" autoplay="true"current="3" duration="1000"interval="5000"bindchange="changeCurrent">

<block wx:for="{{imgArray}}">

<swiper-item>

<image src="{{item}}" class="img"></image>

</swiper-item>

</block>

</swiper>

 

在.wxsss中设置图片的宽度

.img{

    width:100%;

}

在.js中设置保存图片的数组imgArray

Page({

  data:{

    imgArray:['https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=1771329155,1268478148&fm=206&gp=0.jpg',

 

'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1490269615418&di=e0ab48f7c68c3c50e4ef91a719bbda9b&imgtype=0&src=http%3A%2F%2Fbbs.crsky.com%2F1236983883%2FMon_1209%2F25_187069_eaac13adbd074a5.jpg',

 

'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1490269615417&di=ef7d8abc8c206aa7edc2042a122e6d1c&imgtype=0&src=http%3A%2F%2Fimg2.3lian.com%2F2014%2Ff3%2F76%2Fd%2F119.jpg',

 

'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1490269615416&di=9a5d6c7c2ad748711f2ea82f947e9ea1&imgtype=0&src=http%3A%2F%2Fimg2.3lian.com%2F2014%2Ff5%2F152%2Fd%2F48.jpg']

 },

并执行changeCurren方法

changeCurrent:function(){

    console.log("我滚动了");

  }

运行结果:

页面此时已经发生滚动,显示第一张图片,底部第一个小圆点颜色变亮。当页面滚动的时候控制台回打印出:我滚动了

© 著作权归作者所有

博为峰教研组
粉丝 50
博文 1224
码字总数 479077
作品 0
黄浦
程序员
私信 提问
微信小程序原生组件swiper在mpvue工程中使用注意事项

时下微信小程序开发框架中mpvue是主流的选择之一。其中,免不了还要使用部分小程序原生的组件。swiper组件几乎成为典型小程序界面的必备组成组件之一。但是,我在试用中遇到一个典型问题,很...

googlingman
2018/12/20
0
0
js时间函数getTime() 在苹果手机上返回NaN的问题

一、出现问题 获取到的时间戳,在Android手机正常,在IPhone中返回NaN。 问题说明: 在苹果手机上时间格式使用“/” 隔开表示。 苹果手机必须这样写,必须用'/'的格式。(安卓手机也可以使用...

tianma3798
2018/11/18
35
0
小程序Canvas生成图片draw()出现黑屏问题/不完整,安卓概率大

在当前小程序版本中对于Canvas空间绘制图片,存在bug,效率比较低。 导致图片回执完成慢。出现黑屏。 解决方案: 在调用draw(),绘制成功后,延迟使用绘制结果。例如:500毫秒后,输出图片内容...

tianma3798
2018/12/05
156
0
统一服务消息返回错误:{"errcode":40165,"errmsg":"invalid weapp pagepath hint: [bsAWua0201ge30]"}

{"errcode":40165,"errmsg":"invalid weapp pagepath hint: [bsAWua0201ge30]"} 原因:pagepath参数为所需跳转到小程序的具体页面路径,支持带参数,(示例index?foo=bar), 以前配置的是:m......

tianma3798
2018/12/14
264
0
小程序开发基础-swiper 滑块视图容器

小编 / 达叔小生 参考官方文档:https://developers.weixin.qq.com/miniprogram/dev/component/ 小程序开发基础-swiper 滑块视图容器 根据官方文档,在自己的程序上运行,并打进代码的效果图...

达叔小生
2018/08/29
0
0

没有更多内容

加载失败,请刷新页面

加载更多

OSChina 周六乱弹 —— 早上儿子问我他是怎么来的

Osc乱弹歌单(2019)请戳(这里) 【今日歌曲】 @凉小生 :#今日歌曲推荐# 少点戾气,愿你和这个世界温柔以待。中岛美嘉的单曲《僕が死のうと思ったのは (曾经我也想过一了百了)》 《僕が死の...

小小编辑
今天
2.1K
14
Excption与Error包结构,OOM 你遇到过哪些情况,SOF 你遇到过哪些情况

Throwable 是 Java 中所有错误与异常的超类,Throwable 包含两个子类,Error 与 Exception 。用于指示发生了异常情况。 Java 抛出的 Throwable 可以分成三种类型。 被检查异常(checked Exc...

Garphy
今天
38
0
计算机实现原理专题--二进制减法器(二)

在计算机实现原理专题--二进制减法器(一)中说明了基本原理,现准备说明如何来实现。 首先第一步255-b运算相当于对b进行按位取反,因此可将8个非门组成如下图的形式: 由于每次做减法时,我...

FAT_mt
昨天
40
0
好程序员大数据学习路线分享函数+map映射+元祖

好程序员大数据学习路线分享函数+map映射+元祖,大数据各个平台上的语言实现 hadoop 由java实现,2003年至今,三大块:数据处理,数据存储,数据计算 存储: hbase --> 数据成表 处理: hive --> 数...

好程序员官方
昨天
61
0
tabel 中含有复选框的列 数据理解

1、el-ui中实现某一列为复选框 实现多选非常简单: 手动添加一个el-table-column,设type属性为selction即可; 2、@selection-change事件:选项发生勾选状态变化时触发该事件 <el-table @sel...

everthing
昨天
21
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部