小程序tabbar这套方案全搞定!

关于微信小程序的tarbar,相信你们都不会陌生 在实现小程序微信原装的tabbar却比较呆板,不够精致,往往不符合自己的要求

  • 这个时候怎么办呢
    这套方案接着!

先简单的来说一下主要思想:
自定义字体图标组件以及tabbar组件,在tabbar中引用自定义字体图标组件。

先说一下这套方案的优点:

  1. 图片换成字体,体积小,请求减少,性能提高
  2. 自己定义tabbar,能够从细节各方面达到自己的要求,精确到1像素
  3. 组件可以根据自己的条件来更换tabbar图标(比如你点进一个页面想把这个页面的tabbar样式自己更换) 总而言之就是自由性很大,精准性良好,能够去随心所欲的打造你的专属tabbar!

实现这套方案核心还是自定义组件

那就从这开始聊:
一个自定义组件由 json wxml wxss js 4个文件组成。

  • 一个页面要引用一个组件时只需要在该页面的json配置下添加如下
{
//声明引用一个组件 配置好你的组件引用路径"usingComponents": {"icon": "../../components/icon/index"}
}
  • 然后再页面上添加组件的标签即可。
//这样就能够在你的页面中添加组件
<icon type="" color="" size=""/>

如果对于组件的定义仍有疑惑的可以参考这份文档: 官方关于自定义组件的文档



OK 下面我们正式来讲这份方案:

  1. 先定义字体图标组件,在阿里图标库里面挑选好你所需要的字体选择下载代码。
    这里我选择的是其中的_fontclass方案,
  2. 把iconfont.css内的内容拷贝到你创建的icon目录下的index.wxss

3. 将该目录下index.json添加

{  
//声明这一组文件设为自定义组件"component": true,"usingComponents": {}
}
  1. 在index.wxml中定义该组件的结构
<!-- 注意style里面的分号! -->
<text class="iconfont icon-{{type}}" style="color:{{color}}; font-size:{{size}}rpx" ></text>
  1. 在js里面配置他的属性
//这里定义了3个自定义属性他们通过{{}}与wxml中的数据连接起来Component({properties: {type: {type: String,value: ''},color: {type: String,value: '#000000'},size: {type: Number,value: '45'}}
})

到此,字体图标组件搞定。

现在开始第二步,搞定tabbar组件。

  1. 首先做在json中添加配置
 {"component": true,//声明对字体图标组件的引用"usingComponents": {"icon": "../../components/icon/index"}
}
  1. 写wxml结构
<view class="weibo-tabbar" >
//绑定回首页事件,此处的data-hi中的数据是为了传递到e.currentTarget.dataset.hi
//通过这个数据我们可以用来判断是否处于首页,然后在js中配置可以阻扰原地跳转<view class="item-left"  bindtap="goHome" data-hi="{{isIndex}}"><icon type="shouye" color="{{isIndex?'#000000':'#b1b1b1'}}" size="45"/><text class="1" style="color:{{isIndex?'#000000':'#b1b1b1'}}">首页</text></view><block wx:if="{{isInner}}"><view class="item-right" style="color:#b1b1b1" bindtap="goShare"><icon type="fenxiang" color="gray" size="45"/><text class="2">分享</text></view></block><block wx:else><view class="item-right"  bindtap="goInfo" data-hi="{{isIndex}}"><icon type="wode" color="{{isIndex?'#b1b1b1':'#000000'}}" size="45"/><text class="2" style="color:{{isIndex?'#b1b1b1':'#000000'}}">我的</text></view></block>
</view>
  1. 再配置js属性及方法
