微信小程序之swiper滑动面板用法示例


Posted in Javascript onDecember 04, 2018

本文实例讲述了微信小程序之swiper滑动面板用法。分享给大家供大家参考,具体如下:

swiper就是为了以后做轮播图用的。下面是一些它的属性

微信小程序之swiper滑动面板用法示例

PS:关于微信小程序组件可参考本站在线工具微信小程序组件说明表http://tools.3water.com/table/wx_component
或官网https://developers.weixin.qq.com/miniprogram/dev/component/

1.首先新建一个page(记得在app.json中注册),上效果图。

微信小程序之swiper滑动面板用法示例

2.index.wxml中的代码

<swiper class="view-item" indicator-dots="true" autoplay="true">
<swiper-item class="bg-green">
<view >Content</view>
</swiper-item>
<swiper-item class="bg-yellow">
<view >Content</view>
</swiper-item>
<swiper-item class="bg-blue">
<view >Content</view>
</swiper-item>
</swiper>

注意:在swiper标签中只可放置swiper-item组件,其他标签如果不放在swiper-item的标签下是没用的,会被自动屏蔽

注意:要想实现滑动面板,必须有swiper和swiper-item这两个标签,一个是控制整个轮播的大小和样式。而swiper-item控制子视图。

indicator-dots=”true”—就是那三个小点,显示是true隐藏是false
autoplay=”true”—是否自动播放。
current=“2”—首先显示的是第(i-1)个视图,i-1是因为它和数组一样,是从0开头的。
interval=”1000”—是指隔几秒换一个图片,1000是1秒
duration=”3000”—是指从一个页面滑动另一个页面所需要的时间,但我发现一个有趣的现象,如果你interval=”1000”的话,它一个页面还没滑动完就,想滑动到第三个页面。

3.官方提供的代码 有意思的是它居然没效果,刚开始我还以为自己哪里错了,最后才发现官方吧swiper写成swpier,开来微信小程序还待完善啊。先上效果图

微信小程序之swiper滑动面板用法示例

index.wxml中

<swpier indicator-dots="{{indicatorDots}}"
 autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}">
 <block wx:for-items="{{imgUrls}}">
  <swpier-item>
   <image src="{{item}}" class="slide-image" width="355" height="150"/>
  </swpier-item>
 </block>
</swpier>
<button bindtap="changeIndicatorDots"> indicator-dots </button>
<button bindtap="changeAutoplay"> autoplay </button>
<slider bindchange="intervalChange" show-value min="500" max="2000"/> interval
<slider bindchange="durationChange" show-value min="1000" max="10000"/> duration

index.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: 5000,
  duration: 1000
 },
 changeIndicatorDots: function(e) {
  this.setData({
   indicatorDots: !this.data.indicatorDots
  })
 },
 changeAutoplay: function(e) {
  this.setData({
   autoplay: !this.data.autoplay
  })
 },
 intervalChange: function(e) {
  this.setData({
   interval: e.detail.value
  })
 },
 durationChange: function(e) {
  this.setData({
   duration: e.detail.value
  })
 }
})

其实,你应该也发现了,微信小程序的index.wxml和index.wxss文件很好理解并且很好上手,难点就在于index.js和index.json的理解,也就是对程序逻辑的处理。

希望本文所述对大家微信小程序设计有所帮助。

Javascript 相关文章推荐
JQuery1.4+ Ajax IE8 内存泄漏问题
Oct 15 Javascript
js中style.display=&quot;&quot;无效的解决方法
Oct 30 Javascript
JS获取子窗口中返回的数据实现方法
May 28 Javascript
jQuery的Cookie封装,与PHP交互的简单实现
Oct 05 Javascript
jquery 抽奖小程序实现代码
Oct 12 Javascript
微信小程序简单实现form表单获取输入数据功能示例
Nov 30 Javascript
使用vue-cli(vue脚手架)快速搭建项目的方法
May 21 Javascript
vue实现双向绑定和依赖收集遇到的坑
Nov 29 Javascript
JavaScript 斐波那契数列 倒序输出 输出100以内的质数代码实例
Sep 11 Javascript
通过javascript实现扫雷游戏代码实例
Feb 09 Javascript
Node.js设置定时任务之node-schedule模块的使用详解
Apr 28 Javascript
在Vue中使用Echarts实例图的方法实例
Oct 10 Javascript
vue项目每30秒刷新1次接口的实现方法
Dec 04 #Javascript
详解webpack4之splitchunksPlugin代码包分拆
Dec 04 #Javascript
React Native中Mobx的使用方法详解
Dec 04 #Javascript
element ui table(表格)实现点击一行展开功能
Dec 04 #Javascript
elementUI中Table表格问题的解决方法
Dec 04 #Javascript
zepto.js 实时监听输入框的方法
Dec 04 #Javascript
vue 之 css module的使用方法
Dec 04 #Javascript
You might like
简单介绍下 PHP5 中引入的 MYSQLI的用途
2007/03/19 PHP
PHP正则表达式之定界符和原子介绍
2012/10/05 PHP
PHP Global变量定义当前页面的全局变量实现探讨
2013/06/05 PHP
php检测用户是否用手机(Mobile)访问网站的类
2014/01/09 PHP
Jquery判断IE6等浏览器的代码
2011/04/05 Javascript
JS小功能(checkbox实现全选和全取消)实例代码
2013/11/28 Javascript
常用的JavaScript模板引擎介绍
2015/02/28 Javascript
javascript操作ul中li的方法
2015/05/14 Javascript
关于session和cookie的简单理解
2016/06/08 Javascript
Bootstrap中的Panel和Table全面解析
2016/06/13 Javascript
canvas实现手机端用来上传用户头像的代码
2016/10/20 Javascript
jQuery插件zTree实现的多选树效果示例
2017/03/08 Javascript
vue如何实现observer和watcher源码解析
2017/03/09 Javascript
Element-UI踩坑之Pagination组件的使用
2018/10/29 Javascript
浅谈vue3中effect与computed的亲密关系
2019/10/10 Javascript
细述Javascript的加法运算符的具体使用
2019/10/18 Javascript
v-slot和slot、slot-scope之间相互替换实例
2020/09/04 Javascript
vue中使用router全局守卫实现页面拦截的示例
2020/10/23 Javascript
[00:44]2016完美“圣”典 风云人物:Mikasa宣传片
2016/12/07 DOTA
[02:38]2018DOTA2亚洲邀请赛赛前采访-VGJ.T
2018/04/03 DOTA
实例解析Python设计模式编程之桥接模式的运用
2016/03/02 Python
Python进程Multiprocessing模块原理解析
2020/02/28 Python
解决pycharm安装第三方库失败的问题
2020/05/09 Python
用python写一个带有gui界面的密码生成器
2020/11/06 Python
分享一个H5原生form表单的checkbox特效代码
2018/02/26 HTML / CSS
哈萨克斯坦移动和数字技术在线商店:SatelOnline.kz
2020/09/04 全球购物
自考生毕业自我鉴定
2013/10/10 职场文书
社区端午节活动方案
2014/01/28 职场文书
学校卫生检查制度
2014/02/03 职场文书
革命英雄事迹演讲稿
2014/09/13 职场文书
国际贸易实训报告
2014/11/05 职场文书
2014年党总支工作总结
2014/12/18 职场文书
2015年感恩节活动总结
2015/03/24 职场文书
《自己的花是让别人看的》教学反思
2016/02/19 职场文书
webpack的移动端适配方案小结
2021/07/25 Javascript
MySQL数据库完全卸载的方法
2022/03/03 MySQL