澳门博彩官网

 更新时间:2019年03月15日 10:28:47   作者:小白   我要评论

这篇文章主要介绍了小程序自定义单页面、全局导航栏的实现代码,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

需求

产品说小程序返回到首页不太方便,想添加返回首页按钮,UI说导航栏能不能设置背景图片,因为那样设计挺好看的。

需求分析并制定方案

这产品和UI都提需求了,咱也不能反驳哈,所以开始调研,分析可行性方案;1、可以添加悬浮按钮。2、自定义导航栏。
添加悬浮按钮,是看起来是比较简单哈,但是感觉不太优雅,会占据页面的空间,体验也不太好。所以想了下第二种方案,自定义导航栏既可以实现产品的需求还可以满足UI的设计美感,在顶部空白处加上返回首页的按钮,这样和返回按钮还对称(最终如图所示,顶部导航栏是个背景图片,分两块组合起来)。

实现方案

一、实现的前提

1、首先查看文档,看文档里关于自定义导航栏是怎么规定的,有哪些限制;还有小程序自定义导航栏全局配置和单页面配置的微信版本和调试库的最低支持版本。

2、在app.json window 增加 navigationStyle:custom ,顶部导航栏就会消失,只保留右上角胶囊状的按钮,如何修改胶囊的颜色呢;胶囊体目前只支持黑色和白色两种颜色 在app.josn window 加上 "navigationBarTextStyle":"white/black"

3、还要考虑加返回按钮和返回首页的按钮,适配不同的机型

先说下两种配置方法:

①全局配置navigationStyle:

调试基础库>=1.9.0

微信客户端>=6.6.0

app.json

{
 "usingComponents": {
  "navigationBar": "/components/navigationBar/navigationBar"
 },
 "window": {
  "navigationStyle": "custom"
 } 
}

②单页面配置navigationStyle

调试基础库>=2.4.3

微信客户端版本>=7.0.0

自定义的页面.json

{
 "window": {
  "navigationStyle": "default"
 } 
}
{
 "navigationStyle": "custom",
 "usingComponents": {
  "navigationBar": "/components/navigationBar/navigationBar"
 }
}
两者的区别就是,全局配置放在app.json文件里,单页面配置放在自定义页面配置文件里。

二、实现的步骤

以下说下几个要点:

1、自定义导航栏文本,是否显示返回,是否显示返回首页,导航栏高度

2、statusBarHeight,用来获取手机状态栏的高度,这个需要在全局app.js中的onLaunch,调用wx.getSystemInfo获取,navigationBarHeight+默认的高度,这个是设定整个导航栏的高度,

3、还有注意的,在写样式距离和大小时建议都用px,因小程序右边的胶囊也是用的px,不是rpx。

4、因为自定义导航栏每个页面都要写,所以把导航栏封装了公共组件,这样只需要在每个页面引入即可。

如下是封装的导航栏组件:

wxml

<view class="navbar" style="{{'height: ' + navigationBarHeight}}">
 <view style="{{'height: ' + statusBarHeight}}"></view>
 <view class='title-container'>
  <view class='capsule' wx:if="{{ back || home }}">
   <view bindtap='back' wx:if="{{back}}">
    <image src='http://www.jb51.net/images/back.png'></image>     
   </view>
   <view bindtap='backHome' wx:if="{{home}}">
    <image src='http://www.jb51.net/images/home.png'></image>
   </view>
  </view>
  <view class='title'>{{text}}</view>
 </view>
</view>
<view style="{{'height: ' + navigationBarHeight}};background: white;"></view>
这里有个需注意的问题,就是一般会出现自定义导航栏,下拉页面,导航栏也随着会下拉,这种问题是因为设置fixed后页面元素整体上移了navigationBarHeight,所以在此组件里设置一个空白view元素占用最上面的navigationBarHeight这块高度

wxss

