微信小程序项目小点一
一. 微信小程序自定义导航栏
在微信小程序中，自定义导航栏的颜色 可以在app.json的window里面添加navigationBarBackgroundColor属性。
但是颜色只能为十六进制颜色码，不能使用rgb，或者rgba.。
为了满足更多用户的需求，微信官方给出了一个navigationStyle属性。
官方文档：navigationStyle 导航栏样式，仅支持 default/custom。custom 模式可自定义导航栏，只保留右上角胶囊状的按钮)。
1. 在app.json window 增加 navigationStyle:custom ，所有页面的顶部导航栏就会消失，保留右上角胶囊状的按钮。当然如果只想使一个页面的导航栏消失，只需要在这个页面对应的 .json 文件中进行配置 "navigationStyle": "custom" 即可。
另外，胶囊体颜色能否改变呢？ 胶囊体目前只支持黑色和白色两种颜色 在app.josn window 或者对应的某一个页面的 .json 文件配置中加上 "navigationBarTextStyle":"white/black"。
2. 如何适配不同机型？
使用 wx.getSystemInfoSync()['statusBarHeight'] 则能获取到顶部状态栏的高度，单位为px.
在app.js里面
App({
globalData: {
statusBarHeight:wx.getSystemInfoSync()['statusBarHeight']
}
})3. 在你需要自定义导航栏的 .wxml 页面也出自定义导航栏的结构：
WXML 自定义顶部状态栏div结构
<view class="custom flex_center" style="padding-top:{{statusBarHeight}}px">
<view class="colse">
<image src="../../images/colse.png"></image>
</view>
<view class="app-file">提交申请</view>
</view>
<view class="empty_custom" style="padding-top:{{statusBarHeight}}px"></view>4. app.css 全局css中设置样式：
/* 自定义导航 */
.custom{
position: fixed;
width: 100%;
top: 0;
left: 0;
height: 45px;
background: #2B3541;
z-index: 999;
display: flex;
align-items: center;
}
.custom .colse image{
width: 40rpx;
height: 40rpx;
}
.custom .colse{
display: flex;
align-items: center;
justify-content: center;
border-right: 2px solid #fff;
box-sizing: border-box;
padding: 5rpx 25rpx;
margin-right: 25rpx;
}
.custom .app-file{
color: #fff;
font-size: 34rpx;
font-weight: 500;
}
.empty_custom{
height: 45px;
width: 100%;
}5. 在index.js 或 对应页面的 .js 文件中取出statusBarHeight值：
const app = getApp();
Page({
data:{
statusBarHeight: app.globalData.statusBarHeight
}
})最后的导航栏效果如下图：
参考博客：https://blog.csdn.net/weixin_39872588/article/details/80500164
二. 微信小程序点击切换样式
1. 给选定的标志 {{}} & data-num
<view class='oil_s' catchtap='changeOil'>
<view class='{{num==1?"active":""}}' data-num='1'>92#汽油</view>
<view class='{{num==2?"active":""}}' data-num='2'>95#汽油</view>
<view class='{{num==3?"active":""}}' data-num='3'>0#汽油</view>
</view>或者给每一个里边的view绑定,如下：
<view class='oil_s' >
<view class='{{num==1?"active":""}}' data-num='1' catchtap='changeOil'>92#汽油</view>
<view class='{{num==2?"active":""}}' data-num='2' catchtap='changeOil'>95#汽油</view>
<view class='{{num==3?"active":""}}' data-num='3' catchtap='changeOil'>0#汽油</view>
</view>唯一的区别是给事件传入的 e 不同。
绑定在外面的块的事件的e ,只有 target才会有dataset的值。
绑定给每一个小块的事件的e ,不管是 target还是currentTarget都会有dataset的值。
2. 写好初始值
一开始选定哪一个，就给判断的那个变量哪个值
data: {
num:1
},3. 写好事件处理函数
changeOil:function(e){
console.log(e);
this.setData({
num:e.target.dataset.num
})
}总结：
1.通过修改类名 <view class="{{className}}"></view>
2.添加一个类名，覆盖前面的样式 <view class="helplist {{cur}}"></view>
3.修改行内样式，覆盖前面的样式 <view class="helplist" style="{{currentStyle}}"></view>
第二种方式就是今天写的这种方式，第三种方式最好不要使用，毕竟我们要做一个性能佳的小程序。
参考博客：https://blog.csdn.net/weixin_33951761/article/details/86991828