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


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 相关文章推荐
innerhtml用法 innertext用法 以及innerHTML与innertext的区别
Oct 26 Javascript
ExtJS实现文件下载的方法实例
Nov 09 Javascript
js图片预加载示例
Apr 30 Javascript
js中回调函数的学习笔记
Jul 31 Javascript
Javascript实现多彩雪花从天降散落效果的方法
Feb 02 Javascript
JS控制弹出新页面窗口位置和大小的方法
Mar 02 Javascript
AngularJS 在同一个界面启动多个ng-app应用模块详解
Dec 20 Javascript
vue基于Vue2.0和高德地图的地图组件实例
Apr 28 Javascript
Javascript 关于基本类型和引用类型的个人理解
Nov 01 Javascript
VSCode写vue项目一键生成.vue模版,修改定义其他模板的方法
Apr 17 Javascript
使用原生JS实现滚轮翻页效果的示例代码
May 31 Javascript
js实现点击烟花特效
Oct 14 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
php实现微信发红包功能
2018/07/13 PHP
PHP实现财务审核通过后返现金额到客户的功能
2019/07/04 PHP
window.requestAnimationFrame是什么意思,怎么用
2013/01/13 Javascript
jQuery实现dialog设置focus焦点的方法
2015/06/10 Javascript
全面了解JavaScript对象进阶
2016/07/19 Javascript
easyui combotree加载静态数据问题(选不上)解决方法
2016/12/26 Javascript
jQuery+ajax实现动态添加表格tr td功能示例
2018/04/23 jQuery
js replace 全局替换的操作方法
2018/06/12 Javascript
JS实现textarea通过换行或者回车把多行数字分割成数组并且去掉数组中空的值
2018/10/29 Javascript
用Vue编写抽象组件的方法
2019/05/06 Javascript
layui form表单提交之后重新加载数据表格的方法
2019/09/11 Javascript
Vue 自定义指令实现一键 Copy功能
2019/09/16 Javascript
react-native聊天室|RN版聊天App仿微信实例|RN仿微信界面
2019/11/12 Javascript
基于vue的video播放器的实现示例
2021/02/19 Vue.js
[09:33]2015国际邀请赛第四日TOP10
2015/08/08 DOTA
[51:36]EG vs VP 2018国际邀请赛淘汰赛BO3 第一场 8.24
2018/08/25 DOTA
跟老齐学Python之集成开发环境(IDE)
2014/09/12 Python
零基础写python爬虫之使用urllib2组件抓取网页内容
2014/11/04 Python
python创建列表和向列表添加元素的实现方法
2017/12/25 Python
Python工厂函数用法实例分析
2018/05/14 Python
Python3.5迭代器与生成器用法实例分析
2019/04/30 Python
Python实现京东秒杀功能代码
2019/05/16 Python
python 画3维轨迹图并进行比较的实例
2019/12/06 Python
Tensorflow矩阵运算实例(矩阵相乘,点乘,行/列累加)
2020/02/05 Python
使用Python+selenium实现第一个自动化测试脚本
2020/03/17 Python
Python实现播放和录制声音的功能
2020/08/12 Python
Python xmltodict模块安装及代码实例
2020/10/05 Python
优秀班干部事迹材料
2014/01/26 职场文书
宣传口号大全
2014/06/16 职场文书
测量员岗位职责
2015/02/14 职场文书
护士医德考评自我评价
2015/03/03 职场文书
大一新生军训新闻稿
2015/07/17 职场文书
2016大学生社会实践心得体会范文
2016/01/14 职场文书
公务员廉洁从政心得体会
2016/01/19 职场文书
「天才王子的赤字国家重生术」妮妮姆·拉雷粘土人开订
2022/03/21 日漫
JS前端使用Canvas快速实现手势解锁特效
2022/09/23 Javascript