更新:

2019-1-18:自定义tabbar组件已发布

各种奇葩的需求,造就了我们

wxml

 <view class="nav-tabs">
<view class="tab-list {{currentTab == idx?'active':'default'}}" wx:for="{{tabArray}}" wx:key="prototype" wx:for-index="idx" wx:for-item="itemName" data-current="{{idx}}" bindtap="swichNav">{{itemName}}
</view>
</view>
<view class="{{currentTab == idx?'show':'hidden'}} tab-content" wx:for="{{tabArray}}" wx:key="prototype" wx:for-index="idx" wx:for-item="itemName">{{itemName}}-{{idx+1}}
</view>

wxss

 /**index.wxss**/

 page {
display: flex;
flex-direction: column;
height: 100%;
} .nav-tabs {
width: 100%;
height: 75rpx;
display: flex;
position: fixed;
bottom:;
} .tab-content {
flex:;
} .default {
line-height: 75rpx;
text-align: center;
flex:;
border-bottom: 1px solid #eee;
color: #000;
font-weight: bold;
font-size: 28rpx;
} .active {
line-height: 75rpx;
text-align: center;
color: #fc5558;
flex:;
border-bottom: 1px solid red;
font-weight: bold;
font-size: 28rpx;
} .show {
display: block;
flex:;
} .hidden {
display: none;
flex:;
}

js

 //index.js
//获取应用实例
let app = getApp()
Page({
data: {
currentTab: 0,
tabArray: ["tab1", "tab2", "tab3", "tab4"]
},
//事件处理函数
bindChange: function(e) {
let that = this;
that.setData({
currentTab: e.detail.current
});
},
swichNav: function(e) {
let that = this;
if (this.data.currentTab === e.target.dataset.current) {
return false;
} else {
that.setData({
currentTab: e.target.dataset.current
})
}
},
onLoad: function() {
let that = this app.getUserInfo(function(userInfo) { that.setData({
userInfo: userInfo
})
})
}
})

微信小程序 - 自定义tabbar的更多相关文章

  1. 微信小程序自定义 tabbar

    一定的需求情况下,无法使用小程序原生的 tabbar 的时候,需要自行实现一个和 tabbar 功能一模一样的自制组件. 查阅了海量的博客和文档之后,亲自踩坑.总结了三种在不使用微信小程序原生 tab ...

  2. 微信小程序自定义tabbar的实现

    微信小程序自定义tabbar的实现 目的:当采用微信的自定义tabbar组件的时候,切换的时候会出现闪屏的效果:当使用微信默认的tabbar的时候,限制了tabbar的数量以及灵活配置. 方案:自己动 ...

  3. 微信小程序自定义tabbar的问题

    个人感觉小程序的tab样式自定义的能力有所欠缺,不够美观,于是今天自己diy了一个tab 测试的时候发现,无论是使用navigator跳转(会出现点击的效果)还是用bindtap(触摸),因为没有定义 ...

  4. 微信小程序 自定义tabbar实例

    在小程序的开发文档中,对tabbar是这样说明的: 如果小程序是一个多 tab 应用(客户端窗口的底部或顶部有 tab 栏可以切换页面),可以通过 tabBar 配置项指定 tab 栏的表现,以及 t ...

  5. 微信小程序自定义TabBar

    项目中需要根据用户角色控制TabBar中各Item的显示和隐藏,然而小程序自带TabBar没有提供隐藏某个item的功能,只好自己动手写了一个. 1.wxml文件 <view class=&qu ...

  6. 微信小程序 - 自定义tabbar(组件)

    配置项(关于使用组件) index.wxml <!-- tabBar:tabBar配置 activeIndex: 激活页面下标 slots: 多插槽配置(需与页面一致) --> <t ...

  7. 微信小程序——自定义导航栏

    微信头部导航栏可能通过json配置: 但是有时候我们项目需求可能需要自定义头部导航栏,如下图所示: 现在具体说一下实现步骤及方法: 步骤: 1.在 app.json 里面把 "navigat ...

  8. 微信小程序自定义弹窗wcPop插件|仿微信弹窗样式

    微信小程序自定义组件弹窗wcPop|小程序消息提示框|toast自定义模板弹窗 平时在开发小程序的时候,弹窗应用场景还是蛮广泛的,但是微信官方提供的弹窗比较有局限性,不能自定义修改.这个时候首先想到的 ...

  9. 微信小程序-自定义底部导航

    代码地址如下:http://www.demodashi.com/demo/14258.html 一.前期准备工作 软件环境:微信开发者工具 官方下载地址:https://mp.weixin.qq.co ...

随机推荐

  1. VC++ 设置控件显示文本的前景色、背景色以及字体

    在每个控件开始绘制之前,都会向其父窗口发送WM_CTLCOLOR通告消息,在该消息的处理函数中,可以设置控件显示文本的前景色.背景色以及字体.该消息处理函数还要求返回一个画刷的句柄,用于在控件具体的绘 ...

  2. Java_如何等待子线程执行结束

    工作中往往会遇到异步去执行某段逻辑, 然后先处理其他事情, 处理完后再把那段逻辑的处理结果进行汇总的产景, 这时候就需要使用线程了. 一个线程启动之后, 是异步的去执行需要执行的内容的, 不会影响主线 ...

  3. 小程序获取openid unionid session_key

    .wxml <button bindtap="paytap">授权</button> .js Page({ paytap: function () { va ...

  4. 一个小动画,颠覆你的CSS世界观

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  5. Android系列教程(十六) 在电脑上装Android

    [软件准备] 1.LiveAndroid v0.3 liveCD [点击下载] 2.VirtualBox 3.0.4 [点击下载]       [图片安装流程]       主要安装思路为:通过vir ...

  6. 通过Web启动本地应用程序

    通过自定义协议在Web中启动本地应用程序 实例是打开本地安装的Word程序   注册自己的协议Windows Registry Editor Version 5.00 [HKEY_CLASSES_RO ...

  7. C/C++嵌入式开发面试题

    C/C++嵌入式开发面试题 预处理器(Preprocessor) 1. 用预处理指令#define 声明一个常数,用以表明1年中有多少秒(忽略闰年问题) #define SECONDS_PER_YEA ...

  8. Robots协议(爬虫协议、机器人协议)

    Robots协议(也称为爬虫协议.机器人协议等)的全称是“网络爬虫排除标准”(Robots Exclusion Protocol),网站通过Robots协议告诉搜索引擎哪些页面可以抓取,哪些页面不能抓 ...

  9. [3] 球(Sphere)图形的生成算法

    顶点数据的生成 bool YfBuildSphereVertices ( Yreal radius, Yuint slices, Yuint stacks, YeOriginPose originPo ...

  10. poj 3131 Cubic Eight-Puzzle 双向广搜 Hash判重

    挺不错的题目,很锻炼代码能力和调试能力~ 题意:初始格子状态固定,给你移动后格子的状态,问最少需要多少步能到达,如果步数大于30,输出-1. 由于单向搜索状态太多,搜到二十几就会爆了,所以应该想到双向 ...