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

网友投稿 307 2023-11-08

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

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

以下代码保存在github地址

先看一看目录

template文件夹里存放tabbar模板。

template/template.wxml

?
1
2
3
4
5
6
7
8
9
10
11
12
<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

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
.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

到此改组件完成，然后讲解一下使用方法。

我们先把样式载入到app.wxss
?
1
@import "/template/template.wxss";

在index文件夹

index.wxml

?
1
2
<import src="../../template/template.wxml"/>
<template is="tabBar" data="{{tabBar:bindData.tabBar}}"/>

index.js

?
1
2
3
4
5
6
7
8
9
10
const app = getApp()
var template = require(../../template/template.js);
Page({
data: {
},
onLoad: function () {
template.tabbar("tabBar", 0, this)//0表示第一个tabbar
},
})

news.wxml与index.wxml一样

news.js如下
?
1
2
3
4
5
6
7
8
9
10
const app = getApp()
var template = require(../../template/template.js);
Page({
data: { },
onLoad: function () {
template.tabbar("tabBar", 1, this)//1表示第二个tabbar
},
})

效果如图

您可能感兴趣的文章:微信小程序官方动态自定义底部tabBar的例子微信小程序自定义tabBar在uni-app的适配详解如何自定义微信小程序tabbar上边框的颜色微信小程序开发之自定义tabBar的实现微信小程序自定义tabBar的步骤记录微信小程序自定义tabBar的踩坑实践记录微信小程序自定义tabbar组件关于微信小程序自定义tabbar问题详析微信小程序开发自定义tabBar实战案例(定制消息99+小红心)

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。

标签：程序 微信小程序 小程序 代码
上一篇:小程序与饿了么、美团的区别？
下一篇:微信小程序开发摇一摇功能
相关文章

 发表评论

暂时没有评论，来抢沙发吧~