1回答

樱桃小胖子

2021-08-08

已采纳

同学你好，要实现标题“慕课”字体加粗，需要改成自定义标题，这里老师帮你写一个例子，你可以参考一下，但初学时期不建议使用自定义标题哦！避免出现一些不必要的bug导致无法继续学习😀，示例如下：

①index.wxml

<!-- 自定义的导航栏 -->
  <view class="custom flex_center" style="padding-top:{{statusBarHeight}}px">
   <p>慕课</p>
  </view>
  <view class="empty_custom" style="padding-top:{{statusBarHeight}}px">
 </view>
<view class="header">
  <input type="text" class="header-input" placeholder="AngularJS·MySQL·Java" placeholder-class="header-input-placeholder" bindinput="handleInputChange" />
  <icon type="search" class="header-input-icon" size="13" wx:if="{{showIcon}}" />
</view>

②index.wxss

.header {
  position: relative;
}
.header-input {
  line-height: 72rpx;
  padding: 0 36rpx;
  margin: 22rpx 36rpx 14rpx 36rpx;
  border: 1rpx solid #D9DDE1;
  border-radius: 36rpx;
  text-align: center;
  font-size: 26rpx;
}
.header-input-placeholder {
  color: rgba(133,133,133,0.60);
}
.header-input-icon {
  position: absolute;
  left: 50%;
  top: 14rpx;
  transform: translateX(-184rpx);
  color: rgba(133,133,133,0.60);
}
/* 自定义导航栏开始 */
.custom{
  position: fixed;
  width: 100%;
  top: 0;
  left: 0;
  height: 45px;
  z-index: 999;
  text-align: center;
  color:#000;
}
.custom p{
  width: 100%;
  display: block;
  line-height: 45px;
  color: #000;
  font-size: 35rpx;
  font-weight:bold;
  max-width: 280rpx;
  position: relative;
  top: 5px;
  left:30%;
}
/* 占位符 */
.empty_custom{
  height: 50px;
  width: 100%;
}

③index.json

{
  "usingComponents": {},
  "backgroundTextStyle": "light",
  "navigationBarBackgroundColor": "#fff",
  "navigationBarTextStyle": "black"
}

④app.json

"window": {
    "navigationStyle": "custom"
},

⑤app.js

App({
    globalData:{
    // 头部的自定义高度
    statusBarHeight: wx.getSystemInfoSync()['statusBarHeight'],
  }
})

⑥index.js

Page({
  data: {
    statusBarHeight: 1,
  },
  onLoad() {
    this.setData({
      statusBarHeight:getApp().globalData.statusBarHeight
    })
  }
})

希望可以帮到你，祝学习愉快！

0