微信小程序可以调整顶部标题栏颜色吗

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了微信小程序可以调整顶部标题栏颜色吗相关的知识,希望对你有一定的参考价值。

    不可以的,这个是腾讯内部设置好的。

    是官方的规范统一的规定。

参考技术A 可以调整,按自己的想法调整就可以。
在分页面的josn中配置。
例如:

"window":
"navigationBarBackgroundColor": "#ffffff",
"navigationBarTextStyle": "black",
"navigationBarTitleText": "测试",
"backgroundColor": "#eeeeee",
"backgroundTextStyle": "light"

参考技术B

可以调整,在app.json中写


"window": 
"navigationBarBackgroundColor": "#9E9E9E",
"navigationBarTextStyle": "black"

微信小程序--仿京东UI样式顶部导航栏

我们先来看看京东的效果

技术分享
 

 

分析
上端导航栏可以放置多个分类,可滑动
点击导航栏最右端按钮可以查看所有分类,同时背景模糊
内容部分右拉跳转到另外的分类
点击分类时导航栏的滑动部分自动滑动到合适的位置

我的实现

技术分享
 

 

代码展示:

js

 /**

 * categoryView.js - 分类页面

 */

var fakeData = require(‘../../common/fakeData.js‘)

Page(

 {

 data: {

 categories: [‘全部‘],

 currentTab: 0,

 scrollLeftValue: 0,

 isPickerShow: false,

 isBgNeed: false,

 commodities: []

 },

 navbarTap: function (e) {

 //将顶部导航栏自动移动到合适的位置

 var idx = e.currentTarget.dataset.idx;

 this.autoScrollTopNav(idx);

 //自动收回

 if (this.data.isPickerShow) {

 this.navbarBtnClick();

 }

 this.setData({

 currentTab: idx

 })

 },

 /**

 * 导航栏右侧箭头按钮点击事件 - 切换模糊背景开闭状态以及展开栏开闭状态

 */

 navbarBtnClick: function(e) {

 this.data.isBgNeed = !this.data.isPickerShow

 this.setData({

 isBgNeed: this.data.isBgNeed

 })

 this.data.isPickerShow = !this.data.isPickerShow

 this.setData({

 isPickerShow: this.data.isPickerShow,

 })

 },

 /**

 * 页面左右滑动事件 - 构造滑动动画,若当前页面无数据,自动加载,需要完善加载函数

 */

 swiperChange: function (e) {

 var idx = e.detail.current;

 this.autoScrollTopNav(idx);

 this.setData({

 currentTab: e.detail.current,

 })

 //若无数据,自动加载

 if (this.data.commodities[idx].length == 0) {

 this.downloadMoreItem();

 }

 },

 /**

 * 上拉刷新

 */

 updateItem: function(e) {

 var idx = this.data.currentTab;

 this.data.commodities[idx] = [];

 this.downloadMoreItem();

 },

 /**

 * 下载更多数据 - 涉及后台拉取数据,需完善

 */

 downloadMoreItem: function(e) {

 var idx = this.data.currentTab;

 var commodities = this.data.commodities;

 //获取更多数据

 commodities[idx] = commodities[idx].concat(

 fakeData.requestForItemsOfType(commodities[idx].length, 10, this.data.categories[idx])

 );

 this.setData({

 commodities: this.data.commodities

 })

 console.log(this.data.commodities);

 },

 /**

 * 用于自动调整顶部类别滑动栏滑动距离,使滑动到用户可接受的合适位置,但自适应上还未考虑太周到

 * @param {number} idx - The index of currentTap.

 */

 autoScrollTopNav: function (idx) {

 if (idx <= 2) {

 this.data.scrollLeftValue = 0;

 } else {

 this.data.scrollLeftValue = (idx - 2) * 60;

 }

 this.setData({

 scrollLeftValue: this.data.scrollLeftValue

 })

 },

 /**

 * 模糊背景点击事件 - 点击模糊背景取消选择

 */

 bgTap: function(e) {

 if (this.data.isPickerShow) {

 this.navbarBtnClick();

 } else {

 return;

 }

 },

 /**

 * 商品点击事件 - 待完善

 */

 itemTap: function(e) {

 console.log("you selsct type " + this.data.currentTab + " item " + e.currentTarget.dataset.idx);

 },

 /**

 * 生命周期函数--监听页面加载,在加载的时候抓取数据

 */

 onLoad: function (options) {

 //首先获取类别项

 this.data.categories = fakeData.requestForCategories();

 this.setData({

 categories: this.data.categories

 })

 //然后默认请求 全部 分类

 for (var i in this.data.categories) {

 this.data.commodities.push([]);

 }

 this.data.commodities[0] = fakeData.requestForItemsOfType(0, 10);

 console.log(this.data.commodities);

 this.setData({

 commodities: this.data.commodities

 })

 }

})

json

{

 "navigationBarTitleText": "商城"

}

wxml

<!--categoryView.wxml-->

<import src="../../common/wxmlTemplate.wxml" />

<!--顶部分类导航条--> 