.navbar {
 width: 100%;
 background-color: #1797eb;
 position: fixed;
 top: 0;
 left: 0;
 z-index: 999;
}
.title-container {
 height: 40px;
 display: flex;
 align-items: center;
 position: relative;
}
.capsule {
 margin-left: 10px;
 height: 30px;
 background: rgba(255, 255, 255, 0.6);
 border: 1px solid #fff;
 border-radius: 16px;
 display: flex;
 align-items: center;
}
.capsule > view {
 width: 45px;
 height: 60%;
 position: relative;
.capsule > view:nth-child(2) {
 border-left: 1px solid #fff; 
}
.capsule image {
 width: 50%;
 height: 100%;
 position: absolute;
 left: 50%;
 top: 50%;
 transform: translate(-50%,-50%);
}
.title {
 color: white;
 position: absolute;
 top: 6px;
 left: 104px;
 right: 104px;
 height: 30px;
 line-height: 30px;
 font-size: 14px;
 text-align: center;
 overflow: hidden;
 text-overflow: ellipsis;
 white-space: nowrap;
}

js

const app = getApp()
Component({
 properties: {
  text: {
   type: String,
   value: 'Wechat'
  },
  back: {
   type: Boolean,
   value: false
  },
  home: {
   type: Boolean,
   value: false
  }
 },
 data: {
  statusBarHeight: app.globalData.statusBarHeight + 'px',
  navigationBarHeight: (app.globalData.statusBarHeight + 44) + 'px'
 },
 methods: {
  backHome: function () {
   let pages = getCurrentPages()
   wx.navigateBack({
    delta: pages.length
   })
  },
  back: function () {
   wx.navigateBack({
    delta: 1
   })
  }
 }
})

json

{
 "component": true,
 "usingComponents": {}
}
最终还需要考虑下版本兼容的问题,毕竟还有一些用户,微信版本并没有更新到最新版本。

首先可以在app.js里面获取下当前用户的微信版本,做下版本比较,如果小于这个版本,设置个全局变量,也可以在组件写个方法,在不同的页面打开显示不同的顶部导航栏,或者可以控制是否显示导航栏,这里就不详细说了。

亲自试了下,在低于7.0版本的微信中,如果采用单页面自定义导航栏,会出现两个导航栏,这时候通过判断版本号不要再渲染自定义的导航栏组件了,在页面的配置文件里写上title名,还有相应的背景色,这样就会显示自带的导航栏了。

总结

小程序开发是有些坑的地方,从不支持自定义导航栏,到支持全局自定义导航栏,再到现在的支持单页面配置,可以看出在慢慢完善。还有底部tabbar,可自己选择配置的太少了,虽然也支持自定义,但是发现自定义写的底部导航组件体验并不好,每次打开页面都会重新渲染底部的按钮,如果全部写成在一个页面里的tab切换,虽然按钮每次不用重新加载了,但是业务多肯定不行,写到一个单页面里东西也太多了。 希望微信能够多添加或放开一些功能,让开发者更好的服务于产品,给用户更好的体验。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

相关文章

  • javascript作用域链(Scope Chain)用法实例解析

    javascript作用域链(Scope Chain)用法实例解析

    这篇文章主要介绍了javascript作用域链(Scope Chain)用法,结合实例形式较为详细的分析了javascript作用域链(Scope Chain)的概念、功能与相关使用技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-11-11
  • js实现时间显示几天前、几小时前或者几分钟前的方法集锦

    js实现时间显示几天前、几小时前或者几分钟前的方法集锦

    这篇文章主要介绍了js实现时间显示几天前、几小时前或者几分钟前的方法,实例汇总分析了时间显示格式转换的常用思路与技巧,需要的朋友可以参考下
    2015-05-05
  • PassWord输入框代码分享

    PassWord输入框代码分享

    这篇文章主要介绍了PassWord输入框的代码,代码简单易懂,非常实用,具有参考借鉴价值,需要的朋友可以参考下
    2016-06-06
  • 调试Javascript代码(浏览器F12及VS中debugger关键字)

    调试Javascript代码(浏览器F12及VS中debugger关键字)

    目前,常用的浏览器IE、Chrome、Firefox都有相应的脚本调试功能下面我就介绍如何在浏览器/VS中调试我们的JS代码,感兴趣的你可不要走开啊,希望本文对你有所帮助
    2013-01-01
  • Bootstrap入门书籍之(零)Bootstrap简介

    Bootstrap入门书籍之(零)Bootstrap简介

    Bootstrap是一个用于快速开发 Web 应用程序和网站的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的。本文给大家介绍Bootstrap入门书籍之(零)Bootstrap简介,需要的朋友参考下
    2016-02-02
  • 原生JS实现小小的音乐播放器

    原生JS实现小小的音乐播放器

    这篇文章主要为大家详细介绍了原生JS实现音乐播放器,支持循环、随机播放,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-10-10
  • 微信小程序实现多选功能

    微信小程序实现多选功能

    这篇文章主要为大家详细介绍了微信小程序实现多选功能,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2018-11-11
  • javascript循环变量注册dom事件 之强大的闭包

    javascript循环变量注册dom事件 之强大的闭包

    是在循环过程过this被改变,注册过的事件也被随之改变,找到了一种解决方法
    2010-09-09
  • HTML5实现微信拍摄上传照片功能

    HTML5实现微信拍摄上传照片功能

    这篇文章主要介绍了HTML5实现微信拍摄上传照片功能,实现HTML5 Canvas手机拍摄,本地压缩上传图片时遇到问题的解决方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-04-04
  • JS中的hasOwnProperty()和isPrototypeOf()属性实例详解

    JS中的hasOwnProperty()和isPrototypeOf()属性实例详解

    hasOwnProperty()和isPrototypeOf()这两个属性都是Object.prototype所提供:Object.prototype.hasOwnProperty()和Object.prototype.isPropertyOf(),下面给大家介绍这两个属性的方法和使用,一起看下吧
    2016-08-08

最新评论