微信小程序自定义tabBar组件开发详解

 更新时间:2018-11-06 15:00:43   作者:佚名   我要评论(0)

本文实例为大家分享了微信小程序自定义tabBar组件的具体代码,供大家参考,具体内容如下
以下代码保存在github地址
先看一看目录

template文件夹里存放tabb

本文实例为大家分享了微信小程序自定义tabBar组件的具体代码,供大家参考,具体内容如下

以下代码保存在github地址

先看一看目录

 

template文件夹里存放tabbar模板。
template/template.wxml

<template name="tabBar">
<view class="tabBar">
 <block wx:for="{{tabBar}}" wx:for-item="item" wx:key="tabBar">
 <view class="tabBar-item">
  <navigator open-type="redirect" url="{{item.pagePath}}">
  <view><image class="icon" src='{{item.iconPath}}'></image></view>
  <view class="{{item.current== 1 ? 'tabBartext' :''}}">{{item.text}}</view>
  </navigator> 
 </view>
 </block>
</view>
</template>

template.css

.icon{
 width:54rpx;
 height: 54rpx;
}
.tabBar{
 width:100%;
 position: fixed;
 bottom:0;
 padding:10rpx;
 margin-left:-4rpx;
 background:#F7F7FA;
 font-size:20rpx;
 color:#8A8A8A;
 box-shadow: 6rpx 6rpx 6rpx 6rpx #aaa;
}

 .tabBar-item{
 float:left;
 width:25%;
 text-align: center;
 overflow: hidden;
}
/*当前字体颜色*/
.tabBartext{
 color:red;
}

template.js

//初始化数据
function tabbarinit() {
 return [
  { "current":0,
  "pagePath": "/pages/index/index",
  "iconPath": "/imgs/home.png",
  "selectedIconPath": "/imgs/home_on.png",
  "text": "主页"
  },
  {
  "current": 0,
  "pagePath": "/pages/news/news",
  "iconPath": "/imgs/message.png",
  "selectedIconPath": "/imgs/message_on.png",
  "text": "资讯"

  },
  {
  "current": 0,
  "pagePath": "/pages/category/category",
  "iconPath": "/imgs/category.png",
  "selectedIconPath": "/imgs/category_on.png",
  "text": "分类"
  },
  {
  "current": 0,
  "pagePath": "/pages/buy/buy",
  "iconPath": "/imgs/buy.png",
  "selectedIconPath": "/imgs/buy_on.png",
  "text": "购物"
  }
 ]

}
//tabbar 主入口
function tabbarmain(bindName = "tabdata", id, target) {
 var that = target;
 var bindData = {};
 var otabbar = tabbarinit();
 otabbar[id]['iconPath'] = otabbar[id]['selectedIconPath']//换当前的icon
 otabbar[id]['current'] = 1;
 bindData[bindName] = otabbar
 that.setData({ bindData });
}

module.exports = {
 tabbar: tabbarmain
}

到此改组件完成,然后讲解一下使用方法。
我们先把样式载入到app.wxss

@import "/template/template.wxss";

在index文件夹

index.wxml

<import src="http://files.jb51.net/file_images/article/201811/2018116143939095.jpg?2018106143953" />

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

您可能感兴趣的文章:

  • 微信小程序tabbar底部导航
  • 微信小程序开发之tabbar图标和颜色的实现
  • 微信小程序开发之自定义tabBar的实现
  • 微信小程序踩坑记录之解决tabBar.list[3].selectedIconPath大小超过40kb
  • 微信小程序tabBar用法实例详解
  • 微信小程序tabBar模板用法实例分析【附demo源码下载】
  • 微信小程序tabBar底部导航中文注解api详解
  • 微信小程序 新建登录页并实现tabBar隐藏
  • 微信小程序tabbar不显示解决办法
  • 微信小程序开发之选项卡(窗口底部TabBar)页面切换
  • 微信小程序开发之Tabbar实例详解
  • 微信小程序开发之实现选项卡(窗口顶部TabBar)页面切换
  • 微信小程序 (三)tabBar底部导航详细介绍

相关文章

  • 微信小程序自定义tabBar组件开发详解

    微信小程序自定义tabBar组件开发详解

    本文实例为大家分享了微信小程序自定义tabBar组件的具体代码,供大家参考,具体内容如下 以下代码保存在github地址 先看一看目录 template文件夹里存放tabb
    2018-11-06
  • 易语言截取当前窗口图片功能

    易语言截取当前窗口图片功能

    快照命令 英文命令:GetWinPic 操作系统支持:Windows 所属类别:系统处理 为高级用户提供,初级用户无需掌握; 捕获指定窗口或屏幕上所有现有显示内容,返回
    2018-11-06
  • 利用JavaScript缓存远程窃取Wi-Fi密码的思路详解

    利用JavaScript缓存远程窃取Wi-Fi密码的思路详解

    我一直想在这个小项目上花一些时间做一些研究,但是由于生活所迫让我总是一直繁忙。现在我终于可以抽出一些时间了继续研究这种攻击技术了,我将在本文中阐
    2018-11-05
  • windows10系统安装mysql-8.0.13(zip安装) 的教程详解

    windows10系统安装mysql-8.0.13(zip安装) 的教程详解

    安装环境说明 &#8226;系统版本:windows10 &#8226;mysql版本:mysql-8.0.13-winx64.zip &#8226;下载地址:http://mirrors.163.com/mysql/Downloads/MySQL
    2018-11-05
  • 易语言获取当前是几月份的方法

    易语言获取当前是几月份的方法

    这个功能要用到以下几个命令: 到时间命令 取现行时间命令 取月份命令 例程 说明 首先将编辑框中输入的时间转换成日期时间型的数据,然后用“取月份
    2018-11-05
  • Centos7 安装mysql 8.0.13(rpm)的教程详解

    Centos7 安装mysql 8.0.13(rpm)的教程详解

    yum or rpm? yum安装方式很方便,但是下载mysql的时候从官网下载,速度较慢。 rpm安装方式可以从国内镜像下载mysql的rpm包,比较快。rpm也适合离线安装。 环
    2018-11-05
  • c#和java base64不一致的解决方法

    c#和java base64不一致的解决方法

    本文主要介绍了关于c#和java base64不一致的解决方法,分享出来供大家参考学习,下面话不多说了,来一起看看详细的介绍吧 不一致的问题不是编码的问题 而是j
    2018-11-05
  • 易语言将十进制数值转换为八进制文本的方法

    易语言将十进制数值转换为八进制文本的方法

    取八进制文本命令 英文命令:oct 操作系统支持:Windows、Linux 所属类别:数值转换 返回一个文本,代表指定数值的八进制形式。 语法: 文本型 取八进制
    2018-11-05
  • 易语言将指定数据类型转换为字节集类型

    易语言将指定数据类型转换为字节集类型

    到字节集命令 英文命令:ToBin 操作系统支持:Windows、Linux 所属类别:字节集操作 将指定数据转换为字节集后返回转换结果。 语法: 字节集 到字节集
    2018-11-05
  • 手把手教你如何使用nodejs编写cli命令行

    手把手教你如何使用nodejs编写cli命令行

    前端日常开发中,会遇见各种各样的cli,比如一行命令帮你打包的webpack,一行命令帮你生成vue项目模板的vue-cli,还有创建react项目的create-react-app等等等
    2018-11-05

最新评论