微信小程序之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 相关文章推荐
URL编码转换,escape() encodeURI() encodeURIComponent()
Dec 27 Javascript
javascript parseInt 大改造
Sep 27 Javascript
仿百度输入框智能提示的js代码
Aug 22 Javascript
jquery选择器-根据多个属性选择示例代码
Oct 21 Javascript
jquery实现点击label的同时触发文本框点击事件的方法
Jun 05 Javascript
javascript简单实现类似QQ头像弹出效果的方法
Aug 03 Javascript
Spring MVC中Ajax实现二级联动的简单实例
Jul 06 Javascript
Angular 表单控件示例代码
Jun 26 Javascript
基于vue2实现上拉加载功能
Nov 28 Javascript
js简单的分页器插件代码实例
Sep 11 Javascript
VUE中鼠标滚轮使div左右滚动的方法详解
Dec 14 Vue.js
原生JavaScript实现进度条
Feb 19 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
复杂检索数据并分页显示的处理方法
2006/10/09 PHP
FleaPHP的安全设置方法
2008/09/15 PHP
session在PHP大型web应用中的使用
2011/06/25 PHP
PHP编程风格规范分享
2014/01/15 PHP
PHP编程开发怎么提高编程效率 提高PHP编程技术
2015/11/09 PHP
php利用递归实现删除文件目录的方法
2016/09/23 PHP
JQuery对class属性的操作实现按钮开关效果
2013/10/11 Javascript
探讨jQuery的ajax使用场景(c#)
2013/12/03 Javascript
js之ActiveX控件使用说明 new ActiveXObject()
2014/03/03 Javascript
javascript快速排序算法详解
2014/09/17 Javascript
asp.net+js实现金额格式化
2015/02/27 Javascript
JavaScript如何获取数组最大值和最小值
2015/11/18 Javascript
Bootstrap页面布局基础知识全面解析
2016/06/13 Javascript
关于动态执行代码(js的Eval)实例详解
2016/08/15 Javascript
js实现登录注册框手机号和验证码校验(前端部分)
2017/09/28 Javascript
python列表操作实例
2015/01/14 Python
浅谈python类属性的访问、设置和删除方法
2016/07/25 Python
Pycharm学习教程(7)虚拟机VM的配置教程
2017/05/04 Python
Python自定义线程类简单示例
2018/03/23 Python
python面向对象多线程爬虫爬取搜狐页面的实例代码
2018/05/31 Python
windows下的pycharm安装及其设置中文菜单
2020/04/23 Python
美国男士内衣品牌:Tommy John
2017/12/22 全球购物
单身旅行者的单身假期:Just You
2018/04/08 全球购物
Peter Millar官网:美国高档生活服饰品牌
2018/07/02 全球购物
什么是URL
2015/12/13 面试题
一套英文Java笔试题面试题
2016/04/21 面试题
麦当劳辞职信范文
2014/01/18 职场文书
会计电算化毕业生自荐信
2014/03/03 职场文书
旅游管理毕业生自荐信范文
2014/03/19 职场文书
建房协议书
2014/04/11 职场文书
我爱我的祖国演讲稿
2014/05/04 职场文书
机械工程师岗位职责
2014/06/16 职场文书
英文感谢信格式
2015/01/21 职场文书
汽车质检员岗位职责
2015/04/08 职场文书
2019预备党员转正申请书模板2篇!
2019/08/07 职场文书
写给汽车4S店的创业计划书,拿来即用!
2019/08/09 职场文书