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


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 .tmpl(), .template()学习资料小结
Jul 18 Javascript
fixedBox固定div漂浮代码支持ie6以上大部分主流浏览器
Jun 26 Javascript
JS插件overlib用法实例详解
Dec 26 Javascript
JavaScript拖拽、碰撞、重力及弹性运动实例分析
Jan 08 Javascript
javascript十六进制数字和ASCII字符之间的转换方法
Dec 27 Javascript
AngularJS select设置默认值的实现方法
Aug 25 Javascript
vue element-ui 绑定@keyup事件无效的解决方法
Mar 09 Javascript
vue2.0 实现导航守卫(路由守卫)
May 21 Javascript
vue项目中实现图片预览的公用组件功能
Oct 26 Javascript
JavaScript自动生成 年月范围 选择功能完整示例【基于jQuery插件】
Sep 03 jQuery
javascript设计模式 ? 抽象工厂模式原理与应用实例分析
Apr 09 Javascript
关于JS中的作用域中的问题思考分享
Apr 06 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 批量替换程序的具体实现代码
2013/10/04 PHP
PHP控制反转(IOC)和依赖注入(DI)
2017/03/13 PHP
php数据序列化测试实例详解
2017/08/12 PHP
php 可变函数使用小结
2018/06/12 PHP
js 解决“options为空或不是对象”
2008/12/22 Javascript
JS 参数传递的实际应用代码分析
2009/09/13 Javascript
用Javascript 获取页面元素的位置的代码
2009/09/25 Javascript
jQuery学习笔记之Helloworld
2010/12/22 Javascript
40个有创意的jQuery图片和内容滑动及弹出插件收藏集之三
2012/01/03 Javascript
分享Javascript中最常用的55个经典小技巧
2013/11/29 Javascript
js操作输入框提示信息且响应鼠标事件
2014/03/25 Javascript
js 模式窗口(模式对话框和非模式对话框)的使用介绍
2014/07/17 Javascript
判断window.onload是否多次使用的方法
2014/09/21 Javascript
jQuery对象与DOM对象转换方法详解
2016/05/10 Javascript
jQuery实现的右下角广告窗体跟随效果示例
2016/09/16 Javascript
使用Javascript监控前端相关数据的代码
2016/10/27 Javascript
bootstrapValidator表单验证插件学习
2016/12/30 Javascript
js实现移动端编辑添加地址【模仿京东】
2017/04/28 Javascript
Python实现递归遍历文件夹并删除文件
2016/04/18 Python
Python基于回溯法子集树模板解决取物搭配问题实例
2017/09/02 Python
django 环境变量配置过程详解
2019/08/06 Python
Python使用tkinter实现摇骰子小游戏功能的代码
2020/07/02 Python
python中如何使用虚拟环境
2020/10/14 Python
将HTML5 Canvas的内容保存为图片借助toDataURL实现
2013/05/20 HTML / CSS
瑞典廉价机票预订网站:Seat24
2018/06/19 全球购物
WiFi云数码相框:Nixplay
2018/07/05 全球购物
日本热销NO.1胶原蛋白冻:Aishitoto爱希特多
2019/06/20 全球购物
环境工程大学生自荐信
2013/10/21 职场文书
优秀的毕业生的自我评价
2013/12/12 职场文书
18岁生日感言
2014/01/12 职场文书
学生安全承诺书
2014/05/22 职场文书
党的群众路线教育实践活动对照检查材料(四风)
2014/09/27 职场文书
学校党委干部个人对照检查材料思想汇报
2014/10/09 职场文书
CSS3 实现NES游戏机的示例代码
2021/04/21 HTML / CSS
Spring整合Mybatis的全过程
2021/06/28 Java/Android
Python人工智能之混合高斯模型运动目标检测详解分析
2021/11/07 Python