星宿小程序怎么设置顶部分类导航

星宿小程序设置顶部分类导航步骤如下：

1、需要一个外层view，将内层水平的子view包含进来，保证内层view的灵活行，是用遍历tabs数组的形式进行。

2、水平平分导航栏包含一个外层view和多个内层view，内层view是水平排列，外层view需使用css的flex属性，同时内层各个view平分，内层view需要设置flex等于1。

3、在data中定义一个数组tabs，用于存放要展示的导航项，需要使用可滑动导航栏。

自定义导航栏分两种，一种是单独某个页面做一个自定义导航；一种是所有页面的导航栏都是自定义样式

如果是所有页面的导航栏都要自定义，在appjson里找到window样式

"navigationStyle":"custom"

所有页面的就需要先自定义组件了，这里先不做详说，因为我目前项目中只是首页需要自定义导航栏，这里我先详说这个

这样当前页面自带的导航栏就没有了，然后需要你在wxml页面中就可以开始写样式了

<!-- 自定义导航栏 -->

    <view class="navStyle" style="height:{{navHeight}}px">

      <view class="navFix" style="height:{{navHeight}}px;margin-top:{{imgTop}}px;">

          <image src=""></image>

          <view style="margin-top:{{cityTop}}px;">

            全国

            {{cityName}}

          </view>

      </view>

    </view>

// 获取状态栏高度

        const { statusBarHeight } = wxgetSystemInfoSync();

        // 得到右上角菜单的位置尺寸

        const menuButtonObject = wxgetMenuButtonBoundingClientRect();

        consolelog('右上角菜单的尺寸：',menuButtonObject);

        const { top, height } = menuButtonObject;

        // 计算导航栏的高度

        // 此高度基于右上角菜单在导航栏位置垂直居中计算得到

        const navBarHeight = height + (top - statusBarHeight) 2;

        // 计算状态栏与导航栏的总高度

        const statusNavBarHeight = statusBarHeight + navBarHeight;

        thissetData({

            navHeight:statusNavBarHeight,

            imgTop:statusNavBarHeight-45,

            cityTop:statusNavBarHeight-45-25

        })

先看效果

如需要看下一篇文章-- 微信小程序 自定义底部导航闪烁解决 正在加急完成预计明天

⚠️ "tabBar"重点，自定义tabbar也需要写，但是在appjs中隐藏默认的tabbar

⚠️ thisgetSystemInfo() === 获取设备信息，因为iosX系统适配

tabbarwxml

tabbarwxss

cjs

tabbarjson

自定义导航基本可以，下面在页面中引入并使用

footerwxml, headerwxml, mywxml

footerjson, headerjson, myjson

footerjs, headerjs, myjs

以上就是关于星宿小程序怎么设置顶部分类导航全部的内容，包括:星宿小程序怎么设置顶部分类导航、微信小程序-自定义导航栏、微信小程序 自定义底部导航等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！