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


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 ajax例子返回值详解
Sep 11 Javascript
基于javascript实现图片懒加载
Jan 05 Javascript
微信小程序 video详解及简单实例
Jan 16 Javascript
VUE实现日历组件功能
Mar 13 Javascript
超简单的Vue.js环境搭建教程
Mar 17 Javascript
php 修改密码实现代码
May 24 Javascript
Vue computed计算属性的使用方法
Jul 14 Javascript
BootStrap TreeView使用实例详解
Nov 01 Javascript
JavaScript 监听组合按键思路及代码实现
Jul 28 Javascript
解决ant Design Search无法输入内容的问题
Oct 29 Javascript
js简单粗暴的发布订阅示例代码
Jan 23 Javascript
vue使用节流函数的踩坑实例指南
May 20 Vue.js
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
zend framework多模块多布局配置
2011/02/26 PHP
PHP获取photoshop写入图片文字信息的方法
2015/03/31 PHP
PHP错误Warning:mysql_query()解决方法
2015/10/24 PHP
JQery 渐变图片导航效果代码 漂亮
2010/01/01 Javascript
jquery获取URL中参数解决中文乱码问题的两种方法
2013/12/18 Javascript
js结合正则实现国内手机号段校验
2015/06/19 Javascript
谈谈JavaScript类型系统之Math
2016/01/06 Javascript
Bootstrap学习笔记之css样式设计(1)
2016/06/07 Javascript
详解AngularJS 模块化
2017/06/14 Javascript
react-native中ListView组件点击跳转的方法示例
2017/09/30 Javascript
vue中element 上传功能的实现思路
2018/07/06 Javascript
js隐式转换的知识实例讲解
2018/09/28 Javascript
小程序调用微信支付的方法
2019/09/26 Javascript
vue下载二进制流图片操作
2020/10/26 Javascript
微信小程序实现简单的select下拉框
2020/11/23 Javascript
[02:54]DOTA2英雄基础教程 暗影牧师戴泽
2013/12/05 DOTA
[51:17]Mineski vs Secret 2019国际邀请赛淘汰赛 败者组 BO3 第一场 8.22
2019/09/05 DOTA
Django使用详解:ORM 的反向查找(related_name)
2018/05/30 Python
Python3.7黑帽编程之病毒篇(基础篇)
2020/02/04 Python
Python命名空间namespace及作用域原理解析
2020/06/05 Python
魔幻般冒泡背景的CSS3按钮动画
2016/02/27 HTML / CSS
家庭户外服装:Hawkshead
2017/11/02 全球购物
一些关于MySql加速和优化的面试题
2014/01/30 面试题
党的群众路线教育实践活动宣传方案
2014/02/23 职场文书
给校长的建议书400字
2014/05/15 职场文书
优质服务口号
2014/06/11 职场文书
励志演讲稿800字
2014/08/21 职场文书
领导干部遵守党的政治纪律情况思想汇报
2014/09/14 职场文书
2014党的群众路线教育实践活动总结报告
2014/10/31 职场文书
起诉书格式范文
2015/05/20 职场文书
婚庆主持词大全
2015/06/30 职场文书
小学运动会前导词
2015/07/20 职场文书
python 开心网和豆瓣日记爬取的小爬虫
2021/05/29 Python
基于Python实现流星雨效果的绘制
2022/03/18 Python
vue项目配置sass及引入外部scss文件
2022/04/14 Vue.js
SQL Server一个字符串拆分多行显示或者多行数据合并成一个字符串
2022/05/25 SQL Server