小程序实现页面顶部选项卡效果


Posted in Javascript onNovember 06, 2018

本文实例为大家分享了小程序实现选项卡效果的具体代码,供大家参考,具体内容如下

效果图:

小程序实现页面顶部选项卡效果

github源码下载

<!--index.wxml--> 
<view class="swiper-tab" > 
  <view bindtap="swithNav" wx:for="{{tabCont}}" wx:key="item.index" class="swiper-tab-list {{currentTab==item.index?'active':''}}" data-current='{{item.index}}' >{{item.title}}</view> 
</view> 
<swiper class="swiper-box" current="{{currentTab}}" duration="300" style="height:400px" bindchange="GetCurrentTab" data-current='6' > 
  <swiper-item wx:for="{{tabCont}}" wx:key="item.index"> 
   <image src='{{item.pic}}'></image>
   <view>{{item.title}}</view>
  </swiper-item> 
</swiper>

CSS:

/**index.wxss**/

/**index.wxss**/

.swiper-tab {
 line-height: 80rpx;
 border: 1px solid #ccc;
 display: flex;
 justify-content: space-around;
 align-items: center;
}

.swiper-tab-list {
 font-size: 30rpx;
 color: #777;
 text-align: center;
}

.active {
 color: #da7c0c;
 border-bottom: 5rpx solid #da7c0c;
}

.swiper-box {
 display: block;
 height: 100%;
 width: 100%;
 overflow: hidden;
}

.swiper-box view {
 text-align: center;
}

image {
 width: 100%;
}

js:

Page({

 /**
  * 页面的初始数据
  */
 data: {
  currentTab:0,
  tabCont: [{ "title": "tab1", "pic": "../../img/1.jpg", "index": "0" }, { "title": "tab2", "pic": "../../img/2.jpg", "index": "1" }, { "title": "tab3", "pic": "../../img/3.jpg", "index": "2" }, { "title": "tab4", "pic": "../../img/2.jpg", "index": "3" }, { "title": "tab5", "pic": "../../img/2.jpg", "index": "4" }, { "title": "tab6", "pic": "../../img/2.jpg", "index": "5" }, { "title": "tab7", "pic": "../../img/2.jpg", "index": "6" }, { "title": "tab8", "pic": "../../img/2.jpg", "index": "7" }, { "title": "tab9", "pic": "../../img/2.jpg", "index": "8" }],
 },

 /**
  * 生命周期函数--监听页面加载
  */
 onLoad: function (options) {

 },

 /**
  * 生命周期函数--监听页面初次渲染完成
  */
 onReady: function () {

 },

 /**
  * 生命周期函数--监听页面显示
  */
 onShow: function () {

 },

 /**
  * 生命周期函数--监听页面隐藏
  */
 onHide: function () {

 },

 /**
  * 生命周期函数--监听页面卸载
  */
 onUnload: function () {

 },

 /**
  * 页面相关事件处理函数--监听用户下拉动作
  */
 onPullDownRefresh: function () {

 },

 /**
  * 页面上拉触底事件的处理函数
  */
 onReachBottom: function () {

 },

 /**
  * 用户点击右上角分享
  */
 onShareAppMessage: function () {

 },
 // swiper滑动时触发bindchange事件,获取事件对象e获取当前所在滑块的 index,并将其更新至data的currentTab中,视图渲染通过判断currentTab的让对应的tab hover。
 GetCurrentTab:function(e){
  console.log(e.detail.current);
  var that = this;
  this.setData({
   currentTab:e.detail.current
  });
  // console.log("11111"+this.data.currentTab);
 },
 swithNav:function(e){
  var that = this;
  that.setData({
   currentTab:e.target.dataset.current
  });

 }
})

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

