首页wxml的代码:

 <view class="nav" hover-class="none">
<view class="index" bindtap="fresh">
<image class="navbottomicon" src="{{homeOr?srcactive :src}}"></image>
<text class="nav-tex" style="color:{{homeOr?srcactivecolor:srccolor}};">放心试</text>
</view>
<view class="index" bindtap="toList" data-url="https://www.fishqc.com/cn/m/report-list#program">
<image class="navbottomicon" src="{{listOr?listactive :list}}"></image>
<text class="nav-tex" style="color:{{listOr?listactivecolor:listcolor}};">榜单</text>
</view>
<view class="index" bindtap="jumpown">
<image style="border-radius: 50%;overflow: hidden;border:1px solid #f6f6f6;box-sizing: border-box;" class="navbottomicon"
src="{{islogin ? Headimg :own}}"></image>
<text class="nav-tex">我的</text>
</view>
</view>

首页的css代码

.nav{
position:fixed;
bottom:0;
width:100%;
height:45px;
line-height:45px;
border-top:1px solid #ddd;
background-color:#fff;
display:flex;
z-index:3; } .nav .index{
height:100%;
line-height:100%;
text-align:center;
color:#000;
display:inline-block;
font-size:10px;
width:50%;
float:left;
}
.nav .index:active{
background:none;
}
.nav .active{
color:#64c8bc;
}
.nav .navbottomicon{
width:20px;
height: 20px;
margin-top: 5px;
}
.nav .nav-tex{
display:block;
line-height:20px;
}

首页的js代码

//index.js
//获取应用实例
const app = getApp() Page({
data: {
motto: '首页',
mainColor: '#91d8d2',
oldcolor: 'grey',
//点击下面的tab
homeOr: true,
src: '/pages/images/try.png',
srcactive: '/pages/images/try-active.png',
listOr: false,//榜单
listactive: '/pages/images/m-ranking-active.png',
list: '/pages/images/m-ranking.png',
islogin: false,
own: '/pages/images/own.png',
Headimg: '/pages/images/own-active.png' },
currentSelect: {},
onLoad: function () {
this.setData({
'currentSelect.key': 'current'
})
},
hello:function (){
app.toasttips('关注成功', 'true')
},
toList:function () {
wx.navigateTo({
url: '../logs/logs'
})
},
jumpown:function(){
wx.navigateTo({
url: '../person/person'
})
}
})

跳转到logs页面的wxml的代码

<view class="container">
到了logs页面
<view class="nav" hover-class="none">
<view class="index" bindtap="fresh">
<image class="navbottomicon" src="{{homeOr?srcactive :src}}"></image>
<text class="nav-tex" style="color:{{homeOr?srcactivecolor:srccolor}};">放心试</text>
</view>
<view class="index" bindtap="toList" data-url="https://www.fishqc.com/cn/m/report-list#program">
<image class="navbottomicon" src="{{listOr?listactive :list}}"></image>
<text class="nav-tex" style="color:{{listOr?listactivecolor:listcolor}};">榜单</text>
</view>
<view class="index" bindtap="jumpown">
<image style="border-radius: 50%;overflow: hidden;border:1px solid #f6f6f6;box-sizing: border-box;" class="navbottomicon"
src="{{islogin ? Headimg :own}}"></image>
<text class="nav-tex">我的</text>
</view>
</view>
</view>

js代码

