微信小程序自定义tabbar
时间:2020-09-16
本文章向大家介绍微信小程序自定义tabbar,主要包括微信小程序自定义tabbar使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
这个自定义组件需要用到 Vant Weapp 组件库 详情看
https://youzan.github.io/vant-weapp/#/intro
组件
tabbar.json页面
tabbar.wxml页面(这个页面不懂的可以看vant组件库的文档)
tabbar.js页面
tabbar.wxss页面
.picker{
display:flex;
justify-content: space-between;
padding: 25rpx;
border-bottom: 1rpx solid #f0f0f0;
margin: 0 20rpx;
}
这样tabbar组件就写好了 这东西好像可以自己写,原理就差不多
之后在需要tabbar的页面引用
index.html 页面
<tabbar active="{{active}}" bindChangitem="Changitem"></tabbar>
index.js 页面
//index.js
Page({
data: {
active: 0
},
changeIndex(index){
this.setData({ active: index });
if (index==0) {
wx.reLaunch({
url: '/pages/index/index'
})
}else if (index==1) {
wx.reLaunch({
url: '/pages/order/order'
})
}else{
wx.reLaunch({
url: '/pages/my/my'
})
}
},
onLoad: function () {
this.setData({ active: 0 });
},
onShow: function () {
wx.hideTabBar()
}
})
为了防止跳转时tabbar闪动
还是写一个原生的tabbar然后
wx.hideTabbar() 用这个方法把原生的tabbar隐藏
用组件好像是有点麻烦的感兴趣的小伙伴可以参考思路自己写一个
原文地址:https://www.cnblogs.com/aomeng/p/13680182.html
- android SurfaceView绘制实现原理解析
- AbstractQueuedSynchronizer实现示例
- PyQt的一个UI单元测试框架思路
- Spring Cloud Zuul实现动态路由
- android应用资源预编译,编译和打包全解析
- Python优雅地dumps非标准类型
- html5标签基础
- 彻底搞懂Gradle、Gradle Wrapper与Android Plugin for Gradle的区别和联系
- 社会化分享
- Android真机安装sqlite3的方法
- 二次元世界的Linux—东方Project之B站掠影
- 带三方登录(qq,微信,微博)
- Android Studio移动鼠标显示悬浮提示的设置方法
- Spring Cloud构建微服务架构:服务注册与发现
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- Flutter基础widgets教程-CupertinoSlider篇
- Python学习笔记(五) requets多种请求参数
- java实现多个网络文件批量下载并压缩
- Python学习笔记(四) 爬取网站数据(静态,动态)
- java整合FastDFS文件服务器
- Flutter基础widgets教程-CupertinoSwitch篇
- XmlRootElement的作用和用法
- 获取指定月份的所有工作日(工作日为自定义的)
- 自定义配置类,读取Application.properties中的参数
- 将InputSteram转换成文件输出并下载至本地
- sql serve2008是否自带互斥锁
- Flutter基础widgets教程-CupertinoSwitch篇
- Flutter基础widgets教程-CupertinoTabScaffold篇
- C++11 move 语义
- 论函数的设计应如何才好,返回临时变量 | 返回引用 | 传递引用