小程序自定义头部标题栏并且自适应各种手机屏幕(滚动头部渐隐渐现)

1.直接上图,话不多说:

这边做的是滚动之后, 头部渐隐渐现

 滚动之后=>

 苹果7的效果=>

 

 2.代码部分:

index.json  ("navigationStyle": "custom" 设置这个去掉默认标题栏,  哪个页面需要, 就在那个页面json加)

{
  "navigationStyle": "custom",
  "usingComponents": {}
}

index.wxml

<view>
  <!-- 自定义头部 -->
  <view id='barTitle' style="opacity:{{opacityStyle}};height:{{navH}}px;" hidden='{{hiddenModel}}'>   
    <text>{{batTitle}}</text>
  </view>
  <view class='demo1'>滑动1</view>
  <view class='demo2'>滑动2</view>
  <view class='demo2'>滑动3</view>
</view>

index.wxss

.demo1,.demo2{
  height: 500px;
  background: #ccc
}
.demo2{
  background: #f2f2f2
}

#barTitle{
  position: fixed;
   100%;
  top: 0;
  left: 0;
  background: red;
  color: green;
  text-align: center;
  font-weight: bold
}

#barTitle>text{
  position: absolute;
  left: 0;
  right: 0;
  bottom: 20rpx
}

index.js

// pages/home/home/home.js
var app = getApp();    //在app.js中获取wx.getSystemInfo自定义头部高度

Page({

  /**
   * 页面的初始数据
   */
  data: {
    scrollTop: 0,  //滚动距离
    hiddenModel: true, //显示影藏
    opacityStyle: 0,   //透明度
    navH: 0,  // 声明一个变量
    batTitle:'自定义小程序标题栏'  //头部标题
  },
  //监听屏幕滚动 判断上下滚动  
  onPageScroll: function (ev) {
    var _this = this;
    if (ev.scrollTop > 10) {
      let opacity = ev.scrollTop / 140
      console.log(opacity)
      opacity = opacity > 1 ? 1 : opacity
      _this.setData({
        hiddenModel: false,
        opacityStyle: opacity
      })
    } else {
      _this.setData({
        hiddenModel: true
      })
    }
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    var that = this;
    that.setData({
      navH: app.globalData.navHeight // 给刚刚声明的变量附上全局获取的nav高度
    })
  },
})

app.js  (红色部分, 其他代码是检测微信版本的, 当福利送给你们)

//app.js
App({
  onLaunch: function () {
    // 检查微信版本,及时更新
    this.checkUpdateVersion()

    // 自定义头部高度
    wx.getSystemInfo({
      success: res => {
        this.globalData.navHeight = res.statusBarHeight + 46; // 赋值导航高度
      }, fail(err) {
        console.log(err);
      }
    })

  checkUpdateVersion() {
    //判断微信版本是否 兼容小程序更新机制API的使用
    if (wx.canIUse('getUpdateManager')) {
      //创建 UpdateManager 实例
      const updateManager = wx.getUpdateManager();
      console.log('是否进入模拟更新');
      //检测版本更新
      updateManager.onCheckForUpdate(function (res) {
        console.log('是否获取版本');
        // 请求完新版本信息的回调
        if (res.hasUpdate) {
          //监听小程序有版本更新事件
          updateManager.onUpdateReady(function () {
            //TODO 新的版本已经下载好，调用 applyUpdate 应用新版本并重启 （ 此处进行了自动更新操作）
            updateManager.applyUpdate();
          })
          updateManager.onUpdateFailed(function () {
            // 新版本下载失败
            wx.showModal({
              title: '已经有新版本喽~',
              content: '请您删除当前小程序，到微信 “发现-小程序” 页，重新搜索打开哦~',
            })
          })
        }
      })
    } else {
      //TODO 此时微信版本太低（一般而言版本都是支持的）
      wx.showModal({
        title: '溫馨提示',
        content: '当前微信版本过低，无法使用该功能，请升级到最新微信版本后重试。'
      })
    }
  },
  globalData: {
    navHeight: 0, // 声明一个全局变量用于记录小程序头部的高度
    userInfo: null
  }
})

有问题留言我哦, peace&love

更多类似参考链接:https://blog.csdn.net/hellenYuan/article/details/105944925

　　　　　　　　　　https://www.baidu.com/