小程序自定义底部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 ...
随机推荐
- Centos6 Connect WiFi
Centos6 Connect WiFi // 安装 wireless tools yum install wireless-tools dkms pciutils lsusb // 使用wlan命令 ...
- centos7 GNOME 安装微信客户端
写在前边 最近新装了一个 centos7 GNOME 系统,用了很久了 win,突然转换 linux 桌面版,觉得焕然一新,给搬砖生活增添了一份新意 ~ 先看一下效果图: 怎么弄呢? 下载最新版本 t ...
- div实现圆环进度条
<!DOCTYPE html> <html> <head> <meta charset="{CHARSET}"> <title ...
- zabbix推送内存监控单应用shell
利用top方式获取指定第三方的内存使用率 #!/bin/bash process=$1 if [ ! -z $process ];then cd /zabbix/zabbix-agent/script ...
- S3C2440 OpenJtag
C:\Users\Administrator\Desktop>oflash.exe leds.bin +--------------------------------------------- ...
- 流程控制 while for
循环执行 计算机最擅长的功能之一就是按照规定的条件,重复执行某些操作,这是程序设计中最能发挥计算机特长的程序结构. 1.while语句 while(表达式){ 各种语句.... } 当表达式的值为tr ...
- jQuery dataTable 表格插件的后台分页与界面展示
效果: html部分: {include file="Public:inner_header" /} <nav class="breadcrumb"> ...
- Android笔记(三十二) Android中线程之间的通信(四)主线程给子线程发送消息
之前的例子都是我们在子线程(WorkerThread)当中处理并发送消息,然后在主线程(UI线程)中获取消息并修改UI,那么可以不可以在由主线程发送消息,子线程接收呢?我们按照之前的思路写一下代码: ...
- Android笔记(十七) Android中的Service
定义和用途 Service是Android的四大组件之一,一直在后台运行,没有用户界面.Service组件通常用于为其他组件提供后台服务或者监控其他组件的运行状态,例如播放音乐.记录地理位置,监听用户 ...
- 四:MySQL系列之Python交互(四)
该篇主要介绍MySQL数据库的分表.以及与Python的交互的基本操作等. 一.拆分表操作 1.1 准备工作 创建数据库 --> 使用数据库 --> 创建数据表 --- 添加记录 -- ...