const app = getApp();
Component({properties: {isIndex: { // 是否主页            type: Boolean,value: false,},isInner: { //是否内部页面type: Boolean,value: false,},},data: {// 这里是一些组件内部数据someData: {}},methods: {// 这里是一个自定义方法goHome: (e) => {// 判断是否为主页面防止原地跳转if(!e.currentTarget.dataset.hi){wx.redirectTo({url: "/pages/index/index"})}},goShare: function () {},goInfo: (e) => {if(e.currentTarget.dataset.hi){wx.redirectTo({url: "/pages/info/info"})}}}
})
  1. 配置样式wxss
.weibo-tabbar {bottom: 0;height: 97rpx;padding: 12rpx 0rpx;display: flex;width: 100%;position: fixed;background: #ffffff;box-sizing: border-box;
}
//产生优雅的0.5px边框
.weibo-tabbar::after {content: "";position: absolute;width: 200%;height: 200%;top: 0;left: 0;border-top: 1rpx solid rgba(177, 177, 177, 0.4);transform: scale(0.5);transform-origin: 0 0;}//这里用flex布局,移动端flex布局确实很爽.weibo-tabbar .item-left, .item-right{//这里有一处坑,若不不设置他的层级变大的话//你是点不到这个item按钮的,当然也不会产生触碰事件z-index: 999;width: 50%;display: flex;justify-content: center;align-items: center;flex-direction: column;font-size: 20rpx;color: #b1b1b1;
}
.shouye, .wode {height: 45rpx;width: 45rpx;
}

到此你只需要在你的页面优雅的添加一行,就能在你的页面中产生tabbar

//此处isIndex是给组件的属性传输值,别属性不添加即为默认属性值
<tabbar isIndex="true"></tabbar>

结果:

哇,看了半天就出这么一个小东西!
其实大道至简
掌握这套方案能够适配你需要的所有tabbar
他的颜色、大小、位置都可以自己掌控,重要的是这个解决方案。


最后强调一下里面的一些坑
  1. 按钮的样式层级z-index要提高
  2. 属性值与{{}}传输的把握
  3. style="color:{{color}}; font-size:{{size}}" 注意里面的;号

觉得不错的话可以点个赞鼓励一下哟

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/367434.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

linux服务器用哪个面板好,Linux服务器管理面板哪家比较好用?

Linux服务器管理面板哪家比较好用&#xff1f;发布时间&#xff1a;2020-07-21 06:08:33来源&#xff1a;51CTO阅读&#xff1a;261作者&#xff1a;BirdCloud_1022现在&#xff0c;越来越多的站长朋友都会选择服务器用来搭建网站&#xff0c;但是势必需要我们自己搭建WEB环境&…

spring boot(一)入门

目录 spring boot(一)入门一、简介1、微服务的概念2、什么是spring boot3、快速入门4.springboot的快捷部署spring boot(一)入门 一、简介 1、微服务的概念 说起spring boot&#xff0c;我们不得不说一下“微服务”一词的兴起&#xff0c;微服务一词最早起源于2014年&#xff0…

使用Couchbase分页

如果对Couchbase集群进行查询时必须处理大量文档&#xff0c;则使用分页来逐页获取行很重要。 您可以在“ 分页 ”一章的文档中找到一些信息&#xff0c;但是我想在本文中提供更多详细信息和示例代码。 在此示例中&#xff0c;我将基于啤酒样本数据集创建一个简单的视图&#…

android 常用机型尺寸_不同手机/设备和操作系统版本上的Android堆大小

素胚勾勒不出你不仅手机生产商&#xff0c;而且任何创建Android操作系统版本的人&#xff0c;都可以根据设备的特定需求&#xff0c;指定允许的最大堆大小。一些Android根&#xff0c;如CyanogenMod&#xff0c;甚至允许用户自己选择堆大小作为设置。可以使用该方法检测允许的最…

vue移动端项目缓存问题实践

最近在做一个vue移动端项目&#xff0c;被缓存问题搞得头都大了&#xff0c;积累了一些经验&#xff0c;特此记录总结下&#xff0c;权当是最近项目问题的一个回顾吧&#xff01; 先描述下问题场景&#xff1a;A页面->B页面->C页面。假设A页面是列表页面&#xff0c;B页…

pdf解析与结构化提取

PDF解析与结构化提取 PDF解析 对于PDF文档&#xff0c;我们选择用PDFMiner对其进行解析&#xff0c;得到文本。 PDFMiner PDFMiner使用了一种称作lazy parsing的策略&#xff0c;只在需要的时候才去解析&#xff0c;以减少时间和内存的使用。要解析PDF至少需要两个类&#xff1…

Linux usb bus日志如何打开,从linux usb bus节点来认识usb linux usb认识

首先从linux dmesg来认识usb:<6>[ 19.610046] msm_hsic_host msm_hsic_host: Qualcomm EHCI Host Controller using HSIC<6>[ 19.620391] msm_hsic_host msm_hsic_host: new USB bus registered, assigned bus number 1<6>[ 19.659942] msm_hsic_host …

Spring面试问题

还可以查看我们最新的文章69Spring面试问答-最终名单 。 1&#xff09;什么是春天&#xff1f; 回答&#xff1a; Spring是控件和面向方面的容器框架的轻量级转换。 2&#xff09;解释春天&#xff1f; 回答&#xff1a; 轻巧&#xff1a;在尺寸和透明度方面&#xff0c; S…

java 字符串转utc时间_JAVA 本地时间字符串转UTC时间字符串

本来想偷懒百度一个时间字符串转UTC的代码&#xff0c;但发现没有一个能用&#xff0c;写得还复杂得要死&#xff0c;没办法还是自己撸一个。/*** UTC时间字符串转本地时间字符串* 我的本地getDateTimeInstance()是格式&#xff1a;yyyy-MM-dd HH:mm:ss* param str UTC时间字符…

前端解读面向切面编程(AOP)

前言 面向对象(OOP)作为经典的设计范式&#xff0c;对于我们来说可谓无人不知&#xff0c;还记得我们入行起始时那句经典的总结吗-万事万物皆对象。 是的&#xff0c;基于OOP思想封装、继承、多态的特点&#xff0c;我们会自然而然的遵循模块化、组件化的思维来设计开发应用&a…

windows和linux允许分片,请问hadoop的hdfs文件系统和本地windows文件系统或linux文件系统是什么关系啊,谢谢...

虚拟文件系统 Virtual File Systems(VFS)Linux 是近年来发展起来的一种新型的操作系统&#xff0c;其最重要的特征之一就是支持多种文件系统&#xff0c;使其更加灵活&#xff0c;从而与许多其它的操作系统共存。Linux支持ext&#xff0c;ext2&#xff0c;xia&#xff0c;minix…

201771010120 苏浪浪 《面向对象程序设计(java)》第二周学习总结

理论知识总结 第三章Java基本程序设计结构 1、基本知识&#xff1a;&#xff08;1&#xff09;标识符&#xff1a;是由字母、下划线、美元符号和数字组成&#xff0c;且第一个符号不能为数字。&#xff08;2&#xff09;关键字&#xff1a;剧啊语言中被赋予特定意义的一些单词。…

Apache Camel简介

Apache Camel是著名的企业集成模式的开源实现。 Camel是一个路由和中介引擎&#xff0c;可以帮助开发人员以各种领域特定语言&#xff08;DSL&#xff09;&#xff08;例如Java&#xff0c;Spring / XML&#xff0c;scala等&#xff09;创建路由和中介规则。 骆驼用途广泛 Cam…

《架构即未来》读后感

前言 有将近2年没有写文章了&#xff0c;首先是不知道分享什么&#xff0c;其次就是工作也比较忙&#xff0c;闲暇的时间要么玩游戏、听小说、看电影&#xff0c;虽然也有看书但其实也并不多&#xff0c;以上也都是为了我的懒惰所找的一些借口。 虽然到现在为止也看了百来本书&…

qt结构体嵌套结构体方法_9.2 C++结构体类型变量

C定义结构体类型变量的方法 1、先声明结构体类型再定义变量名&#xff0c;在定义了结构体变量后&#xff0c;系统会为之分配内存单元。struct Student{ //自定义结构体变量int num;//学号char sex;//性别int age;//年龄};2、在声明类型的同时定义变量 一般形式为struct 结构体名…

Vue解析--如何应对面试官提问

近期不断面试中&#xff0c;面试官都会提一些关于Vue相关的源码和“全家桶”之类的问题。那么针对这些提问&#xff0c;我们应该如何更好应答呢&#xff1f;在这里我把对Vue的理解整理出来供大家来参考。 1.Vue是什么&#xff1f; Vue是一套构建用户界面的渐进式框架&#xf…

搭建自动安装的linux,RedHat7搭建无人值守自动安装Linux操作系统(PXE+Kickstart)

Kickstart服务器IP: 192.168.136.253 掩码&#xff1a;255.255.255.0 网关&#xff1a;192.168.136.2 DNS&#xff1a;192.168.136.2安装部署yum源服务器参考 http://www.cnblogs.com/edward2013/p/5020113.html安装部署DHCP服务器# yum -y install dhcp修改配置文件# vi…

Numpy数组的保存与读取方法

1. 数组以二进制格式保存 np.save和np.load是读写磁盘数组数据的两个主要函数。默认情况下&#xff0c;数组以未压缩的原始二进制格式保存在扩展名为npy的文件中&#xff0c;以数组a为例 np.save("filename.npy",a)b np.load("filename.npy")利用这种方法…

Java开发人员的Erlang

您可能没有注意到&#xff0c;但是距离我上次发布博客已经过去了几个星期。 原因是我的Soleus骨折了&#xff0c;而我的腿也石膏了。 不能动弹&#xff0c;我认为调查完全不同的东西是个好主意–要么看那天的电视&#xff0c;要么&#xff0c;尽管Kojak和Magnum PI的重播很诱人…

20165339第六周学习总结

课本知识点总结 第八章 String类 使用String类声明对象并创建对象 String s new String("We are students"); String t new String("We are students"); String (char a[])用一个字符数组a创建一个String对象 char a[] {J,a,v,a}; String s new String(a)…