首页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. 3_PHP表达式_5_数据类型转换_类型强制转换

    以下为学习孔祥盛主编的<PHP编程基础与实例教程>(第二版)所做的笔记. PHP类型转换分为类型自动转换和类型强制转换. 3.5.2 类型强制转换 类型强制转换允许编程人员手动将变量的数据 ...

  2. Python——初识网络爬虫(网页爬取)

    网络爬虫(又称为网页蜘蛛,网络机器人,在FOAF社区中间,更经常的称为网页追逐者),是一种按照一定的规则,自动地抓取万维网信息的程序或者脚本.另外一些不常使用的名字还有蚂蚁.自动索引.模拟程序或者蠕虫 ...

  3. python数据统计出海品牌

    当国内市场处于红海之中时,市场全球化已成为大势所趋.越来越多的国产品牌远走高飞,纷纷将品牌拿出来. 2019年,中国品牌十大品牌中,华为品牌力指数同比增长22%,阿里巴巴品牌力指数增长48%,小米品牌 ...

  4. java中级面试题

    1.Java中堆和栈有什么不同? 每个线程都有自己的栈内存,用于存储本地变量,方法参数和栈调用,一个线程中存储的变量对其它线程是不可见的.而堆是所有线程共享的一片公用内存区域.对象都在堆里创建,为了提 ...

  5. Python——getpass(密码不显示)

    为了用户输入密码时,不被其他人员看到,可以使用getpass模块来将密码以不显示的形式来表达. import getpass pwd = getpass.getpass() #在PyCharm中,运行 ...

  6. 使用redis事物解决stringRedisTemplate.setIfAbsent()并设置过期时间遇到的问题

    spring-date-redis版本:1.6.2场景:在使用setIfAbsent(key,value)时,想对key设置一个过期时间,同时需要用到setIfAbsent的返回值来指定之后的流程,所 ...

  7. VUE this.$http.post 与后端flask 数据交互

    背景: 小鱼第一次前端用的VUE,然后前后端的交互调了几次,记录下来留给自己下次使用 前端 通过  form.XXX 获取数据,代码: <template> <el-form ref ...

  8. python_面向对象——类方法和静态方法

    1.类方法不能访问实例变量,只能访问类变量. class Dog(object): name = 'wdc' def __init__(self,name): self.name = name def ...

  9. Django REST framework+Vue 打造生鲜电商项目(笔记九)

    (from:http://www.cnblogs.com/derek1184405959/p/8859309.html) 十二.支付宝沙箱环境配置 12.1.创建应用 进入蚂蚁金服开放平台(https ...

  10. input 限制输入数字和小数

    //input 限制输入数字和小数 <input type="text" name="demo" value="" onkeyup=& ...