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


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中的apply()方法和call()方法使用介绍
Jul 25 Javascript
js简单抽奖代码
Jan 16 Javascript
js实现表单检测及表单提示的方法
Aug 14 Javascript
在AngularJS中使用jQuery的zTree插件的方法
Apr 21 Javascript
JavaScript基础——使用Canvas绘图
Nov 02 Javascript
JavaScript中清空数组的三种方式
Mar 22 Javascript
Vue.js+Layer表格数据绑定与实现更新的实例
Mar 07 Javascript
深入理解Vue.js轻量高效的前端组件化方案
Dec 10 Javascript
详解微信小程序支付流程与梳理
Jul 16 Javascript
微信小程序 行的删除和增加操作实现详解
Sep 29 Javascript
ES6学习笔记之let与const用法实例分析
Jan 22 Javascript
jQuery实现简单三级联动效果
Sep 05 jQuery
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中的CMS的涵义
2007/03/11 PHP
php上传文件的增强函数
2010/07/21 PHP
php检索或者复制远程文件的方法
2015/03/13 PHP
浅谈Coreseek、Sphinx-for-chinaese、Sphinx+Scws的区别
2016/12/15 PHP
js获取变量
2006/08/24 Javascript
一些常用的JS功能函数(2009-06-04更新)
2009/06/04 Javascript
获取dom元素那些讨厌的位置封装代码
2010/06/23 Javascript
jquery mobile页面跳转后样式丢失js失效的解决方法
2014/09/06 Javascript
Javascript字符串浏览器兼容问题分析
2014/12/01 Javascript
javascript实现点击提交按钮后显示loading的方法
2015/07/03 Javascript
JS实现的颜色实时渐变效果完整实例
2016/03/25 Javascript
jQuery移动端日期(datedropper)和时间(timedropper)选择器附源码下载
2016/04/19 Javascript
JS 对象(Object)和字符串(String)互转方法
2016/05/20 Javascript
js正则表达式最长匹配(贪婪匹配)和最短匹配(懒惰匹配)用法分析
2016/12/27 Javascript
微信小程序淘宝首页双排图片布局排版代码(推荐)
2020/10/29 Javascript
[06:20]2015国际邀请赛第三日top10
2015/08/08 DOTA
[55:45]DOTA2上海特级锦标赛D组败者赛 Liquid VS COL第一局
2016/02/28 DOTA
python实现C4.5决策树算法
2018/08/29 Python
深入理解Django自定义信号(signals)
2018/10/15 Python
Python箱型图绘制与特征值获取过程解析
2019/10/22 Python
Python基础之字符串常见操作经典实例详解
2020/02/26 Python
python简单的三元一次方程求解实例
2020/04/02 Python
python将音频进行变速的操作方法
2020/04/08 Python
python 负数取模运算实例
2020/06/03 Python
python 利用Pyinstaller打包Web项目
2020/10/23 Python
CSS中的字体大小设置属性总结
2016/05/24 HTML / CSS
阿迪达斯丹麦官网:adidas丹麦
2016/10/01 全球购物
乌克兰珠宝大卖场:Zlato.ua
2020/09/27 全球购物
优秀研究生自我鉴定
2013/12/04 职场文书
咖啡蛋糕店创业计划书
2014/01/28 职场文书
简历的自我评价
2014/02/03 职场文书
护士毕业自我鉴定
2014/02/07 职场文书
学校招生宣传广告词
2014/03/19 职场文书
《青山处处埋忠骨》教学反思
2014/04/22 职场文书
大学运动会通讯稿
2015/07/18 职场文书
Spring Cloud 中@FeignClient注解中的contextId属性详解
2021/09/25 Java/Android