Chinaunix首页 | 论坛 | 博客
  • 博客访问: 565428
  • 博文数量: 208
  • 博客积分: 0
  • 博客等级: 民兵
  • 技术积分: 2052
  • 用 户 组: 普通用户
  • 注册时间: 2014-11-19 21:54
文章分类

全部博文(208)

文章存档

2019年(18)

2018年(27)

2017年(5)

2016年(53)

2015年(88)

2014年(17)

分类: 其他平台

2019-05-08 09:15:44

app.json=>window 属性   navigationStyle: "custom" 自定义导航条(胶囊导航除外)/默认值 defalut,该属性可放倒全局,也可以放到局部某一page 的json里面
app.js:

点击(此处)折叠或打开

  1. const vm = this
  2.     wx.getSystemInfo({
  3.       success: function (res) {
  4.         console.log("获取的机型", res, res.model)
  5.         let totalTopHeight = 68
  6.         if (res.model.indexOf('iPhone X') !== -1) {
  7.           totalTopHeight = 88
  8.         } else if (res.model.indexOf('iPhone') !== -1) {
  9.           totalTopHeight = 64
  10.         }
  11.         vm.globalData.statusBarHeight = res.statusBarHeight
  12.         vm.globalData.titleBarHeight = totalTopHeight - res.statusBarHeight
  13.       },
  14.       failure() {
  15.         vm.globalData.statusBarHeight = 0
  16.         vm.globalData.titleBarHeight = 0
  17.       }
  18.     })

自定义组件

点击(此处)折叠或打开

  1. <view class="navigate-container">
  2.   <view style="height:{{statusBarHeight}}px"></view>
  3.   <view class="navigate-bar" style="height:{{titleBarHeight}}px">
  4.     <view class="navigate-icon">
  5.       <navigator class="navigator-back" open-type="navigateBack" wx:if="{{!isShowHome}}" />
  6.       <navigator class="navigator-home" open-type="switchTab" url="/pages/index/index" wx:else />
  7.     </view>
  8.     <view class="navigate-title">{{title}}</view>
  9.     <view class="navigate-icon"></view>
  10.   </view>
  11. </view>
  12. <view class="navigate-line" style="height: {{statusBarHeight + titleBarHeight}}px; width: 100%;"></view>

点击(此处)折叠或打开

  1. .navigate-container {
  2.   position: fixed;
  3.   top: 0;
  4.   width: 100%;
  5.   z-index: 9999;
  6.   background: pink;

  7. }
  8.  
  9. .navigate-bar {
  10.   width: 100%;
  11.   display: flex;
  12.   justify-content: space-around;
  13.   align-items: center;
  14. }
  15.  
  16. .navigate-icon {
  17.   width: 100rpx;
  18.   height: 100rpx;
  19.   display: flex;
  20.   justify-content: space-around;
  21. }
  22.  
  23. .navigate-title {
  24.   width: 550rpx;
  25.   text-align: center;
  26.   /* line-height: 100rpx; */
  27.   font-size: 34rpx;
  28.   color: #3c3c3c;
  29.   font-weight: bold;
  30.   text-overflow: ellipsis;
  31.   overflow: hidden;
  32.   white-space: nowrap;
  33. }
  34.  
  35. /*箭头部分*/
  36. .navigator-back {
  37.   width: 36rpx;
  38.   height: 36rpx;
  39.   align-self: center;
  40. }
  41.  
  42. .navigator-back:after {
  43.   content: '';
  44.   display: block;
  45.   width: 22rpx;
  46.   height: 22rpx;
  47.   border-right: 4rpx solid #000;
  48.   border-top: 4rpx solid #000;
  49.   transform: rotate(225deg);
  50. }
  51.  
  52. .navigator-home {
  53.   width: 56rpx;
  54.   height: 56rpx;
  55.   background: url(https://qiniu-image.qtshe.com/20190301home.png) no-repeat center center;
  56.   background-size: 100% 100%;
  57.   align-self: center;
  58. }

点击(此处)折叠或打开

  1. var app = getApp()
  2. Component({
  3.   data: {
  4.     statusBarHeight: '',
  5.     titleBarHeight: '',
  6.     isShowHome: false
  7.   },
  8.   properties: {
  9.     //属性值可以在组件使用时指定
  10.     title: {
  11.       type: String,
  12.       value: '新的标题'
  13.     }
  14.   },
  15.   pageLifetimes: {
  16.     // 组件所在页面的生命周期函数
  17.     show() {
  18.       let pageContext = getCurrentPages()
  19.       if (pageContext.length > 1) {
  20.         this.setData({
  21.           isShowHome: false
  22.         })
  23.       } else {
  24.         this.setData({
  25.           isShowHome: true
  26.         })
  27.       }
  28.     }
  29.   },
  30.   attached() {
  31.     this.setData({
  32.       statusBarHeight: app.globalData.statusBarHeight,
  33.       titleBarHeight: app.globalData.titleBarHeight
  34.     })
  35.   },
  36.   methods: {}
  37. })

页面引入

点击(此处)折叠或打开

  1. <nav-bar title="新的标题" />

json

点击(此处)折叠或打开

  1. {
  2.   "navigationStyle": "custom",
  3.   "usingComponents": {
  4.     "nav-bar": "/pages/components/nav-bar/nav-bar"
  5.   }
  6. }
正常进入的状态下

分享进来的状态





阅读(986) | 评论(0) | 转发(0) |
0

上一篇:小程序图片压缩

下一篇:时间表选择

给主人留下些什么吧!~~
评论热议
请登录后评论。

登录 注册