小程序自定义底部tab
首页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的更多相关文章
- 微信小程序-自定义底部导航
代码地址如下:http://www.demodashi.com/demo/14258.html 一.前期准备工作 软件环境:微信开发者工具 官方下载地址:https://mp.weixin.qq.co ...
- 微信小程序自定义底部导航栏组件+跳转
微信小程序本来封装有底部导航栏,但对于想自定义样式和方法的开发者来说,这并不是很好. 参考链接:https://github.com/ljybill/miniprogram-utils/tree/ma ...
- 微信小程序之底部弹框预约插件
代码地址如下:http://www.demodashi.com/demo/13982.html 一.前期准备工作: 软件环境:微信开发者工具 官方下载地址:https://mp.weixin.qq.c ...
- 百度智能小程序弹窗组件wcPop|智能小程序自定义model弹窗模板
百度智能小程序自定义弹窗组件wcPop|百度小程序model对话框|智能小程序弹窗界面模板 最近百度也推出了自己的智能小程序,如是就赶紧去试了下,官方提供的api还不是狠完整.而且官方提供的弹窗组件也 ...
- 支付宝小程序自定义弹窗插件|支付宝dialog插件|model插件
支付宝小程序自定义弹窗组件wcPop|小程序自定义对话框|actionSheet弹窗模板 支付宝小程序官方提供的alert提示框.dialog对话框.model弹窗功能比较有限,有些都不能随意自定义修 ...
- 微信小程序自定义tabbar的实现
微信小程序自定义tabbar的实现 目的:当采用微信的自定义tabbar组件的时候,切换的时候会出现闪屏的效果:当使用微信默认的tabbar的时候,限制了tabbar的数量以及灵活配置. 方案:自己动 ...
- 微信小程序自定义Tabber,附详细源码
目录 1,前言 2,说明 3,核心代码 1,前言 分享一个完整的微信小程序自定义Tabber,tabber按钮可以设置为跳转页面,也可以设置为功能按钮.懒得看文字的可以直接去底部,博主分享了小程序代码 ...
- 微信小程序自定义音频组件,自定义滚动条,单曲循环,循环播放
小程序自定义音频组件,带滚动条 摘要:首先自定义音频组件,是因为产品有这样的需求,需要如下样式的 而微信小程序API给我们提供的就是这样的 而且产品需要小程序有后台播放功能,所以我们不考虑小程序的 a ...
- 微信小程序——自定义导航栏
微信头部导航栏可能通过json配置: 但是有时候我们项目需求可能需要自定义头部导航栏,如下图所示: 现在具体说一下实现步骤及方法: 步骤: 1.在 app.json 里面把 "navigat ...
随机推荐
- python入门-windows下anaconda环境搭建
1. anaconda下载 根据根据自己系统下载32位还是64位,还有版本 python3.6——64bit python3.6——32bit python2.7——64bit python2.7—— ...
- idea中异常处理快捷键
键盘按下 alt+Enter 一般选择try/catch这一个
- 前端之:传统的DOM是如何渲染的?
a.纯后端渲染:页面发送请求,后端服务器中将数据拼成完整DOM树,并转换成一个字节流作为HTTP Response的body返回给浏览器.优点在于 返回的HTTP Response是包含着全部页面内容 ...
- OpenWrt增加软件包
变量名含义 SECTION //包的种类 CATEGORY //显示在menuconfig的哪个目录下 SUBMENU //menuconfig子目录 TITLE //简单的介绍 DESCRIPTIO ...
- sql server存储过程解密
解密存储过程: USE [RYTreasureDB] GO /****** Object: StoredProcedure [dbo].[sp__windbi$decrypt] Script Date ...
- SDL -安全开发生命周期
1.学习SDL https://www.cnblogs.com/whoami101/p/9914862.html 2.学习SDL https://blog.csdn.net/whatday/artic ...
- Set的交集、差集踩坑记录
项目中我用到了Set的retainAll和removeAll两个方法取差集和交集. 用法网上都有,我也不展示了. 但是因为我是急着用,直接就照着写了,没想到出大问题了. 因为我的set是一个map的k ...
- charles 主界面总结
本文参考:charles 主界面总结 charles 主界面的介绍 Charles 主要提供两种查看封包的视图,分别名为 Structure Structure/结构视图,将网络请求按访问的域名分类, ...
- leetcode-2-重复的DNA序列
所有 DNA 都由一系列缩写为 A,C,G 和 T 的核苷酸组成,例如:"ACGAATTCCG".在研究 DNA 时,识别 DNA 中的重复序列有时会对研究非常有帮助. 编写一个函 ...
- 【PAT-并查集-水题】L2-007-家庭房产
L2-007. 家庭房产 给定每个人的家庭成员和其自己名下的房产,请你统计出每个家庭的人口数.人均房产面积及房产套数. 输入格式: 输入第一行给出一个正整数N(<=1000),随后N行,每行按下 ...