位置: IT常识 - 正文

小程序怎么自定义导航栏,导航栏放图片、设置高度(小程序怎么自定义tabbar)

编辑:rootadmin
小程序怎么自定义导航栏,导航栏放图片、设置高度

推荐整理分享小程序怎么自定义导航栏,导航栏放图片、设置高度(小程序怎么自定义tabbar),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:小程序怎么自定义商家,小程序怎么自定义取景框,小程序怎么自定义商品,小程序怎么自定义查询条件,小程序怎么自定义图标,小程序怎么自定义抽奖次数,小程序怎么自定义tabbar,小程序怎么自定义取景框,内容如对您有帮助,希望把文章链接给更多的朋友!

今天来说一下小程序的自定义导航栏。

1、设置导航栏style为custom:

2、这是刷新页面,页面的内容就跑到了页面的顶端,不留丝毫间隙:

小程序怎么自定义导航栏,导航栏放图片、设置高度(小程序怎么自定义tabbar)

3、然后定义一个components,就是我们自定义的导航栏组件: (1)先在项目根目录创建一个components文件夹,这个文件夹的名称是固定的,就是components: (2)文件夹内创建一个导航栏组件的文件夹: (3)右击创建的“nav”文件夹,点击“新建Component”,会自动在该文件夹下生成四个我们常用的文件: (4)下面是代码时间(后端开发写的前端代码,将就看吧): nav.js:

# data中增加barHeight参数data: { barHeight: wx.getSystemInfoSync().statusBarHeight},

nav.wxml:

<view style="padding-top:{{barHeight + 40}}rpx; padding-bottom: 50rpx;"> <view class="topView" bindtap="jumpToAbout"> <image class="topImage" src="/images/logo.png" mode="aspectFill"></image> <text class="topText">自定义导航栏</text> <image class="topIcon" src="/images/right.png"></image> </view> <text class="topSubText">副标题可以写在这里</text></view>

nav.wxss:

.topView { display: flex;}.topImage { height: 60rpx; width: 130rpx;}.topText { margin-left: 12rpx; font-size: larger;}.topIcon { height: 40rpx; width: 40rpx; margin-top: 8rpx;}.topSubText { color: #999;}

4、导航栏组件就定义好了,然后把它引入页面: (1)要引入的页面json配置文件中引用:

{ "usingComponents": { "nav":"../../components/nav/nav" }}

必须用相对路径。 (2)页面中引入组件:

<nav></nav><text>内容</text>

5、最后看效果:

这样就搞定了,希望你们的logo比我的好看。

本文链接地址:https://www.jiuchutong.com/zhishi/288006.html 转载请保留说明!

上一篇:最贵的照片是什么(最贵的十张照片)

下一篇:springboot:各种下载文件的方式(springboot常用)

  • apple watch省电模式怎么关(apple watch 省电)

    apple watch省电模式怎么关(apple watch 省电)

  • 淘宝怎么绑定支付宝(淘宝怎么绑定支付宝账户)

    淘宝怎么绑定支付宝(淘宝怎么绑定支付宝账户)

  • mos是什么(mos是什么控制型器件)

    mos是什么(mos是什么控制型器件)

  • 小米手机各种型号对比(小米手机各种型号价格表)

    小米手机各种型号对比(小米手机各种型号价格表)

  • 勿扰模式会显示忙线吗(勿扰模式会显示消息吗)

    勿扰模式会显示忙线吗(勿扰模式会显示消息吗)

  • 小米新机mix4发布时间(小米mix4发热严重官方回应)

    小米新机mix4发布时间(小米mix4发热严重官方回应)

  • qq收消息延迟怎么办(qq消息延迟收到)

    qq收消息延迟怎么办(qq消息延迟收到)

  • pdf文件是什么意思(pdf文件是指什么)

    pdf文件是什么意思(pdf文件是指什么)

  • 苹果数据线长度(苹果数据线长度都一样吗)

    苹果数据线长度(苹果数据线长度都一样吗)

  • ios不支持此配件怎么办(ios不支持此配件是什么意思)

    ios不支持此配件怎么办(ios不支持此配件是什么意思)

  • 图片怎么保存到微信表情(图片怎么保存到qq相册)

    图片怎么保存到微信表情(图片怎么保存到qq相册)

  • 如何通过qq音乐查qq号(如何通过QQ音乐设置铃声)

    如何通过qq音乐查qq号(如何通过QQ音乐设置铃声)

  • 夏新蓝牙耳机怎么只有一个耳机能播放(夏新蓝牙耳机怎么样)

    夏新蓝牙耳机怎么只有一个耳机能播放(夏新蓝牙耳机怎么样)

  • 快手一天播放了200多正常吗(快手一天几十个播放量)

    快手一天播放了200多正常吗(快手一天几十个播放量)

  • vivoy71和y71a手机壳一样吗(vivoy71和y71a手机壳能通用吗)

    vivoy71和y71a手机壳一样吗(vivoy71和y71a手机壳能通用吗)

  • 抖音怎么解除限流(抖音怎么解除限制购买)

    抖音怎么解除限流(抖音怎么解除限制购买)

  • 怎样隐藏手机桌面的图标(怎样隐藏手机桌面的游戏)

    怎样隐藏手机桌面的图标(怎样隐藏手机桌面的游戏)

  • 华为电脑linux系统怎么下载软件(华为电脑 linux)

    华为电脑linux系统怎么下载软件(华为电脑 linux)

  • 苹果xr怎么剪切视频(苹果xr怎么剪切照片)

    苹果xr怎么剪切视频(苹果xr怎么剪切照片)

  • t480和t480s区别(t480 480s区别)

    t480和t480s区别(t480 480s区别)

  • 丶符号怎么打(符号都怎么打)

    丶符号怎么打(符号都怎么打)

  • 陌陌停车游戏在哪打开(陌陌停车游戏在哪里找)

    陌陌停车游戏在哪打开(陌陌停车游戏在哪里找)

  • DCSHelper.exe是什么进程 DCSHelper.exe程序进程介绍(dcs是什么文件夹可以删除吗)

    DCSHelper.exe是什么进程 DCSHelper.exe程序进程介绍(dcs是什么文件夹可以删除吗)

  • 电脑开机显示屏显示无信号黑屏解决方法(电脑开机显示屏显示无信号黑屏怎么办)

    电脑开机显示屏显示无信号黑屏解决方法(电脑开机显示屏显示无信号黑屏怎么办)

  • Windows批处理实现邮件远程控制电脑(第三方批处理)(window批处理文件)

    Windows批处理实现邮件远程控制电脑(第三方批处理)(window批处理文件)

  • 金税盘入账的会计分录
  • 购房发票契税票丢了可以补吗
  • 固定资产入账怎么做账
  • 应付账款不需要函证
  • 发票红冲需要做账吗
  • 销售费用可以提取现金吗
  • 医疗设备的折旧年限是多少年
  • 网上认证勾选平台登录不成功
  • 利润表盈利结构分析
  • 房地产企业成本包括哪些
  • 营改增税负分析测算明细表一般由谁填写
  • 出口退税自查中的“四自三不见”是指什么
  • 异地经营如何纳税
  • 应付账款少记违反什么认定
  • 雇主责任险为什么不能立即生效
  • 企业临时账户是什么意思
  • 生产企业商贸企业
  • 工业企业财务核算方法
  • 企业工会经费不足,可以向企业拨款吗
  • 农产品流通环节税收优惠政策
  • 税务手工发票还能用吗2019
  • 建设单位增值税抵扣
  • 吊车租赁费可以开现代服务吗
  • 简易计税 增值税专用发票
  • 91开头的税号是什么
  • 代购本无罪,逃避关税须处罚
  • 企业所得税投资收益纳税调整
  • 非金融类企业的货币资金主要包括哪些内容?
  • 原材料生产产生的费用
  • 公司外币账户怎么登录
  • 月末库存商品怎么记账
  • uniapp异常处理
  • 可作为税前扣除的项目有
  • vue3.0解决跨域
  • 固定资产入账流程图
  • 进货后退货的会计处理
  • 旧设备换新设备会计分录
  • return 重定向
  • 电子客票行程单怎么获取
  • 认证系统维护费怎么算
  • 基本户发工资的规定
  • 车辆购置税属于地方税吗
  • 利息调整摊销额计入投资收益吗
  • 企业向合伙企业分红怎么交税
  • 织梦cms怎么样
  • 借方贷方有哪些
  • 所得税费用可以计入税金及附加吗
  • sqlserver分页查询越到最后越慢
  • mysql性能问题
  • 库存商品入库的会计分录怎么写
  • 合同负债 案例
  • 房屋租赁税按什么收
  • 结汇是把外币换成人民币吗
  • 年底应交增值税是没有余额吗
  • 报销管理规定
  • 外购的货物发生下列用途时,不能抵扣进项税额的是
  • 拆借 拆放
  • 首先我们先了解一下作者英语怎么说呢
  • 农民工工资专户销户流程
  • 数据库中多表连接的方式
  • win10电脑系统配置
  • win10 0×0000007b怎么解决
  • windows 2003 iis+php5+mysql+phpmyadmin 详细安装配置
  • win10怎么安装运行库
  • linux修改服务器ip地址
  • win8怎么卸载应用程序
  • 武汉做无创要预约吗
  • win10未检测到任何网络硬件
  • ercp后淀粉酶为什么升高
  • 骨骼动画原理
  • spiral框架
  • js window.open如何带参数
  • 安卓手机管家是什么
  • javascript获取值
  • jQuery Ajax和getJSON获取后台普通json数据和层级json数据用法分析
  • android混淆后怎么破解
  • 怎么在移动官网上复机
  • 云南省个人所得税税率
  • 10月份税务申报
  • 货物税费
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设