Javascript 相关文章推荐
javascript 面向对象编程基础:继承
Aug 21 Javascript
一个JavaScript递归实现反转数组字符串的实例
Oct 14 Javascript
javascript获取四位数字或者字母的随机数
Jan 09 Javascript
每天一篇javascript学习小结(Boolean对象)
Nov 12 Javascript
解析浏览器端的AJAX缓存机制
Jun 21 Javascript
浅谈JS中json数据的处理
Jun 30 Javascript
如何使用bootstrap框架 bootstrap入门必看!
Apr 13 Javascript
Angular2中select用法之设置默认值与事件详解
May 07 Javascript
seajs中模块依赖的加载处理实例分析
Oct 10 Javascript
angularjs 缓存的使用详解
Mar 19 Javascript
Vue cli3 库模式搭建组件库并发布到 npm的流程
Oct 12 Javascript
详解ES6实现类的私有变量的几种写法
Feb 10 Javascript
Vue常用的几个指令附完整案例
Nov 06 #Javascript
vue-cli 打包后提交到线上出现 &quot;Uncaught SyntaxError:Unexpected token&quot; 报错
Nov 06 #Javascript
100行代码实现一个vue分页组功能
Nov 06 #Javascript
微信小程序自定义tabBar组件开发详解
Sep 24 #Javascript
Vue递归实现树形菜单方法实例
Nov 06 #Javascript
electron中使用bootstrap的示例代码
Nov 06 #Javascript
vue实现自定义日期组件功能的实例代码
Nov 06 #Javascript
You might like
vBulletin Forum 2.3.xx SQL Injection
2006/10/09 PHP
ThinkPHP模板IF标签用法详解
2014/07/01 PHP
PHP中使用xmlreader读取xml数据示例
2014/12/29 PHP
php如何控制用户对图片的访问 PHP禁止图片盗链
2016/03/25 PHP
CI框架(CodeIgniter)实现的导入、导出数据操作示例
2018/05/24 PHP
PHP获取MySQL执行sql语句的查询时间方法
2018/08/21 PHP
JS远程获取网页源代码实例
2013/09/05 Javascript
JavaScript表单通过正则表达式验证电话号码
2014/03/14 Javascript
AngularJS 入门教程之事件处理器详解
2016/08/19 Javascript
利用jQuery.Validate异步验证用户名是否存在(推荐)
2016/12/09 Javascript
jquery实现(textarea)placeholder自动换行
2016/12/22 Javascript
js实现把时间戳转换为yyyy-MM-dd hh:mm 格式(es6语法)
2017/12/28 Javascript
vue的安装及element组件的安装方法
2018/03/09 Javascript
angular 内存溢出的问题解决
2018/07/12 Javascript
Vue使用富文本编辑器Vue-Quill-Editor(含图片自定义上传服务、清除复制粘贴样式等)
2020/05/15 Javascript
vue-cli单页面预渲染seo-prerender-spa-plugin操作
2020/08/10 Javascript
利用React高阶组件实现一个面包屑导航的示例
2020/08/23 Javascript
Javascript基于OOP实实现探测器功能代码实例
2020/08/26 Javascript
JS中箭头函数与this的写法和理解
2021/01/14 Javascript
python嵌套函数使用外部函数变量的方法(Python2和Python3)
2016/01/31 Python
Python3.2模拟实现webqq登录
2016/02/15 Python
Django的分页器实例(paginator)
2017/12/01 Python
Python3实现转换Image图片格式
2018/06/21 Python
Python实现多线程的两种方式分析
2018/08/29 Python
解决Python3 控制台输出InsecureRequestWarning问题
2019/07/15 Python
使用jupyter notebook运行python和R的步骤
2020/08/13 Python
利用python+ffmpeg合并B站视频及格式转换的实例代码
2020/11/24 Python
Python之多进程与多线程的使用
2021/02/23 Python
美国用餐电影院:Alamo Drafthouse Cinema
2020/01/23 全球购物
水产养殖学应届生求职信
2013/09/29 职场文书
函授大专自我鉴定
2013/11/01 职场文书
校园报刊亭的创业计划书
2014/01/02 职场文书
个人年终总结怎么写
2015/03/09 职场文书
监护人证明
2015/06/19 职场文书
2016年圣诞节活动总结范文
2016/04/01 职场文书
Django框架之路由用法
2022/06/10 Python