本文目录：
- 1.小程序如何动态的改变数组的值
- 2.修改微信小程序原生组件的样式
- 3.自定义navigationBar顶部导航栏
- 4.小程序顶部导航栏全面屏适配问题解决方法
1.小程序如何动态的改变数组的值
argueArray:[{flag:false},{flag:false},{flag:false},{flag:false},{flag:false}]
checkboxChoosed(e) {
let ind = e.currentTarget.dataset.ind
let temp = 'argueArray[' + ind + '].flag'
this.setData({
[temp]: !this.data.argueArray[e.currentTarget.dataset.ind].flag
});
},
2.修改微信小程序原生组件的样式
修改微信小程序原生组件的样式，需要直接命中组件里面的class
如：
<checkbox value="{{item.value}}" checked="{{item.checked}}" />
修改代码示例：
checkbox .wx-checkbox-input {
width: 28rpx;
height: 28rpx;
padding: 0;
border-radius: 50%;
}
checkbox .wx-checkbox-input.wx-checkbox-input-checked {
width: 28rpx;
height: 28rpx;
border-radius: 50%;
border-color: #09bb07;
background-color: #09bb07;
}
checkbox .wx-checkbox-input.wx-checkbox-input-checked::before {
color: white;
font-size: 30rpx;
}
3.自定义navigationBar顶部导航栏
思路
- 隐藏原生样式
- 获取胶囊按钮、状态栏相关数据以供后续计算
- 根据不同机型计算出该机型的导航栏高度，进行适配
- 编写新的导航栏
- 引用到页面
隐藏原生样式
app.json文件中window全局配置里有个参数：navigationStyle（导航栏样式），default=默认样式，custom=自定义样式。
"window": {
"navigationStyle": "custom"
}
获取相关参数
app.js
App({
onLaunch: function () {
// 数据都是根据当前机型进行计算，这样的方式兼容大部分机器
this.globalData = {
navBarHeight: 0, // 导航栏高度
menuRight: 0, // 胶囊距右方间距（方保持左、右间距一致）
menuBotton: 0, // 胶囊距底部间距（保持底部间距一致）
menuHeight: 0, // 胶囊高度（自定义内容可与胶囊高度保证一致）
}
// 获取系统信息
const systemInfo = wx.getSystemInfoSync();
// 胶囊按钮位置信息
const menuButtonInfo = wx.getMenuButtonBoundingClientRect();
// 导航栏高度 = 状态栏到胶囊的间距（胶囊距上距离-状态栏高度） * 2 + 胶囊高度 + 状态栏高度
this.globalData.navBarHeight = (menuButtonInfo.top - systemInfo.statusBarHeight) * 2 + menuButtonInfo.height + systemInfo.statusBarHeight;
this.globalData.menuRight = systemInfo.screenWidth - menuButtonInfo.right;
this.globalData.menuBotton = menuButtonInfo.top - systemInfo.statusBarHeight;
this.globalData.menuHeight = menuButtonInfo.height;
},
})
下面为组件代码： /components/navigation-bar/navigation-bar.wxml
<!-- 自定义顶部栏 -->
<view class="nav-bar" style="height:{{navBarHeight}}px;">
<input class="search" placeholder="输入关键词！" style="height:{{menuHeight}}px; min-height:{{menuHeight}}px; line-height:{menuHeight}}px; left:{{menuRight}}px; bottom:{{menuBotton}}px;"></input>
</view>
<!--
内容区域：
自定义顶部栏用的fixed定位，会遮盖到下面内容，设置好间距,标签内不要放任何内容
-->
<view class="content" style="margin-top:{{navBarHeight}}px;"></view>
/components/navigation-bar/navigation-bar.json
{
"component": true
}
/components/navigation-bar/navigation-bar.js
// 获取全局变量
const app = getApp()
Component({
/*组件的属性列表*/
properties: {
// defaultData（父页面传递的数据-就是引用组件的页面）
defaultData: {
type: Object,
value: {
title: "我是默认标题"
},
observer: function (newVal, oldVal) {}
}
},
/*组件的初始数据*/
data: {
navBarHeight: app.globalData.navBarHeight,
menuRight: app.globalData.menuRight,
menuBotton: app.globalData.menuBotton,
menuHeight: app.globalData.menuHeight,
}
})
/components/navigation-bar/navigation-bar.wxss
.nav-bar {
position: fixed;
width: 100%;
top: 0;
color: #fff;
background: #fff;
}
.nav-bar .search {
width: 60%;
color: #333;
font-size: 14px;
background: #fff;
position: absolute;
border-radius: 50px;
background: #ddd;
padding-left: 14px;
}
以下是调用页面的代码，也就是引用组件的页面： /pages/index/index.wxml
navigation-bar default-data="{{defaultData}}"></navigation-bar>
/pages/index/index.json
{
"usingComponents": {
"navigation-bar": "/components/navigation-bar/navigation-bar"
}
}
/pages/index/index.js
const app = getApp();
Page({
data: {
// 组件参数设置，传递到组件
defaultData: {
title: "我的主页", // 导航栏标题
}
}
})
上面的设置是全局的设置，如果想要单页面自定义导航栏，在单页面的json文件加入"navigationStyle":"default"代码就可以实现。
4.小程序顶部导航栏全面屏适配问题解决方法
在手机web中通常会用一个导航栏固定在页面顶部，比如下面这种结构：
<view class="navigation-bar">
<view>xxx</view>
<view>yyy</view>
<view>zzz</view>
</view>
<view class="main-body"></view>
将navigation-bar添加样式
position: fixed;
left: 0;
top: 0;
right: 0;
z-index: 999;
这种布局在iphonex手机出来之前是没什么问题的，但是在全面屏和刘海屏手机下，会导致main-body的部分内容被navigation-bar遮挡，原因是全面屏和刘海屏顶部的状态栏的高度会导致navigation-bar会顶上去，如图所示的区域：
示意图.png
被覆盖了：
image.png
所以在进入navigation-bar布局的时候，需要加上一个nav-bar-placeholder，同时将导航栏的内容写在navigation-bar-inner中进行fixed，调整后的结构如下：
<view class="navigation-bar">
<view class="navigation-bar-placeholder"></view>
<view class="navigation-bar-inner">
<view>xxx</view>
<view>yyy</view>
<view>zzz</view>
</view>
</view>
<view class="main-body"></view>
同时定义ios和statusBarHeight两个变量，并借助wx.getSystemInfo接口进行赋值，小程序页面右上方的分享和关闭按钮，也可以动态计算出来其宽度，从而方便我们更好的对导航栏进行布局
const isSupport = !!wx.getMenuButtonBoundingClientRect;
const rect = wx.getMenuButtonBoundingClientRect ? wx.getMenuButtonBoundingClientRect() : null;
wx.getSystemInfo({
success: res => {
const ios = !!(res.system.toLowerCase().search('ios') + 1);
this.setData({
innerWidth: isSupport ? `width:${rect.left}px` : '',
ios,
statusBarHeight: res.statusBarHeight,
innerPaddingRight: isSupport ? `padding-right:${res.windowWidth - rect.left}px` : ''
});
}
});
动态改变元素的样式
<view class="navigation-bar">
<view class="navigation-bar-placeholder {{ios ? 'ios' : 'android'}}" style="padding-top: {{statusBarHeight}}px;visibility: hidden;"></view>
<view class="navigation-bar-inner {{ios ? 'ios' : 'android'}}" style="padding-top: {{statusBarHeight}}px; color: {{color}};background: {{background}};{{innerPaddingRight}};{{innerWidth}};">
<view>xxx</view>
<view>yyy</view>
<view>zzz</view>
</view>
</view>
<view class="main-body"></view>
注意：navigation-bar-placeholder的高度要设置成和navigation-bar-inner的高度一样
网友评论