温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

微信小程序中怎么自定义tabBar组件

发布时间:2021-06-16 16:44:07 阅读:170 作者:Leah 栏目:web开发
开发者测试专用服务器限时活动,0元免费领,库存有限,领完即止! 点击查看>>

本篇文章给大家分享的是有关微信小程序中怎么自定义tabBar组件,小编觉得挺实用的,因此分享给大家学习,希望大家阅读完这篇文章后可以有所收获,话不多说,跟着小编一起来看看吧。

目录

 微信小程序中怎么自定义tabBar组件

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;
 height54rpx;
}
.tabBar{
 width:100%;
 position: fixed;
 bottom:0;
 padding:10rpx;
 margin-left:-4rpx;
 background:#F7F7FA;
 font-size:20rpx;
 color:#8A8A8A;
 box-shadow6rpx 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="../../template/template.wxml"/>
<template is="tabBar" data="{{tabBar:bindData.tabBar}}"/>

index.js

const app = getApp()
var template = require('../../template/template.js');
Page({
 data: {

 },
 onLoadfunction () {
 template.tabbar("tabBar"0this)//0表示第一个tabbar
 },
})

news.wxml与index.wxml一样
news.js如下

const app = getApp()
var template = require('../../template/template.js');
Page({
 data: { },

 onLoadfunction () {
 template.tabbar("tabBar"1this)//1表示第二个tabbar
 },

})

以上就是微信小程序中怎么自定义tabBar组件,小编相信有部分知识点可能是我们日常工作会见到或用到的。希望你能通过这篇文章学到更多知识。更多详情敬请关注亿速云行业资讯频道。

亿速云「云服务器」,即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘,价格低至29元/月。点击查看>>

向AI问一下细节

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

AI

开发者交流群×