欢迎您访问南京安优网络官方网站,本公司专注于:网站制作、小程序开发、网站推广。 24小时服务热线:400-8793-956
当前位置:南京网站制作公司 > 资讯中心 > 网站知识
南京小程序开发是如何自定义微信小程序导航栏
来源:南京网站制作 时间:2019-05-25 08:51:32

本文中的示例共享W微信小程序的自定义导航栏供您参考。详情如下所示。

 
导航栏可以直接在微信小程序中配置:

目前在南京小程序开发看来只有两种支持,但我们的要求可能需要另外一种颜色等等,所以我们必须修改这一种。
 
 
"window":{
 "navigationStyle": "custom"
},
我配置了这个属性。现在让我们来看看我的界面。

红色箭头指向自动生成的配置。我不写任何代码。例如,我需要自定义更多用户界面导航栏。在more.js中,我在onLoad()方法中获取全局存储导航栏的高度,然后将高度设置为组件。
 
app.js:
 
/**
 * When the widget initialization is complete, onLaunch is triggered (global trigger only once)
 */
 onLaunch: function () {
 wx.getSystemInfo({
  success: res => {
  // Navigation altitude
 
  this.globalData.navHeight = res.statusBarHeight+46;
  this.navH = res.statusBarHeight;
  this.platform = res.platform;
  }
 })
 },
This. globalData. navHeight is a variable defined in app. js:
 
 globalData: {
 isPlayMusic :false,
 doubanBase: "http://t.yushu.im",
 navHeight:0
 },
然后进入更多。JS
 
 
 onLoad: function (options) {
 this.setData({
  navH: App.globalData.navHeight
 })
 },
要获取全局变量,请使用:
 
 
var App = getApp();
获取全局对象。setData({})是更新数据中定义的变量:{}
 
 
 data: {
 navH:0
 },
默认值为0
 
more.wxml:
 
<view>
 <view class='more_main' style='height:{{navH}}px'>
 <view class='title_contanier'>
 <text>More </text>
 </view>
 </view>
</view>
 more.wxss
 
 
.more_title{
 margin:0 auto;
 margin-top: 75rpx;
 text-align:center;
 font-size: 32rpx;
 }
.title_contanier{
 display: flex;
 flex-direction: row;
}
.more_main{
 width: 100%;
 background-color: greenyellow;
}
设计草图:

以上就是今天南京小程序开发说的全部内容。我希望它对每个人的学习都有所帮助,我希望你能更多地支持南京小程序开发安优网络。

本文地址:http://www.ccdiya.com/web/2511.html
Tag:
专业服务:南京网站制作,南京网站制作公司,南京网站建设公司
联系电话:025-65016872
上一篇: 承包和建筑行业网站 - 需要关注的重点
下一篇: 返回列表
最新案例
泰杰赛
泰杰赛
苏派教育
苏派教育
全国大学生公共卫生大赛
全国大学生公共卫生大赛
南京德普筒仓建安工程宏图棋牌官网
南京德普筒仓建安工程宏图棋牌官网
中国非金属材料南京矿山工程宏图棋牌官网
中国非金属材料南京矿山工程宏图棋牌官网
你可能感兴趣
如何为您的非营利组织创建更好的用户调查
4种方式内部链接构建SEO和转换潜在客户
如何在多个地点发展本地搜索引擎优化
6个白帽连锁建立B2B战略
4个用于网站性能的Google Analytics KPI
您需要WordPress CMS网站的7个理由
每个移动电子商务商店需要的功能
您的电子商务商店是否需要自定义WordPress开发?
最后更新
南京小程序开发是如何自定义微信小程序导航栏 承包和建筑行业网站 - 需要关注的重点 南京小程序开发公司阐述Microsoft小部件提交表单操作示例 如何快速构建域权限 南京小程序开发公司解析微信小程序中滑动切换自定义页码的方法 南京网站制作为什么说滚动劫持会破坏用户体验 南京小程序开发公司分享微信applet日历效果 南京小程序开发公司是如何通过微信小程序实现的复选框效果
服务项目
南京网站制作 营销型网站 微信营销 IDC网站 精品案例
河北快3走势图 189彩票官网 宏图棋牌官网 2m彩票官网 满堂彩充值 159彩票 彩70充值 河北快3 桔子彩票官网 江苏快3