<view class="">

 <view class="navbar">

 <view class="nav-1"> 

 <scroll-view scroll-x="true" class="nav-1-left" scroll-left="{{scrollLeftValue}}" wx:if="{{!isPickerShow}}">

 <view wx:for="{{categories}}" data-idx="{{index}}" class="item {{currentTab==index ? ‘active‘ : ‘‘}}" 

 wx:key="unique" bindtap="navbarTap">{{item}}</view>

 </scroll-view>

 <view class="nav-1-left" wx:if="{{isPickerShow}}">

 <view class="item left2Font">{{categories[currentTab]}}</view>

 </view> 

 <!-- <view class="blankblock"></view> -->

 <button class="navbarBtn" bindtap="navbarBtnClick">

 <image src="../../resources/返回.png" class="navbarBtn icon {{isPickerShow ? ‘active‘ : ‘‘}}"></image>

 </button> 

 </view>

 <view class="picker" wx:if="{{isPickerShow}}">

 <view class="spitLine"></view>

 <view class="picker-contain">

 <view wx:for="{{categories}}" data-idx="{{index}}" class="item {{currentTab==index ? ‘active‘ : ‘‘}}" 

 wx:key="unique" bindtap="navbarTap">{{item}}</view>

 </view>

 </view>

 </view>

 <swiper class="itemContainer" bindchange="swiperChange" current="{{currentTab}}">

 <block wx:for="{{categories}}" wx:for-item="cItem" wx:key="unique">

 <swiper-item>

 <scroll-view scroll-y="true" bindscrolltolower="downloadMoreItem" bindscrolltoupper="updateItem">

 <view class="child" bindtap="itemTap" wx:for="{{commodities[currentTab]}}" 

 data-idx="{{index}}" wx:key="unique" wx:if="{{item.category == cItem || cItem == ‘全部‘}}">

 <template is="itemInfoTemplate" data="{{item}}"/>

 </view>

 </scroll-view>

 </swiper-item>

 </block>

 </swiper>

 <!-- 透明遮盖层 -->

 <view class="picker-contain-bg {{isPickerShow? ‘show‘ : ‘‘}}" wx:if="{{isBgNeed}}" bindtap="bgTap"></view>

</view>

wxss

@import "../../common/flexGridStyle.wxss";

@import "../../common/itemShowStyle.wxss";

page { 

 display: flex; 

 flex-direction: column; 

 height: 100%; 

} 

.navbar {

 position: fixed;

 z-index: 2;

 background-color: RGB(247, 247, 247);

 width: 100%

}

.nav-1{ 

 flex: none; 

 display: flex; 

 background: #fff; 

 background-color: RGB(247, 247, 247);

 height: 80rpx;

}

.nav-1 .wrapBar {

 display: flex;

}

.nav-1 .item{ 

 position: relative; 

 text-align: center; 

 font-size: 30rpx;

 line-height: 80rpx; 

 color: gray;

 display: inline-block;

 padding-left: 20rpx;

 padding-right: 20rpx;

} 

.nav-1 .item.active{ 

 color: black;

} 

.nav-1 .item.active:after{ 

 content: ""; 

 display: block; 

 position: absolute; 

 bottom: 0; 

 left: 0; 

 right: 0; 

 height: 4rpx; 

 background: black; 

} 

button {

 background: transparent;

}

button::after {

 border: 0;

}

.navbarBtn {

 flex: 0 0 15%;

}

.navbarBtn.icon {

 transform: rotate(90deg);

 width: 20rpx;

 height: 40rpx;

}

.navbarBtn.icon.active{

 transform: rotate(-90deg);

}

.blankblock {

 flex: 0 0 10%;

}

.nav-1-left {

 white-space: nowrap;

 overflow: hidden;

 flex: 0 0 85%;

}

.picker {

}

.item.left2Font {

 color: black;

}

.spitLine {

 margin: 0;

 height: 2rpx;

 background-color: gray;

}

.picker-contain {

 display: flex;

 flex-wrap: wrap;

 justify-content: center;

}

.picker-contain-bg {

 position: fixed;

 background-color: black;

 transition: all 1s;

 width: 100%;

 height: 100%;

 z-index: 1;

 top: 0;

 opacity: 0

}

.picker-contain-bg.show {

 opacity: 0.5;

}

.picker-contain .item {

 background-color: RGB(215, 215, 215);

 border-radius:20px;

 margin: 20rpx;

 padding: 50rpx;

 padding-top: 10rpx;

 padding-bottom: 10rpx;

 font-size: 30rpx;

 color: RGB(161, 161, 161);

}

.picker-contain .item.active{ 

 color: black;

 background-color: RGB(153, 153, 153);

} 

swiper-item scroll-view {

 display: inline;

}

swiper.itemContainer{

 margin-top: 80rpx;

 height: 1136rpx;

}


作者:极乐叔
链接:http://www.jianshu.com/p/03796e8c4504
來源:简书
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。













以上是关于微信小程序可以调整顶部标题栏颜色吗的主要内容,如果未能解决你的问题,请参考以下文章

【微信小程序】自定义顶部导航栏

微信小程序顶部(navigationBar)设置为透明

微信小程序的顶部手机状态栏怎么做成下面的那种效果,全屏显示?

微信小程序开发,导航栏右边的按钮怎么设置?

微信小程序 跳转页面 就没有底部导航栏 怎么办?

微信小程序制作顶部导航栏