//logs.js
const util = require('../../utils/util.js') Page({
data: {
logs: [],
details:'我不是首页',
// 点击下面
srcactivecolor: '#64c8bc',
homeOr: false,
src: '/pages/images/try.png',
srcactive: '/pages/images/try-active.png',
listOr: true,//榜单
listactive: '/pages/images/m-ranking-active.png',
list: '/pages/images/m-ranking.png',
islogin: false,
own: '/pages/images/own.png',
Headimg: '/pages/images/own-active.png'
// tabbar },
onLoad: function (option) {
this.setData({
logs: this.data.details
})
console.log(111, wx.getStorageSync('bringSome')) },
fresh:function (){
wx.navigateTo({
url: '../index/index'
})
},
jumpown: function () {
wx.navigateTo({
url: '../person/person'
})
} })

css代码

.nav{
position:fixed;
bottom:0;
width:100%;
height:45px;
line-height:45px;
border-top:1px solid #ddd;
background-color:#fff;
display:flex;
z-index:3;
left:0;
} .nav .index{
height:100%;
line-height:100%;
text-align:center;
color:#000;
display:inline-block;
font-size:10px;
width:50%;
float:left;
}
.nav .index:active{
background:none;
}
.nav .active{
color:#64c8bc;
}
.nav .navbottomicon{
width:20px;
height: 20px;
margin-top: 5px;
}
.nav .nav-tex{
display:block;
line-height:20px;
}

因为我你看到第一个gif我把三个页面的tab都是一样的 ,所以里面的代码大同小异,还有你在样式里多加一个tab和少加一个都是可以的哈~~~样式不会乱.

小程序里面有tabbar,但是大多数是自定义的,记住自己写的不用wx.switchTab啦,哦哦,还有就是我的图是本地的,你顺着图的路径自己上一张就好了

注意保护眼睛,乖 -_-

小程序自定义底部tab的更多相关文章

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

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

  2. 微信小程序自定义底部导航栏组件+跳转

    微信小程序本来封装有底部导航栏,但对于想自定义样式和方法的开发者来说,这并不是很好. 参考链接:https://github.com/ljybill/miniprogram-utils/tree/ma ...

  3. 微信小程序之底部弹框预约插件

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

  4. 百度智能小程序弹窗组件wcPop|智能小程序自定义model弹窗模板

    百度智能小程序自定义弹窗组件wcPop|百度小程序model对话框|智能小程序弹窗界面模板 最近百度也推出了自己的智能小程序,如是就赶紧去试了下,官方提供的api还不是狠完整.而且官方提供的弹窗组件也 ...

  5. 支付宝小程序自定义弹窗插件|支付宝dialog插件|model插件

    支付宝小程序自定义弹窗组件wcPop|小程序自定义对话框|actionSheet弹窗模板 支付宝小程序官方提供的alert提示框.dialog对话框.model弹窗功能比较有限,有些都不能随意自定义修 ...

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

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

  7. 微信小程序自定义Tabber,附详细源码

    目录 1,前言 2,说明 3,核心代码 1,前言 分享一个完整的微信小程序自定义Tabber,tabber按钮可以设置为跳转页面,也可以设置为功能按钮.懒得看文字的可以直接去底部,博主分享了小程序代码 ...

  8. 微信小程序自定义音频组件,自定义滚动条,单曲循环,循环播放

    小程序自定义音频组件,带滚动条 摘要:首先自定义音频组件,是因为产品有这样的需求,需要如下样式的 而微信小程序API给我们提供的就是这样的 而且产品需要小程序有后台播放功能,所以我们不考虑小程序的 a ...

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

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

随机推荐

  1. python入门-windows下anaconda环境搭建

    1. anaconda下载 根据根据自己系统下载32位还是64位,还有版本 python3.6——64bit python3.6——32bit python2.7——64bit python2.7—— ...

  2. idea中异常处理快捷键

    键盘按下 alt+Enter 一般选择try/catch这一个

  3. 前端之:传统的DOM是如何渲染的?

    a.纯后端渲染:页面发送请求,后端服务器中将数据拼成完整DOM树,并转换成一个字节流作为HTTP Response的body返回给浏览器.优点在于 返回的HTTP Response是包含着全部页面内容 ...

  4. OpenWrt增加软件包

    变量名含义 SECTION //包的种类 CATEGORY //显示在menuconfig的哪个目录下 SUBMENU //menuconfig子目录 TITLE //简单的介绍 DESCRIPTIO ...

  5. sql server存储过程解密

    解密存储过程: USE [RYTreasureDB] GO /****** Object: StoredProcedure [dbo].[sp__windbi$decrypt] Script Date ...

  6. SDL -安全开发生命周期

    1.学习SDL https://www.cnblogs.com/whoami101/p/9914862.html 2.学习SDL https://blog.csdn.net/whatday/artic ...

  7. Set的交集、差集踩坑记录

    项目中我用到了Set的retainAll和removeAll两个方法取差集和交集. 用法网上都有,我也不展示了. 但是因为我是急着用,直接就照着写了,没想到出大问题了. 因为我的set是一个map的k ...

  8. charles 主界面总结

    本文参考:charles 主界面总结 charles 主界面的介绍 Charles 主要提供两种查看封包的视图,分别名为 Structure Structure/结构视图,将网络请求按访问的域名分类, ...

  9. leetcode-2-重复的DNA序列

    所有 DNA 都由一系列缩写为 A,C,G 和 T 的核苷酸组成,例如:"ACGAATTCCG".在研究 DNA 时,识别 DNA 中的重复序列有时会对研究非常有帮助. 编写一个函 ...

  10. 【PAT-并查集-水题】L2-007-家庭房产

    L2-007. 家庭房产 给定每个人的家庭成员和其自己名下的房产,请你统计出每个家庭的人口数.人均房产面积及房产套数. 输入格式: 输入第一行给出一个正整数N(<=1000),随后N行,每行按下 ...