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


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 相关文章推荐
Js+XML 操作
Sep 20 Javascript
js/html光标定位的实现代码
Sep 23 Javascript
中文输入法不触发onkeyup事件的解决办法
Jul 09 Javascript
jquery实现根据浏览器窗口大小自动缩放图片的方法
Jul 17 Javascript
jQuery+css3实现Ajax点击后动态删除功能的方法
Aug 10 Javascript
简单讲解AngularJS的Routing路由的定义与使用
Mar 05 Javascript
jQuery on()方法绑定动态元素的点击事件实例代码浅析
Jun 16 Javascript
js addDqmForPP给标签内属性值加上双引号的函数
Dec 24 Javascript
借助node实战JSONP跨域实例
Mar 30 Javascript
详解Angular2组件之间如何通信
Jun 22 Javascript
vue+element-ui集成随机验证码+用户名+密码的form表单验证功能
Aug 05 Javascript
JS实现获取数组中最大值或最小值功能示例
Mar 02 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
PHP 中的一些经验积累
2006/10/09 PHP
php自动跳转中英文页面
2008/07/29 PHP
判断PHP数组是否为空的代码
2011/09/08 PHP
PHP简单生成缩略图相册的方法
2015/07/29 PHP
php中__toString()方法用法示例
2016/12/07 PHP
浅谈laravel aliases别名的原理
2019/10/24 PHP
JQueryEasyUI datagrid框架的基本使用
2013/04/08 Javascript
基于javascript实现仿百度输入框自动匹配功能
2016/01/03 Javascript
AngularJS入门教程之数据绑定用法示例
2016/11/01 Javascript
javascript实现文字无缝滚动
2016/12/27 Javascript
用jQuery旋转插件jqueryrotate制作转盘抽奖
2017/02/10 Javascript
详解AngularJS ng-class样式切换
2017/06/27 Javascript
vue loadmore 组件滑动加载更多源码解析
2017/07/19 Javascript
重学JS 系列:聊聊继承(推荐)
2019/04/11 Javascript
浅谈js数组splice删除某个元素爬坑
2020/10/14 Javascript
使用Python的Twisted框架实现一个简单的服务器
2015/04/16 Python
python利用正则表达式搜索单词示例代码
2017/09/24 Python
python pandas修改列属性的方法详解
2018/06/09 Python
Django框架的使用教程路由请求响应的方法
2018/07/03 Python
对PyQt5中树结构的实现方法详解
2019/06/17 Python
python操作excel让工作自动化
2019/08/09 Python
初次部署django+gunicorn+nginx的方法步骤
2019/09/11 Python
Python实现列表中非负数保留,负数转化为指定的数值方式
2020/06/04 Python
Forever 21美国官网:美国标志性快时尚品牌
2017/02/20 全球购物
Crabtree & Evelyn欧盟:豪华洗浴、身体和护发
2021/03/09 全球购物
介绍一下如何优化MySql
2016/12/20 面试题
农业资源与环境专业自荐信范文
2013/12/30 职场文书
商务英语专业求职信范文
2014/01/28 职场文书
保护环境标语
2014/06/09 职场文书
电子商务专业毕业生自荐书
2014/06/22 职场文书
工程部文员岗位职责
2015/02/04 职场文书
毕业设计致谢语
2015/05/14 职场文书
详解Python小数据池和代码块缓存机制
2021/04/07 Python
JavaScript 防篡改对象的用法示例
2021/04/24 Javascript
Android RecyclerView实现九宫格效果
2022/06/28 Java/Android
python计算列表元素与乘积详情
2022/08/05 Python