美文网首页
小程序自定义顶部适配机型

小程序自定义顶部适配机型

作者: MarkName | 来源:发表于2019-09-26 09:29 被阅读0次

    记录一下 应该能适配所有机型了吧, 忘记哪个机型还有2像素的偏差了. 看着也不明显.  不想查了. 

    app.js

    ```

    /**

    * 当小程序初始化完成时,会触发 onLaunch(全局只触发一次)

      */

      onLaunch: function (options) {

        var that = this;

        var systemHeight = wx.getSystemInfoSync().statusBarHeight

        var data = wx.getMenuButtonBoundingClientRect();

        that.globalData.systemHeight = systemHeight;

        that.globalData.height = (data.top - systemHeight) * 2 + data.height;

        //that.globalData.height = (data.top - systemHeight) * 2 + data.height + 2;            //加个两像素吧

      },

      globalData:{

           height:"",

           systemHeight:""

      },

    ```

    小程序自定义顶部适配机型

    index.js

    ```

    /**

      * 生命周期函数--监听页面加载

      */

      onLoad: function (options) {

        console.log(app.globalData.height)

        this.setData({

          height: app.globalData.height,

          systemHeight: app.globalData.systemHeight

        })

      },

    ```

    小程序自定义顶部适配机型

    index.wxml

    ```

    <view class="globalTop">

      <view style="height:{{systemHeight}}px"></view>

      <view  class="sheight fs_16" style="height:{{height}}px;line-height:{{height}}px">小程序名称</view>

    </view>

    ```

    小程序自定义顶部适配机型 小程序自定义顶部适配机型 小程序自定义顶部适配机型

    相关文章

      网友评论

          本文标题:小程序自定义顶部适配机型

          本文链接:https://www.haomeiwen.com/subject/cobnyctx.html