微信小程序自定义标题栏

2022-09-25 15:27:28 阅读:2 编辑

index.js

import LIM from './../../resource/js/lim'
const app = getApp();
Page({
    data: {
        lim: null,
        user_list: [{
                id: "228",
                nickname: "林观起",
                avatar: "https://thirdwx.qlogo.cn/mmopen/vi_32/DYAIOgq83eoGibxdHel9AAAEloUUUQMEmaSXrpQBY8rpHaYzZjrWkwIQeIXnPs6p3N2tvc9EJU0RMldaMrzd17w/132",
            },
            {
                id: "345",
                nickname: "东远",
                avatar: "https://thirdwx.qlogo.cn/mmopen/vi_32/ajNVdqHZLLCIkiaRwxT08ZMiaQsia1wWLvNFnbF7noYrbuvG4tmw7YW5F0zMdsT2za5Gajstdncz2BjibOeyHPkrqg/132",
            },
            {
                id: "123",
                nickname: "王工",
                avatar: "https://web.sdk.qcloud.com/component/TUIKit/assets/avatar_01.png",
            },
            {
                id: "126",
                nickname: "建林",
                avatar: "https://web.sdk.qcloud.com/component/TUIKit/assets/avatar_02.png",
            },
            {
                id: "148",
                nickname: "许总",
                avatar: "https://web.sdk.qcloud.com/component/TUIKit/assets/avatar_03.png",
            },
            {
                id: "567",
                nickname: "小王",
                avatar: "https://web.sdk.qcloud.com/component/TUIKit/assets/avatar_04.png",
            },
        ],
        current_user_index: -1,
        user: {

        },
        show:false,
        autoLogout:0,
        navH:0,
    },

    onLoad(o) {
        this.setData({
            navH:app.globalData.navHeight
        });
        // 获取手机系统信息
        let that = this;
    wx.getSystemInfo({
        success: res => {
          //导航高度
          let navHeight = res.statusBarHeight + 46;
          this.setData({
            navH:navHeight
        });
        }, fail(err) {
          console.log(err);
        }
      })

    },

});
{
  "navigationBarTitleText": "登陆",
  "navigationStyle": "custom",
  "usingComponents": {
  }
}
<view>
  <view class='nav bg-white' style='height:{{navH}}px'>
    <view class='nav-title'>
      首页
      <image src='/live/resource/images/lim2/back.png' mode='aspectFit' class='back' bindtap='navBack'></image> 
      <image src='/live/resource/images/lim2/more.png' mode='aspectFit' class='back2' bindtap='navBack'></image> 
    </view>
  </view>
  <scroll-view class='bg-gray overflow' style='height:calc(100vh - {{navH}}px)' scroll-y >
    <view class='hidden'>
      <!-- 正文 -->
    </view>
  </scroll-view>
</view>
.nav{
   width: 100%;
   overflow: hidden;
   position: relative;
   top: 0;
   left: 0;
   z-index: 10;
 }
 .nav-title{
   width: 100%;
   height: 45px;
   line-height: 45px;
   text-align: center;
   position: absolute;
   bottom: 0;
   left: 0;
   z-index: 10;
   font-family:PingFang-SC-Medium;
   font-size:36rpx;
   letter-spacing:2px;
 }
 .nav .back{
   width: 22px;
   height: 22px;
   position: absolute;
   bottom: 0;
   left: 0;
   padding: 10px 15px;
 }
 .nav .back2{
  width: 22px;
  height: 22px;
  position: absolute;
  bottom: 0;
  right: 200rpx;
  padding: 10px 15px;
}
 .bg-white{
   background-color: #ffffff;
 }
 .bg-gray{
   background-color: #f7f7f7;
 }
 .overflow{
   overflow: auto;
 }
 .hidden{
   overflow: hidden;
 }

https://github.com/luyimei/mina-pull-down-refresh https://www.jianshu.com/p/5753a0e1754f