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


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 可拖拽的窗体控件实现代码
Mar 21 Javascript
jQuery中removeProp()方法用法实例
Jan 05 Javascript
JS修改iframe页面背景颜色的方法
Apr 01 Javascript
JQuery删除DOM节点的方法
Jun 11 Javascript
jQuery中$.each()函数的用法引申实例
May 12 Javascript
微信支付 JS API支付接口详解
Jul 11 Javascript
用AngularJS来实现监察表单按钮的禁用效果
Nov 02 Javascript
Node.js数据库操作之连接MySQL数据库(一)
Mar 04 Javascript
Webpack实现按需打包Lodash的几种方法详解
May 08 Javascript
浅谈HTTP 缓存的那些事儿
Oct 17 Javascript
基于 jQuery 实现键盘事件监听控件
Apr 04 jQuery
详解vue父子组件关于模态框状态的绑定方案
Jun 05 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正则走开
2008/03/15 PHP
php生成shtml类用法实例
2014/12/09 PHP
thinkPHP使用post方式查询时分页失效的解决方法
2015/12/09 PHP
ThinkPHP 整合Bootstrap Ajax分页样式
2016/12/23 PHP
laravel框架中表单请求类型和CSRF防护实例分析
2019/11/23 PHP
使用jquery写个更改表格行顺序的小功能
2014/04/29 Javascript
jQuery中siblings()方法用法实例
2015/01/08 Javascript
在父页面得到zTree已选中的节点的方法
2015/02/12 Javascript
jquery表单对象属性过滤选择器实例分析
2015/05/18 Javascript
在JavaScript中操作时间之setYear()方法的使用
2015/06/12 Javascript
sso跨域写cookie的一段js脚本(推荐)
2016/05/25 Javascript
JS实现可编辑的后台管理菜单功能【附demo源码下载】
2016/09/13 Javascript
微信小程序 SocketIO 实例讲解
2016/10/13 Javascript
原生JS实现图片无缝滚动方法(附带封装的运动框架)
2017/10/01 Javascript
vue组件从开发到发布的实现步骤
2018/11/11 Javascript
Vue源码解析之数据响应系统的使用
2019/04/24 Javascript
vue element-ui table组件动态生成表头和数据并修改单元格格式 父子组件通信
2019/08/15 Javascript
详解Python中的__init__和__new__
2014/03/12 Python
Python+Opencv识别两张相似图片
2020/03/23 Python
Python中的迭代器与生成器高级用法解析
2016/06/28 Python
python实现上传下载文件功能
2020/11/19 Python
基于python的BP神经网络及异或实现过程解析
2019/09/30 Python
Python三元运算与lambda表达式实例解析
2019/11/30 Python
python 数据分析实现长宽格式的转换
2020/05/18 Python
详解基于 Canvas 手撸一个六边形能力图
2019/09/02 HTML / CSS
HTML5中input输入框默认提示文字向左向右移动的示例代码
2020/09/10 HTML / CSS
给民警的表扬信
2014/01/08 职场文书
运动会入场解说词300字
2014/01/25 职场文书
中学生差生评语
2014/01/30 职场文书
摄影助理岗位职责
2014/02/07 职场文书
元宵晚会主持词
2014/03/25 职场文书
《棉鞋里的阳光》教学反思
2014/04/24 职场文书
汽车技术服务与贸易专业求职信
2014/07/20 职场文书
聊聊pytorch测试的时候为何要加上model.eval()
2021/05/23 Python
Redis中有序集合的内部实现方式的详细介绍
2022/03/16 Redis
世界十大狙击步枪排行榜
2022/03/20 杂记