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


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 相关文章推荐
jQuery EasyUI API 中文文档 - Menu菜单
Oct 03 Javascript
javascript实现仿腾讯游戏选择
May 14 Javascript
jQuery中$this和$(this)的区别介绍(一看就懂)
Jul 06 Javascript
详解AngularJS中的http拦截
Feb 09 Javascript
AngularJS 如何在控制台进行错误调试
Jun 07 Javascript
有关JS中的0,null,undefined,[],{},'''''''',false之间的关系
Feb 14 Javascript
Node.js创建HTTP文件服务器的使用示例
May 11 Javascript
vue框架搭建之axios使用教程
Jul 11 Javascript
vue+element实现打印页面功能
May 20 Javascript
vue.js 打包时出现空白页和路径错误问题及解决方法
Jun 26 Javascript
vue props 一次传多个值实例
Jul 22 Javascript
JavaScript实现五子棋小游戏
Oct 26 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
全国FM电台频率大全 - 5 内蒙古自治区
2020/03/11 无线电
从零开始学YII2框架(二)通过 Composer 安装扩展插件
2014/08/20 PHP
php选择排序法实现数组排序实例分析
2015/02/16 PHP
php bootstrap实现简单登录
2016/03/08 PHP
PHP pthreads v3下worker和pool的使用方法示例
2020/02/21 PHP
js加载读取内容及显示与隐藏div示例
2014/02/13 Javascript
JavaScript中的继承之类继承
2016/05/01 Javascript
详解node如何让一个端口同时支持https与http
2017/07/04 Javascript
vue2.0 兄弟组件(平级)通讯的实现代码
2018/01/15 Javascript
NUXT SSR初级入门笔记(小结)
2019/12/16 Javascript
JavaScript 实现继承的几种方式
2021/02/19 Javascript
[01:48:04]DOTA2-DPC中国联赛 正赛 PSG.LGD vs Elephant BO3 第一场 2月7日
2021/03/11 DOTA
python的id()函数解密过程
2012/12/25 Python
python处理文本文件并生成指定格式的文件
2014/07/31 Python
老生常谈python的私有公有属性(必看篇)
2017/06/09 Python
import的本质解析
2017/10/30 Python
python绘制简单折线图代码示例
2017/12/19 Python
Python计算一个给定时间点前一个月和后一个月第一天的方法
2018/05/29 Python
python matlibplot绘制3D图形
2018/07/02 Python
python 实现方阵的对角线遍历示例
2019/11/29 Python
基于numpy中的expand_dims函数用法
2019/12/18 Python
阿联酋手表和配饰购物网站:Rivolishop
2019/11/25 全球购物
JAVA的事件委托机制和垃圾回收机制
2014/09/07 面试题
构造方法和其他方法的区别
2016/04/26 面试题
实习生个人找工作的自我评价
2013/10/30 职场文书
教育实习生的自我评价分享
2013/11/21 职场文书
入团者的自我评价分享
2013/12/02 职场文书
应用艺术毕业生的自我评价
2013/12/04 职场文书
消防宣传口号
2014/06/16 职场文书
室内趣味活动方案
2014/08/24 职场文书
预备党员群众意见
2015/06/01 职场文书
详解TypeScript的基础类型
2022/02/18 Javascript
Python+Tkinter打造签名设计工具
2022/04/01 Python
vue自定义右键菜单之全局实现
2022/04/09 Vue.js
Python matplotlib绘制条形统计图 处理多个实验多组观测值
2022/04/21 Python
springboot读取resources下文件的方式详解
2022/06/21 Java/Android