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


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类的定义
Jun 28 Javascript
利用jQuery实现WordPress中@的ID悬浮显示评论内容
Dec 11 Javascript
js判断移动端是否安装某款app的多种方法
Dec 18 Javascript
Vue form 表单提交+ajax异步请求+分页效果
Apr 22 Javascript
jQuery实现拖动效果的实例代码
Jun 25 jQuery
vue2.0与bootstrap3实现列表分页效果
Nov 28 Javascript
vue.js使用v-pre与v-html输出HTML操作示例
Jul 07 Javascript
Vue CLI3中使用compass normalize的方法
May 30 Javascript
vue中watch和computed为什么能监听到数据的改变以及不同之处
Dec 27 Javascript
使用preload预加载页面资源时注意事项
Feb 03 Javascript
彻底搞懂并解决vue-cli4中图片显示的问题实现
Aug 31 Javascript
vue内置组件keep-alive事件动态缓存实例
Oct 30 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来检测proxy
2006/10/09 PHP
php备份数据库类分享
2015/04/14 PHP
深入浅析PHP的session反序列化漏洞问题
2017/06/15 PHP
ThinkPHP实现登录退出功能
2017/06/29 PHP
PHP哈希表实现算法原理解析
2020/12/11 PHP
jQuery 获取URL参数的插件
2010/03/04 Javascript
js弹出层之1:JQuery.Boxy (二)
2011/10/06 Javascript
原生JS封装Ajax插件(同域、jsonp跨域)
2016/05/03 Javascript
jQuery ztree实现动态树形多选菜单
2016/08/12 Javascript
Sortable.js拖拽排序使用方法解析
2016/11/04 Javascript
JS实现重新加载当前页面或者父页面的几种方法
2016/11/30 Javascript
解析Javascript单例模式概念与实例
2016/12/05 Javascript
解决微信内置浏览器返回上一页强制刷新问题方法
2017/02/05 Javascript
EsLint入门学习教程
2017/02/17 Javascript
浅谈Angular文字折叠展开组件的原理分析
2017/11/24 Javascript
如何从零开始利用js手写一个Promise库详解
2018/04/19 Javascript
利用vscode调试编译后的js代码详解
2018/05/14 Javascript
Vue中使用canvas方法总结
2019/02/12 Javascript
Vue+Koa2+mongoose写一个像素绘板的实现方法
2019/09/10 Javascript
ES6中let、const的区别及变量的解构赋值操作方法实例分析
2019/10/15 Javascript
[02:43]DOTA2英雄基础教程 半人马战行者
2014/01/13 DOTA
[02:04]2014DOTA2国际邀请赛 DK一个时代的落幕
2014/07/21 DOTA
零基础写python爬虫之urllib2使用指南
2014/11/05 Python
mac安装scrapy并创建项目的实例讲解
2018/06/13 Python
用Python实现数据的透视表的方法
2018/11/16 Python
使用Python创建简单的HTTP服务器的方法步骤
2019/04/26 Python
在python Numpy中求向量和矩阵的范数实例
2019/08/26 Python
Python hashlib加密模块常用方法解析
2019/12/18 Python
实习生体会的自我评价范文
2013/11/28 职场文书
餐厅总经理岗位职责
2013/12/31 职场文书
会议接待欢迎词
2014/01/12 职场文书
民族团结先进集体事迹材料
2014/05/22 职场文书
学校创先争优活动总结
2014/08/28 职场文书
运动会报道稿300字
2014/10/02 职场文书
机关作风整顿个人剖析材料
2014/10/06 职场文书
环保主题班会教案
2015/08/13 职场文书