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


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显示选择目录对话框的代码
Nov 10 Javascript
jquery 扑捉回车键事件代码
Apr 24 Javascript
推荐6款基于jQuery实现图片效果插件
Dec 07 Javascript
JavaScript数组对象实现增加一个返回随机元素的方法
Jul 27 Javascript
JS生成不重复的随机数组的简单实例
Jul 10 Javascript
javascript轮播图算法
Oct 21 Javascript
Angular5中调用第三方js插件的方法
Feb 26 Javascript
js正则表达式校验指定字符串的方法
Jul 23 Javascript
Vue编程式跳转的实例代码详解
Jul 10 Javascript
JS根据Unix时间戳显示发布时间是多久前【项目实测】
Jul 10 Javascript
React 父子组件通信的实现方法
Dec 05 Javascript
Vue-cli打包后如何本地查看的操作
Sep 02 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
星际中的相关伤害
2020/03/04 星际争霸
PHP 文章中的远程图片采集到本地的代码
2009/07/30 PHP
php面向对象全攻略 (三)特殊的引用“$this”的使用
2009/09/30 PHP
php 3行代码的分页算法(求起始页和结束页)
2009/10/21 PHP
PHP 代码规范小结
2012/03/08 PHP
php中调用其他系统http接口的方法说明
2014/02/28 PHP
PHP冒泡算法详解(递归实现)
2014/11/10 PHP
今天你说520了吗?不仅有php表白书还有java表白神器
2016/05/20 PHP
Laravel框架运行出错提示RuntimeException No application encryption key has been specified.解决方法
2019/04/02 PHP
JS跨域代码片段
2012/08/30 Javascript
JavaScript中的typeof操作符用法实例
2014/04/05 Javascript
javascript设置连续两次点击按钮时间间隔的方法
2014/10/28 Javascript
JavaScript中string对象
2015/06/12 Javascript
javascript正则表达式总结
2016/02/29 Javascript
Vue.js实现列表清单的操作方法
2017/11/15 Javascript
VSCode 配置React Native开发环境的方法
2017/12/27 Javascript
webpack4的迁移的使用方法
2018/05/25 Javascript
nodejs中函数的调用实例详解
2018/10/31 NodeJs
vue项目中将element-ui table表格写成组件的实现代码
2019/06/12 Javascript
Vue.js计算机属性computed和methods方法详解
2019/10/12 Javascript
JavaScript基于面向对象实现的无缝滚动轮播示例
2020/01/17 Javascript
vue router返回到指定的路由的场景分析
2020/11/10 Javascript
[06:13]DOTA2进化论(修改版)
2013/10/08 DOTA
[01:38]DOTA2辉夜杯 欢乐的观众现场采访
2015/12/26 DOTA
python实现诗歌游戏(类继承)
2019/02/26 Python
python爬虫 2019中国好声音评论爬取过程解析
2019/08/26 Python
python DataFrame转dict字典过程详解
2019/12/26 Python
Pytorch 中retain_graph的用法详解
2020/01/07 Python
python之随机数函数的实现示例
2020/12/30 Python
python实现跨年表白神器--你值得拥有
2021/01/04 Python
一款基于css3麻将筛子3D翻转特效的实例教程
2014/12/31 HTML / CSS
AmazeUI 图标的示例代码
2020/08/13 HTML / CSS
学生会主席就职演讲稿
2014/01/14 职场文书
个人遵守党的政治纪律情况对照检查材料
2014/09/26 职场文书
使用PDF.js渲染canvas实现预览pdf的效果示例
2021/04/17 Javascript
PostgreSQL常用字符串分割函数整理汇总
2022/07/07 PostgreSQL