当前位置:首页 > 编程教程 > javascript技术文章 > 微信小程序开发之tabbar图标和颜色的实现

微信小程序:如何实现tabbar图标和颜色

  • 发布时间:
  • 作者:码农之家
  • 点击:60

这篇文章主要知识点是关于tabbar、的内容,如果大家想对相关知识点有系统深入的学习,可以参阅以下电子书

JavaScript和jQuery实战手册
  • 类型:JavaScript大小:103 MB格式:PDF作者:大卫·索耶·麦克法兰德
立即下载

微信小程序开发之tabbar图标和颜色的实现

前期准备 :注册,填材料,验证等等:https://mp.weixin.qq.com

1.浏览一遍简易教程,下载相应的开发工具

写一个小例子

点击左侧的 “编辑”-》点击右侧代码里的 app.json 修改为

{
 "pages":[
  "pages/fightings/home", 
  "pages/publish/home", 
  "pages/mine/home"
 ],
 "tabBar": {
  "list": [
   {
    "pagePath": "pages/fightings/home",
    "text": "挑战"
   },
   {
    "pagePath": "pages/publish/home",
    "text": "发布"
   },
   {
    "pagePath": "pages/mine/home",
    "text": "我"
   }
  ]
 },
 "window":{
  "backgroundTextStyle":"light",
  "navigationBarBackgroundColor": "#fff",
  "navigationBarTitleText": "i挑战",
  "navigationBarTextStyle":"black"
 }
}

说明

  • pages就是我们有多少个页面
  • tabbar是页面底部的tab
  • window是页面的一些属性

微信小程序开发之tabbar图标和颜色的实现

这个样子太丑了 我们先来美化一下这个tab

{
 "pages":[
  "pages/home/home",  
  "pages/fightings/home", 
  "pages/mine/home"
 ],
 "tabBar": {
  "color":"#666666",
  "selectedColor":"#f10b2e",

  "list": [
   {
    "pagePath": "pages/home/home",
    "text": "大厅",
    "iconPath": "./res/icon_tab_home.png",
    "selectedIconPath": "./res/icon_tab_home_hl.png"
    },
    {
    "pagePath": "pages/fightings/home",
    "text": "挑战",
    "iconPath":"./res/icon_tab_fighting.png",
    "selectedIconPath":"./res/icon_tab_fighting_hl.png"
   },

   {
    "pagePath": "pages/mine/home",
    "text": "我",
    "iconPath": "./res/icon_tab_me.png",
    "selectedIconPath": "./res/icon_tab_me_hl.png"
   }
  ]
 },
 "window":{
  "backgroundTextStyle":"light",
  "navigationBarBackgroundColor": "#fff",
  "navigationBarTitleText": "i挑战",
  "navigationBarTextStyle":"black"
 }
}

说明

字段都比较简单就不详细说了 其中 “iconPath”: “./res/icon_tab_me.png”是图片的路径

自己在项目里创建一个res文件夹,然后放入需要的图片

tab 好看一点了吧

微信小程序开发之tabbar图标和颜色的实现

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持码农之家。

以上就是本次给大家分享的关于java的全部知识点内容总结,大家还可以在下方相关文章里找到相关文章进一步学习,感谢大家的阅读和支持。

javascript 相关电子书
学习笔记
网友NO.761957

vue组件tabbar使用方法详解

本文实例为大家分享了vue组件tabbar的具体使用方法,供大家参考,具体内容如下 1.App.vue !-- 入口文件 --template div id="app" !-- 视图层 -- router-view/router-view !-- 底部选项卡 -- tabbar @on-index-change="onIndexChange" v-if="tabbarShow" tabbar-item selected link="/home" img slot="icon" src="./assets/img/ic_tab_home_normal.png" img slot="icon-active" src="./assets/img/ic_tab_home_active.png" span slot="label"首页/span /tabbar-item tabbar-item show-dot link="/audioBook" img slot="icon" src="./assets/img/ic_tab_subject_normal.png" img slot="icon-active" src="./assets/img/ic_tab_subject_active.png" span slot="label"书影音/span /tabbar-item tabbar-item badge="2" link="/mine" img slot="icon" src="./assets/img/ic_tab_profile_normal.png" img slot="icon-active" src="./assets/img/ic_tab_profile_active.png" span slot="label"我的/span /tabbar-item /tabbar /div/template script // 引入 vux tabbar 组件 import { Tabbar, TabbarItem } from 'vux' // 引入……

网友NO.109280

微信小程序自定义可滑动顶部TabBar选项卡实现页面切换功能示例

本文实例讲述了微信小程序自定义可滑动顶部TabBar选项卡实现页面切换功能。分享给大家供大家参考,具体如下: 顶部滚动选项卡 话不多说,直接上代码 pages/home/home.wxml scroll-view scroll-x="true" style='width: 100%; white-space:nowrap; '!-- tab --view class="tab"view class="tab-nav" style='font-size:12px'view wx:for="{{tabnav.tabitem}}" bindtap="setTab" data-tabindex="{{index}}" {{item.text}}/viewviewview class="tab-line" /view/view/view/view/scroll-viewswiper current="{{currentTab}}" class="swiper-box" duration="300" bindchange="bindChange"swiper-itemview分类1/view/swiper-itemswiper-itemview分类2/view/swiper-itemswiper-itemview分类3/view/swiper-itemswiper-itemview分类4/view/swiper-itemswiper-itemview分类5/view/swiper-itemswiper-itemview分类6/view/swiper-item/swiper pages/home/home.wxss .tab {display: flex;flex-direction: column;}.tab-nav {border-bottom: 1rpx solid #ddd;width: 100%;height: 80rpx;display: flex;line-hei……

网友NO.192338

微信小程序tabbar底部导航

微信小程序重写tabbar底部导航,供大家参考,具体内容如下 1.app.js代码如下: editTabBar: function() { var e = this.globalData.tabbar, a = getCurrentPages(), t = a[a.length - 1], s = t.__route__; 0 != s.indexOf("/") (s = "/" + s); for (var n in e.list) e.list[n].selected = !1, e.list[n].pagePath == s (e.list[n].selected = !0); t.setData({ tabbar: e }); }, tabBar: { color: "#123", selectedColor: "#1ba9ba", borderStyle: "#1ba9ba", backgroundColor: "#fff", list: [ { pagePath: "/we7/pages/index/index", iconPath: "/we7/resource/icon/home.png", selectedIconPath: "/we7/resource/icon/homeselect.png", text: "首页" }, { pagePath: "/we7/pages/user/index/index", iconPath: "/we7/resource/icon/user.png", selectedIconPath: "/we7/resource/icon/userselect.png", text: "我的" } ] }, globalData: { userInfo: null, tabbar: { color: "#333", selectedColor: "#d0501f", backgroundColor: "#ffffff", borderStyle: "#d5d5d5", list: [ { pagePath: "/pages/seller/gzt", text: "工作台", ico……

<
1
>

Copyright 2018-2020 www.xz577.com 码农之家

版权投诉 / 书籍推广 / 赞助:520161757@qq.com