读心悦

  • 读心随笔
  • 读心里话
  • 计算机
  1. 首页
  2. 小程序
  3. 正文

自定义导航中wx.getSystemInfoSync()的作用

2020年09月10日 188点热度 0人点赞 0条评论

wx.getSystemInfoSync(),获取小程序的系统信息,对于开发者来说这个接口的好处就是能够获取到小程序状态栏的高度。

有时候我们不一定使用小程序默认状态栏的样式,重新定义自己喜欢的样式,这时我们需要设置高度。但是在不同设备中小程序的状态栏高度不同,所以我们需要动态的设置状态栏的高度,动态高度这个变量就是通过wx.getSystemInfoSync()函数获取得到的。

首先要自定义一个导航组件:navigation

navigation.js:

const app = getApp()
Component({
  properties: {
    navbarData: {
      //navbarData   由父页面传递的数据,变量名字自命名
      type: Object,
      value: {},
      observer: function (newVal, oldVal) {}
    }
  },
  data: {
    height: "",
    //默认值  默认显示左上角
    navbarData: {
      showCapsule: 1
    },
    imageWidth: wx.getSystemInfoSync().windowWidth, // 背景图片的高度
    imageHeight: '', // 背景图片的长度,通过计算获取

  },
  attached: function () {
    // 获取是否是通过分享进入的小程序
    this.setData({
      share: app.globalData.share
    })
    // 定义导航栏的高度   方便对齐
    wx.getSystemInfo({
      success: res => {
        console.log(res.statusBarHeight)
        this.setData({
          height: res.statusBarHeight
        })
      }
    })
  },
  methods: {
    // 计算图片高度
    imgLoaded(e) {
      console.log(e)
      this.setData({
        imageHeight: e.detail.height *
          (wx.getSystemInfoSync().windowWidth / e.detail.width)
      })
    }
  },
})

navigation.wxml:

<view class='nav-wrap' style="height:{{height*2+44}}px">
	<!-- 导航栏背景图片 -->
	<image class="backgroundimg" src="http://img4.imgtn.bdimg.com/it/u=25651867,761734299&fm=26&gp=0.jpg" mode="center" bindload="imgLoaded"/>
	<!-- // 导航栏 中间的标题 -->
	<view class='nav-title' style='line-height: {{height*2 + 44}}px; color:#fff;border:1px solid red;'>
		{{navbarData.title}}
	</view>
</view>

navigation.wxss:

/* navbar.wxss */

/* 顶部要固定定位   标题要居中   自定义按钮和标题要和右边微信原生的胶囊上下对齐 */

.nav-wrap {
  position: fixed;
  width: 100%;
  top: 0;
  background-image: linear-gradient(#2f52bc, #9198e5, #d0d9f4);
  color: #000;
  z-index: 9999999;
  overflow: hidden;
  font-size: 20px;
  /* height: 200rpx; */
}

/* 背景图 */

.backgroundimg {
  position: absolute;
  z-index: -1;
  width: 100%;
  height: 100%;
}

/* 标题要居中 */

.nav-title {
  position: absolute;
  text-align: center;
  /* max-width: 400rpx; */
  overflow: hidden;
  white-space: nowrap;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  font-size: 36rpx;
  color: #2c2b2b;
  border: 1px solid red;
}

.nav-capsule {
  display: flex;
  align-items: center;
  margin-left: 30rpx;
  width: 140rpx;
  justify-content: space-between;
  height: 100%;
}

.back-pre {
  width: 32rpx;
  height: 36rpx;
  margin-top: 4rpx;
  padding: 10rpx;
}

.nav-capsule {
  width: 36rpx;
  height: 40rpx;
  margin-top: 3rpx;
}

然后在需要自定义导航的页面中引入组件:

在index.json代码

{
  "usingComponents": {
    "nav-bar": "../Components/navbar/navbar"
  },
  "navigationStyle": "custom"
}

index.wxml:

<nav-bar navbar-data='{{nvabarData}}'></nav-bar>

 

 

赞微海报分享
本作品采用 知识共享署名 4.0 国际许可协议 进行许可
标签: 小程序
最后更新:2020年09月23日

读心悦

自己从事开发也有一段时间了,总有一些迷茫,对未来有一点恐惧,不知道以后会不会继续从事开发的岗位。无论未来做出怎样的选择,这个网站就记录一下从事开发这段时间的一些笔记、阅读笔记吧,好歹也给自己留个纪念吧,你说呢! 写点代码,读点书,读点心,读点自己!

打赏 点赞
< 上一篇
下一篇 >

文章评论

取消回复

读心悦

自己从事开发也有一段时间了,总有一些迷茫,对未来有一点恐惧,不知道以后会不会继续从事开发的岗位。无论未来做出怎样的选择,这个网站就记录一下从事开发这段时间的一些笔记、阅读笔记吧,好歹也给自己留个纪念吧,你说呢! 写点代码,读点书,读点心,读点自己!

标签聚合
随笔 悦读 小程序 react 闲谈 CSS vue hook taro git Nginx redux flutter JavaScript node 阅读 Echarts mysql canvas
推荐文章
  1. 微信小程序中自定义导航和地图定位
  2. 小程序全局和局部自定义导航栏样式
  3. 微信小程序中for循环里的picker,操作某一个picker 如何改变对应选择的值?
  4. taro开发小程序中,使用css伪类实现时间轴
分类
  • flutter (11)
  • html/css (23)
  • Javascript (22)
  • Mysql (2)
  • node (2)
  • React (27)
  • vue (1)
  • 小程序 (41)
  • 悦读 (8)
  • 未分类 (2)
  • 读心里话 (9)

COPYRIGHT © 2020 读心悦

黔ICP备20005501号

黔公网安备52011502001078号