微信小程序固定顶部和底部

固定顶部

.top{position:fixed;top:0;width: 100%;
}

固定底部

.bottom{position:fixed;bottom:0;width: 100%;
}

为 iPhoneX 留出底部安全距离

如果使用的是iPhone6/7/8 Plus或者以下机型，固定底部加上上面的样式显示是正常的

但如果使用的是iPhoneX及以上的机型，就会发现被底部的白色横条挡住

为了使样式能够兼容更多的机型，我们可以在可以为底部留出安全距离
app.js

onLaunch: function () {//获取当前设备信息wx.getSystemInfo({success: res => {this.globalData.bottomLift = res.screenHeight - res.safeArea.bottom;},fail(err) {console.log(err);}})
},
globalData:{bottomLift: 0
}

page.js

const app = getApp()
data:{bottomLift: app.globalData.bottomLift
}

page.wxml

<!-- bottom是上面的样式class -->
<view class="bottom" style="padding-bottom: {{ bottomLift }}px;"><button type="primary">固定底部</button>
</view>

效果如下

当内容超出屏幕会发现按钮浮在内容的上方

这时候可以在底部的样式中添加

//背景颜色可以跟页面颜色一样
background-color: #f6f6f6;

这个时候发现有部分内容被挡住了，没能显示出来

可以在内容的view里面添加样式

<!-- 加的高度是根据底部栏的高度决定的，可以跟高度一样，也可以高一点 -->
<view style="margin-bottom: {{ bottomLift + 45 }}px;"><!-- 这里是页面内容 -->
</view>

这样固定底部就能显示完整的内容啦

微信小程序固定顶部和底部相关推荐

微信小程序自定义顶部以及底部tabbar
1.首先建立一个模板,在里边模板的wxml里绘制公共的顶部以及底部代码如下:  <template name= ...
微信小程序之顶部导航栏（选项卡）实例 —— 微信小程序实战系列（1）
需求:顶部导航栏效果图: wxml:  <view class="navbar"><text wx:for="{{na ...
微信小程序入门二：底部导航tabBar
小程序底部导航栏组件tabBar,可以参考下官方的API:tabBar 先看代码 //app.json {"pages":["pages/index/index" ...
微信小程序自定义顶部导航栏标题 navigationStyle
微信小程序自定义顶部导航栏标题单页面自定义导航栏修改需要自定义的页面,的页面配置.json文件全部页面自定义导航修改公共页面配置app.json 单页面自定义导航栏修改需要自定义的页面,的 ...
微信小程序修改顶部电量时间的颜色
微信小程序修改顶部电量时间的颜色 onShow: function () {wx.setNavigationBarColor({frontColor: '#ffffff',backgroundC ...
微信小程序制作顶部导航栏
1问题描述使用微信小程序开发者工具制作顶部导航栏. 2算法描述首先就是对微信小程序开发者工具的配置,官网搜索后进入,选择稳定版,Windows64位下载. 然后点开开发者工具,选择小程序,点击图片 ...
微信小程序自定义顶部nav 和底部tabbar
文章目录一.微信小程序自定义Nav: 1.首先在小程序app.json中添加 `"navigationStyle": "custom"`来标志自定义导航栏: ...
微信小程序实现顶部导航栏渐变
在小程序开发的过程中,会遇到一些页面上的要求,要求实现顶部导航栏的渐变如何实现,因为小程序做了一些封装,下面看看页面的布局图: 如图所示,实际上我们能够操作的页面只有中间那一块,那么,如果客户需要使用 ...
Taro编译微信小程序实现顶部自定义导航栏
[需求] 使用taro开发微信小程序的过程中,涉及到小程序的需要自定义顶部导航栏(导航栏渐变色),微信小程序中只能够设置固定的颜色,渐变颜色以及添加其他按钮的操作就不能够通过小程序自带的api来实现 ...

微信小程序固定顶部和底部

固定顶部

固定底部

为 iPhoneX 留出底部安全距离

微信小程序固定顶部和底部相关推荐

最新文章

热门文章