微信小程序-自定义导航栏

微信小程序-自定义导航栏,第1张

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

如果是所有页面的导航栏都要自定义,在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

        })

你好,请问你是想问微信小程序用户隐私授权的定义是什么?微信小程序用户隐私授权的定义是指自然人享有的私人生活安宁与私人信息秘密依法受到保护,不被他人非法侵扰、知悉、收集、利用和公开的一种人格权,主要指“公民在网上享有的私人生活安宁与私人信息依法受到保护,不被他人非法侵犯、知悉、搜集、复制、公开和利用的一种人格权;也指禁止在微信小程序泄露某些与个人有关的敏感信息,包括事实、图像以及毁损的意见。

vant 很多组件带自定义样式custom-class,方便使用者修改或者扩展。

本文以vant-cell修改背景色为例,说明自定义属性的使用。

xml引入vant-cell

原始效果如下图

xml申明custom-class属性

wxss实现具体的样式

效果如下图,背景色样式已经被修改了,

以上就是关于微信小程序-自定义导航栏全部的内容,包括:微信小程序-自定义导航栏、微信小程序用户隐私授权的定义、微信小程序之vant组件自定义样式(外部样式)等相关内容解答,如果想了解更多相关内容,可以关注我们,你们的支持是我们更新的动力!

欢迎分享,转载请注明来源:内存溢出

原文地址: https://outofmemory.cn/zz/9314554.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-04-27
下一篇 2023-04-27

发表评论

登录后才能评论

评论列表(0条)

保存