微信小程序模板之分页滑动栏


Posted in Javascript onFebruary 10, 2017

本文实例为大家分享了微信小程序分页滑动栏的具体代码,供大家参考,具体内容如下

功能:

1.分页栏与滑动视图绑定
2.点击分页栏自动滑动到对应视图
3.滑动的到视图对应分页栏自动显示选中样式

效果图

微信小程序模板之分页滑动栏

上代码

wxml

<view class="tapNav">
 <view class="{{tabArr.tabCurrentIndex==0?'active':''}}" data-index="0" bindtap="veHandle">分页标签1</view>
 <view class="{{tabArr.tabCurrentIndex==1?'active':''}}" data-index="1" bindtap="veHandle">分页标签2</view>
 <view class="{{tabArr.tabCurrentIndex==2?'active':''}}" data-index="2" bindtap="veHandle">分页标签3</view>
</view>
<swiper id="swiper" indicator-dots="{{indicatorDots}}"
 autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}" current="{{current}}" bindchange="swiperChange">
 <block wx:for="{{imgUrls}}">
 <swiper-item id="swiper-item">
  <image id="imgae" src="{{item}}" class="slide-image" width="355" height="150"/>
 </swiper-item>
 </block>

</swiper>

wxss

/*
1.横向排列分页标签
2.每个分页标签各占1/3
*/
.tapNav {
 display: flex;
 flex-direction: row;
}
.tapNav view{
 flex:1;
 width:200rpx;
 height:100rpx;
 text-align: center;
 line-height: 100rpx;
 font-family: "微软雅黑";
}
/*选中样式*/
.tapNav .active {
 color:blue;
 border-bottom:4rpx solid mediumseagreen;
}
#swiper {
 margin-top:40rpx;
}
#swiper image{
 width:100%;
}

js

//index.js
//获取应用实例
var app = getApp()
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: true,
 //自动播放
 autoplay: true,
 //切换时间间隔
 interval: 2000,
 //滑动时长
 duration: 1000,
 //存放滑动视图的current
 current:0,
 //分页标签class条件判断的值
 tabArr:{
  tabCurrentIndex:0
 }
 },
 //事件处理函数
 //触摸分页标签触发事件
 veHandle:function(e){
 //每个分页标签都设置了data-index,触摸触发事件获取此数值
 //用此数值替换滑动视图的current
 //用此数值替换分页标签class判断的值
 console.log(e.target.dataset.index)
 var currentIndex = e.target.dataset.index
 this.setData({
  current:currentIndex,
  "tabArr.tabCurrentIndex":currentIndex
 })
 },
 //通过滑块视图的current改变触发事件
 swiperChange:function(e){
 //获取视图滑块当前的current
 //用此数值替换分页标签的current的值
 console.log(e.detail.current)
 var swiperCurrent = e.detail.current;
 this.setData({
  'tabArr.tabCurrentIndex':swiperCurrent
 })
 },
 onLoad: function () {
 console.log('onLoad')
 }
})

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
基于Jquery的动态添加控件并取值的实现代码
Sep 24 Javascript
js对象之JS入门之Array对象操作小结
Jan 09 Javascript
javascript学习笔记(九)javascript中的原型(prototype)及原型链的继承方式
Apr 12 Javascript
获取表单控件原始(初始)值的方法
Aug 21 Javascript
js 操作select与option(示例讲解)
Dec 20 Javascript
jQuery中outerWidth()方法用法实例
Jan 19 Javascript
jquery表单验证插件(jquery.validate.js)的3种使用方式
Mar 28 Javascript
js 调用百度分享功能
Feb 27 Javascript
JavaScript使用ZeroClipboard操作剪切板
May 10 Javascript
使用 Node.js 实现图片的动态裁切及算法实例代码详解
Sep 29 Javascript
jQuery 同时获取多个标签的指定内容并储存为数组
Nov 20 jQuery
WebRTC记录音视频流(web技术分享)
Feb 24 Javascript
三种方式实现瀑布流布局
Feb 10 #Javascript
vuejs通过filterBy、orderBy实现搜索筛选、降序排序数据
Oct 26 #Javascript
Ionic+AngularJS实现登录和注册带验证功能
Feb 09 #Javascript
javascript常用的设计模式
Feb 09 #Javascript
简单实现js选项卡切换效果
Feb 09 #Javascript
原生JS轮播图插件
Feb 09 #Javascript
jQuery页面弹出框实现文件上传
Feb 09 #Javascript
You might like
Thinkphp的volist标签嵌套循环使用教程
2014/07/08 PHP
php使用socket post数据到其它web服务器的方法
2015/06/02 PHP
PHP实现连接设备、通讯和发送命令的方法
2015/10/13 PHP
js removeChild 障眼法 可能出现的错误
2009/10/06 Javascript
那些年,我还在学习jquery 学习笔记
2012/03/05 Javascript
web的各种前端打印方法之jquery打印插件PrintArea实现网页打印
2013/01/09 Javascript
使用Java实现简单的server/client回显功能的方法介绍
2013/05/03 Javascript
简介AngularJS的HTML DOM支持情况
2015/06/17 Javascript
JavaScript中将数组进行合并的基本方法讲解
2016/03/07 Javascript
JavaScript 闭包机制详解及实例代码
2016/10/10 Javascript
node.js文件上传处理示例
2016/10/27 Javascript
解决Angular.Js与Django标签冲突的方案
2016/12/20 Javascript
详解使用JS如何制作简单的ASCII图与单极图
2017/03/31 Javascript
解决vue组件中使用v-for出现告警问题及v for指令介绍
2017/11/11 Javascript
vue如何截取字符串
2019/05/06 Javascript
vue动态绘制四分之三圆环图效果
2019/09/03 Javascript
js页面加载后执行的几种方式小结
2020/01/30 Javascript
[02:28]DOTA2 2015国际邀请赛中国区预选赛首日现场百态
2015/05/26 DOTA
[14:24]Optic Gaming vs PSG LGD BO3
2018/06/07 DOTA
在Python的web框架中编写创建日志的程序的教程
2015/04/30 Python
详解Python编程中time模块的使用
2015/11/20 Python
python设计模式大全
2016/06/27 Python
简单谈谈Python流程控制语句
2016/12/04 Python
详解python3实现的web端json通信协议
2016/12/29 Python
Python 3实战爬虫之爬取京东图书的图片详解
2017/10/09 Python
django 环境变量配置过程详解
2019/08/06 Python
python实现生成Word、docx文件的方法分析
2019/08/30 Python
python被修饰的函数消失问题解决(基于wraps函数)
2019/11/04 Python
使用pth文件添加Python环境变量方式
2020/05/26 Python
浅谈pytorch中torch.max和F.softmax函数的维度解释
2020/06/28 Python
python BeautifulSoup库的安装与使用
2020/12/17 Python
Bergfreunde丹麦:登山装备网上零售商
2017/02/26 全球购物
NYX Professional Makeup英国官网:美国平价专业彩妆品牌
2019/11/13 全球购物
VICHY薇姿俄罗斯官方网上商店:法国护肤品牌,火山温泉水
2019/11/22 全球购物
Herschel Supply Co.美国:背包、手提袋及配件
2020/11/24 全球购物
2015年上半年党建工作总结
2015/03/30 职场文书