小程序 TabBar 定制
使用微信小程序开发时,用到了其 API - tabBar,设置如下(详细的内容可以参考官网 api):
"tabBar": {
"color": "#999",
"selectedColor": "#f04848",
"backgroundColor": "#ffffff",
"borderStyle": "black",
"list": [{
"pagePath": "pages/index/index",
"text": "首页",
"iconPath": "images/shouye.png",
"selectedIconPath": "images/shouyeActive.png"
}, {
"pagePath": "pages/myWelfare/myWelfare",
"text": "我的",
"iconPath": "images/wode.png",
"selectedIconPath": "images/wodeActive.png"
}]
}
预览发现,页面下方的图标和文字大小、间距等无法改变。为了优化用户体验,决定使用自定义组件。
组件代码结构如下:
tabBar.js是组件的业务逻辑代码:
Component({
// 组件属性
properties: {
// 是否是首页
cur: Number
}, // 初始化数据
data: {
list: [{
img: "./icon/shouye.png",
imgh: "./icon/shouyeActive.png",
name: "首页",
link: '/pages/index/index'
}, {
img: "./icon/wode.png",
imgh: "./icon/wodeActive.png",
name: "我的",
link: "/pages/myWelfare/myWelfare"
}]
}, // 组件方法
methods: {
runTo(e) {
let link = e.currentTarget.dataset.link;
wx.redirectTo({
url: link
})
}
}
})
tabBar.wxml是页面模板:
<view class='content'>
<view wx:for="{{list}}" wx:key="{{index}}"
class="tab-bar {{cur == index ? 'cur':''}}"
bindtap="runTo" data-link="{{item.link}}">
<image src="{{cur == index ?item.imgh:item.img}}"></image>
<view><text>{{item.name}}</text></view>
</view>
</view>
修改之后的效果如下:
小程序 TabBar 定制的更多相关文章
- 微信小程序tabbar设置样式在哪里改
微信小程序tabbar通俗点说就是底部导航,我们一般会配置相关的菜单,方便读者快速导航.tabbar是在项目根目录中的配置文件 app.json 中进行设置:如果小程序是一个多 tab 应用(客户端窗 ...
- 小程序tabBar显示问题
我一直在纠结为什么小程序在有的页面显示,有的页面不显示 查了一下才知道,小程序tabBar只在tabBar中的list定义了页面的才会显示,其余页面不会显示 如下例:tabBar只在画红框的页面显示
- 微信小程序tabBar与redirectTo 或navigateTo冲突
微信小程序tabBar与redirectTo 或navigateTo冲突 tabBar设置的pagePath无法再次被redirectTo或navigateTo引用 导致跳转失败,更改为swithTa ...
- 微信小程序 tabBar模板
tabBar导航栏 小程序tabBar,我们可以通过app.json进行配置,可以放置于顶部或者底部,用于不同功能页面的切换,挺好的... 但,,,貌似不能让动态修改tabBar(需求:通过switc ...
- 微信小程序 - tabbar动态更换图标以及文字
大家不喜欢小程序的tabbar原因之一就是它太死板,tabbar一旦在app.json定义以后文字不能改,图标不能改! 我要自制tabbar!!! 其实在微信更新完1.9.0基础调试以后就推出了更新方 ...
- 微信小程序tabBar 不显示底部菜单的原因和解决方法
1,书写,正确书写时tabBar,不要写成tabbar!!! 2,当创建新工程时,app.json中Pages配置是这样的 ,,[图1], 注意:微信小程序里面的json文件时不能注释的,图中只是给读 ...
- 微信小程序tabBar显示问题
在微信小程序的开发中,我遇到疑惑如下: 在app.json中定义了多个pages,一般微信小程序启动的时候,自动加载pages下的第一个页面, "pages": [ ...
- 异常:微信小程序tabBar不生效
app.json全局tabBar设置tabBar不显示 由于小程序的机制问题,首页的tabBar第一个导航必须是首页 "pages": [ "pages/index/in ...
- 微信小程序~TabBar底部导航切换栏
底部导航栏这个功能是非常常见的一个功能,基本上一个完成的app,都会存在一个导航栏,那么微信小程序的导航栏该怎么实现呢?经过无数的踩坑,终于实现了,好了,先看看效果图. 对于底部导航栏,小程序上给出的 ...
随机推荐
- C#基础知识之关键字
关键字是 C# 编译器预定义的保留字.这些关键字不能用作标识符,但是,如果您想使用这些关键字作为标识符,可以在关键字前面加上 @ 字符作为前缀.在 C# 中,有些关键字在代码的上下文中有特殊的意义,如 ...
- C#基础知识之反射
http://blog.csdn.net/educast/article/details/2894892 两个现实中的例子:1.B超:大家体检的时候大概都做过B超吧,B超可以透过肚皮探测到你内脏的生理 ...
- spring mybatics
spring boot web.mysql.mybatics.jps 遇到jar包版本不行的直接换个版本Add进去 https://github.com/forezp/SpringBootLe ...
- hadoop dfs.datanode.du.reserved 预留空间配置方法
对于datanode配置预留空间的方法 为:在hdfs-site.xml添加如下配置 <property> <name>dfs.datanode.du.reserved< ...
- 平滑升级你的Nginx
1.概述(可以直接跳过看第2部分) Nginx方便地帮助我们实现了平滑升级.其原理简单概括,就是: (1)在不停掉老进程的情况下,启动新进程. (2)老进程负责处理仍然没有处理完的请求,但不再接受处理 ...
- docker 安装 fastdfs
fastdfs 安装 //1.拉取镜像 docker pull morunchang/fastdfs //2.启动tracker docker run -d --name tracker --net= ...
- future builder
import 'package:flutter/material.dart';import 'dart:convert';import 'package:http/http.dart' as http ...
- 命令行获取zabbix最新的issues - jq 解释json
0.安装jq wget -O jq https://github.com/stedolan/jq/releases/download/jq-1.5/jq-linux64 chmod +x ./jq c ...
- Data Governance
https://erwin.com/blog/data-preparation-mapping/
- win10设置操作备忘
添加密码, 更改密码: Win键-->左侧用户图标-->更改帐户设置-->登陆选项-->添加密码 | 更改密码