微信小程序自定义顶部以及底部tabbar

最新推荐文章于 2025-06-11 13:11:18 发布

weixin_43493217

最新推荐文章于 2025-06-11 13:11:18 发布

阅读量3.3k

点赞数

CC 4.0 BY-SA版权

分类专栏：微信小程序文章标签：自定义顶部自定义底部自定义tabbar

本文链接：https://blog.youkuaiyun.com/weixin_43493217/article/details/88756745

本文介绍如何在微信小程序中创建自定义的顶部和底部Tabbar。通过建立模板，绘制WXML结构，编写WXSS样式，定义app.js中的参数和方法，以及在各页面中引入并接收数据，完成自定义组件。然而，存在一个问题：在下拉刷新时，顶部也会随之下拉加载，期待解决方案。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.首先建立一个模板，在里边模板的wxml里绘制公共的顶部以及底部
代码如下：

<!--pages/template/template.wxml-->
<template name="top">
<!-- 顶部 -->
   <view style="padding-top:{
  
  {topcontent.statusBarHeight+topcontent.titleBarHeight}}px;">
  <view class="hh-header" style='background-color:{
  
  {topcontent.background}};color:{
  
  {topcontent.color}};'>
    <view class="status-bar" style="height:{
  
  {topcontent.statusBarHeight}}px"></view>
    <view class="title-bar" style="height:{
  
  {topcontent.titleBarHeight}}px">
      <view wx:if="{
  
  {topcontent.isShowBack}}" class='hh-nav-back ico-back' bindtap='goback'></view>
      <view wx:if="{
  
  {!topcontent.isShowBack}}" class='hh-nav-back'></view>
      <view class="hh-title">{
  
  {topcontent.name}}</view>
      <view class="hh-nav-right"></view>
    </view>
  </view>
</view>
</template>
<!-- 底部 -->
<template name="tabbar">
    <view class="tabbar_box" style="background-color:{
  
  {tabbar.backgroundColor}}; border-top-color:{
  
  {tabbar.borderStyle}}; {
  
  {tabbar.position == 'top' ? 'top:0' : 'bottom:0'}}">
        <block wx:for="{
  
  {tabbar.list}}" wx:for-item="item" wx:key="index">
            <view class="tabbar_nav" style="width:{
  
  {1/tabbar.list.length*100}}%; " bindtap='switchTab' data-url='{
  
  {item.pagePath}}'>
                <image class="tabbar_icon" src="{
  
  {item.selected ? item.selectedIconPath : item.iconPath}}"></image>
                <text style="color:{
  
  {item.selected ? tabbar.selectedColor : tabbar.color}}">{
  
  {item.text}}</text>
            </view>
        </block>
    </view>
</template>

2.然后在模板的wxss里样式

 /* pages/template/template.wxss */
.tabbar_box{
    display: flex;
    flex-direction: row;
    justify-content: space-around;

最低0.47元/天解锁文章

200万优质内容无限畅学