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

功能:
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%;
}

//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,//存放滑动视图的currentcurrent:0,//分页标签class条件判断的值tabArr:{tabCurrentIndex:0}},//事件处理函数//触摸分页标签触发事件veHandle:function(e){//每个分页标签都设置了data-index,触摸触发事件获取此数值//用此数值替换滑动视图的current//用此数值替换分页标签class判断的值console.log(e.target.dataset.index)var currentIndex = e.target.dataset.indexthis.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')}
})

微信小程序模板-分页滑动栏相关推荐

微信小程序实现左侧滑动导航栏
微信小程序实现左侧滑动导航栏 1.左侧滑动导航栏图如下 2.这是我们左侧滚动栏的代码 wxml <view class='under_line'></view><view ...
微信小程序之顶部导航栏（选项卡）实例 —— 微信小程序实战系列（1）
需求:顶部导航栏效果图: wxml:  <view class="navbar"><text wx:for="{{na ...
微信小程序标题栏和导航栏的设置 —— 微信小程序教程系列（7）
设置标题栏标题栏window 在app.json文件里面,通过window对象里面的属性进行设置示例: app.json: 运行: 设置导航栏导航栏TabBar 如果我们的小程序是一个多 tab ...
微信小程序显示分页列表
目录微信小程序创建项目配置底部导航栏微信小程序滚动播放内容微信小程序功能中心模块开发微信小程序个人中心页面开发微信小程序获取电话号码微信小程序显示列表数据微信小程序显示分页列表微信小程 ...
axure小程序模板_微信小程序模板案例收集
微信小程序发布近四年来,诞生了各行各业的高质量小程序,其中有很多都是用微信小程序模板制作的.新手在制作自己的小程序时,就可以参考这些好看的小程序模板案例. 1.电商小程序这是目前非常常见的小程序类型 ...
[荐] 微信小程序模板源码合集
关注公众号风色年代(itfantasycc) 200G 小程序资料合集送上~ wx-gesture-lock 微信小程序的手势密码 WXCustomSwitch 微信小程序自定义 Switch 组 ...
微信小程序-tab左右滑动切换
微信小程序-tab左右滑动切换一.简介 1.核心思想二.实现 1.wxml实现 2.js实现 3.wxss实现三.参考和总结四.优化 0.效果图 1.每个tab长度自适应 2.先前隔tab点击 ...
微信小程序模板消息（服务通知消息）原始post工具封装(不使用jar包--坑比较多)，解决47001(JSON格式)和中文乱码问题
微信小程序模板消息(服务通知消息)原始post工具封装(不使用jar包--坑比较多),解决47001(JSON格式)和中文乱码问题参考文章: (1)微信小程序模板消息(服务通知消息)原始post工具 ...
微信小程序 - 实现左滑动删除功能
微信小程序 - 实现左滑动删除功能效果图: 实现过程: 一.wxml布局这里我是先用了一个大盒子包裹小盒子,然后小盒子里面进行左右布局(左边为内容部分,右边为删除按钮)的方式实现的 <vie ...

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

微信小程序模板-分页滑动栏相关推荐

最新文章

热门文章