微信小程序之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 相关文章推荐
使用JavaScript switch case 另类写法
Mar 14 Javascript
JQuery中判断一个元素下面是否有内容或者有某个标签的判断代码
Feb 02 Javascript
JS控制表格实现一条光线流动分割行的方法
Mar 09 Javascript
javascript给span标签赋值的方法
Nov 26 Javascript
jQuery弹簧插件编写基础之“又见弹窗”
Dec 11 Javascript
快速获取/设置iframe内对象元素的几种js实现方法
May 20 Javascript
Bootstarp 基础教程之表单部分实例代码
Feb 03 Javascript
jquery手机触屏滑动拼音字母城市选择器的实例代码
Dec 11 jQuery
vue 录制视频并压缩视频文件的方法
Jul 27 Javascript
JS 实现发送短信验证码的“59秒后重新发送验证短信”功能
Aug 23 Javascript
jQuery实现简易聊天框
Feb 08 jQuery
node.js +mongdb实现登录功能
Jun 18 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
为什么《星际争霸》是测试人工智能的理想战场
2019/12/03 星际争霸
环境会对咖啡种植有什么影响
2021/03/03 咖啡文化
解决GD中文乱码问题
2007/02/14 PHP
PHP 正则判断中文UTF-8或GBK的思路及具体实现
2013/11/26 PHP
检查用户名是否已在mysql中存在的php写法
2014/01/20 PHP
php去除数组中重复数据
2014/11/18 PHP
Laravel Intervention/image图片处理扩展包的安装、使用与可能遇到的坑详解
2017/11/14 PHP
PHP中md5()函数的用法讲解
2019/03/30 PHP
javascript SocialHistory 检查访问者是否访问过某站点
2008/08/02 Javascript
理解JavaScript变量作用域更轻松
2009/10/25 Javascript
js实现点击图片将图片地址复制到粘贴板的方法
2015/02/16 Javascript
jQuery插件boxScroll实现图片轮播特效
2015/07/14 Javascript
js面向对象之常见创建对象的几种方式(工厂模式、构造函数模式、原型模式)
2015/11/09 Javascript
JS中substring与substr的用法
2016/11/16 Javascript
node.js平台下的mysql数据库配置及连接
2017/03/31 Javascript
详解使用Visual Studio Code对Node.js进行断点调试
2017/09/14 Javascript
详解Webstorm 新建.vue文件支持高亮vue语法和es6语法
2017/10/26 Javascript
判断jQuery是否加载完成,没完成继续判断的解决方法
2017/12/06 jQuery
javascript实现简易聊天室
2019/07/12 Javascript
解决layui 三级联动下拉框更新时回显的问题
2019/09/03 Javascript
three.js利用射线Raycaster进行碰撞检测
2020/03/12 Javascript
Vue实现简单计算器
2021/01/20 Vue.js
python 中的divmod数字处理函数浅析
2017/10/17 Python
python实现扫描日志关键字的示例
2018/04/28 Python
ubuntu 18.04 安装opencv3.4.5的教程(图解)
2019/11/04 Python
解决keras GAN训练是loss不发生变化,accuracy一直为0.5的问题
2020/07/02 Python
基于python调用jenkins-cli实现快速发布
2020/08/14 Python
Django3中的自定义用户模型实例详解
2020/08/23 Python
HTML5计时器小例子
2013/10/15 HTML / CSS
HTML5+CSS3实现机器猫
2016/10/17 HTML / CSS
SmartBuyGlasses中国:唯视良品(销售名牌太阳镜、墨镜和眼镜框)
2017/07/03 全球购物
C#面试问题
2016/07/29 面试题
保护环境建议书
2014/03/12 职场文书
会计专业自荐信
2014/06/03 职场文书
一篇文章弄懂MySQL查询语句的执行过程
2021/05/07 MySQL
教你使用pyinstaller打包Python教程
2021/05/27 Python