微信小程序 - 自定义tabbar
更新:
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的更多相关文章
- 微信小程序自定义 tabbar
一定的需求情况下,无法使用小程序原生的 tabbar 的时候,需要自行实现一个和 tabbar 功能一模一样的自制组件. 查阅了海量的博客和文档之后,亲自踩坑.总结了三种在不使用微信小程序原生 tab ...
- 微信小程序自定义tabbar的实现
微信小程序自定义tabbar的实现 目的:当采用微信的自定义tabbar组件的时候,切换的时候会出现闪屏的效果:当使用微信默认的tabbar的时候,限制了tabbar的数量以及灵活配置. 方案:自己动 ...
- 微信小程序自定义tabbar的问题
个人感觉小程序的tab样式自定义的能力有所欠缺,不够美观,于是今天自己diy了一个tab 测试的时候发现,无论是使用navigator跳转(会出现点击的效果)还是用bindtap(触摸),因为没有定义 ...
- 微信小程序 自定义tabbar实例
在小程序的开发文档中,对tabbar是这样说明的: 如果小程序是一个多 tab 应用(客户端窗口的底部或顶部有 tab 栏可以切换页面),可以通过 tabBar 配置项指定 tab 栏的表现,以及 t ...
- 微信小程序自定义TabBar
项目中需要根据用户角色控制TabBar中各Item的显示和隐藏,然而小程序自带TabBar没有提供隐藏某个item的功能,只好自己动手写了一个. 1.wxml文件 <view class=&qu ...
- 微信小程序 - 自定义tabbar(组件)
配置项(关于使用组件) index.wxml <!-- tabBar:tabBar配置 activeIndex: 激活页面下标 slots: 多插槽配置(需与页面一致) --> <t ...
- 微信小程序——自定义导航栏
微信头部导航栏可能通过json配置: 但是有时候我们项目需求可能需要自定义头部导航栏,如下图所示: 现在具体说一下实现步骤及方法: 步骤: 1.在 app.json 里面把 "navigat ...
- 微信小程序自定义弹窗wcPop插件|仿微信弹窗样式
微信小程序自定义组件弹窗wcPop|小程序消息提示框|toast自定义模板弹窗 平时在开发小程序的时候,弹窗应用场景还是蛮广泛的,但是微信官方提供的弹窗比较有局限性,不能自定义修改.这个时候首先想到的 ...
- 微信小程序-自定义底部导航
代码地址如下:http://www.demodashi.com/demo/14258.html 一.前期准备工作 软件环境:微信开发者工具 官方下载地址:https://mp.weixin.qq.co ...
随机推荐
- UVALive 4423 String LD 暴力
A - String LD Time Limit:3000MS Memory Limit:0KB 64bit IO Format:%lld & %llu Submit Stat ...
- mySql---or和in的效率问题(和<=、>=、between之间的关系)
写在前面: 本文是直接拿取的别人的实验数据作参考,然后对数据作分析. 参考网友的测试数据结果: 在网上一直看到的是or和in的效率没啥区别,一直也感觉是这样,前几天刚好在看<mysql数据库开发 ...
- Shell脚本里的双冒号是什么意思
这个是代码开发风格,其实也就是一个函数名,相当于下划线分割,但改读成包名之后就意义不一样.这个是根据Google的Shell开发规范进行定义的. 参考: https://google.github.i ...
- MVC文件上传01-使用jquery异步上传并客户端验证类型和大小
本篇体验MVC上传文件,从表单上传过渡到jquery异步上传. MVC最基本的上传文件是通过form表单提交方式 □ 前台视图部分 <% using(Html.BeginForm("F ...
- velocity+spring mvc+spring ioc+ibatis初试感觉(与struts+spring+hibernate比较)
velocity+spring mvc+spring ioc+ibatis框架是我现在公司要求采用的,原因是因为阿里巴巴和淘宝在使用这样的框架,而我公司现在还主要是以向阿里巴巴和淘宝输送外派人员为 主 ...
- 使用 DES 算法对数据加密
DES算法 ☆提供高质量的数据保护,防止数据未经授权的泄露和未被察觉的修改 ☆具有相当高的复杂性,使得破译的开销超过可能获得的利益,同时又要便于理解和掌握 ☆DES密码体制的安全性应该不依赖于算法的保 ...
- 如何让两个div并排,并且div要看得见边框
<div style="float:left; width:100px; height:100px; border:2px solid #0000FF;"></d ...
- 聊聊clean code
clean code,顾名思义就是整洁的代码,或者说清晰.漂亮的代码,相信大多数工程师都希望自己能写出这样的代码. 也许这是个千人千面的话题,每个工程师都有自己的理解.比如我,从一个天天被骂代码写得烂 ...
- [Usaco2006 Nov]Roadblocks第二短路
贝茜把家搬到了一个小农场,但她常常回到FJ的农场去拜访她的朋友.贝茜很喜欢路边的风景,不想那么快地结束她的旅途,于是她每次回农场,都会选择第二短的路径,而不象我们所习惯的那样,选择最短路. 贝茜所在的 ...
- 第十四章 Executors源码解析
前边两章介绍了基础线程池ThreadPoolExecutor的使用方式.工作机理.参数详细介绍以及核心源码解析. 具体的介绍请参照: 第十二章 ThreadPoolExecutor使用与工作机理 第十 ...