本文主要向您展示“微信小程序中底部按钮的实现方法”。 内容简单、易懂、清晰。 希望可以帮助您解答疑惑。 让小编带领大家学习学习《微信小程序如何在程序中实现底部吸力按钮》一文。

随着第二批、第三批X陆续到来，周围的有钱人也开始使用。 因为X的直刘海造成了很多适应问题，所以这些有钱人更加沉浸在寻找bug中。 不出所料，豌豆公主小程序也有几个用户体验不好的地方，主要是商品详情页和购物车的底部按钮栏，与Home栏重叠，很容易误触发单击下面的按钮时它。 手势操作，如下图：

如果是bug就得修复，如果是体验问题就得优化，所以我立马做了个X开始研究。

网页上的适配不错，有meta标签以及下面的解决方案进行处理。详细可以看这里

{  position: fixed;  bottom: 0;  width: 100%;  height: constant(safe-area-inset-bottom);  background-color: #fff; }

但这是比较尴尬的事情。 从四个角被切掉的表现可以推断，小程序中的-fit默认为（根据性能猜测），但没有接口可以更改，因此网页使用-fix=组合with (safe-area- -); 的适配方案不适合小程序。 目前我还没有看到小程序有专门针对X等异形屏的界面或者字段。小程序底部标签栏对X的适配只是简单的增加了一个白色的底部栏，提高了原始标签栏的位置。 为什么这么说呢？ 因为这个从我们的购物车页面可以看出，购物车页面的吸底操作并不是通过:;:0;来实现的，而是根据自身的高度计算top值，从而模拟吸底。 新版小程序中，设置X后，购物车底部的按钮被半遮住，由此得出上述结论。

言归正传，由于没有特殊的方案来获取这个值，所以我们只能通过wx. 界面。 该接口的使用方法如下：

wx.getSystemInfo({  success: function(res) {   console.log(res.model)   console.log(res.pixelRatio)   console.log(res.windowWidth)   console.log(res.windowHeight)   console.log(res.language)   console.log(res.version)   console.log(res.platform)  } })

其中有设备型号等信息。 如果它包含X，则该设备可以被认为是

这个值可以在子页面中读取，例如在商品详情页：

这是一个吸底按钮区域 // goods.js let app = getApp(); Page({   data: {     isIpx: app.globalData.isIpx?true:false   } }) /* app.wxss */ .fix-iphonex-button {   bottom:68rpx!important; } .fix-iphonex-button::after {   content: ' ';   position: fixed;   bottom: 0!important;   height: 68rpx!important;   width: 100%;   background: #fff; }

这样，一个简单的适应X底部圆角的解决方案就完成了。

至于为什么采用，因为X和6的屏幕宽度都是，在小程序中=750个物理像素，结合下面两张图可以解释原因：

截图来自网络，已被删除。

以上就是《微信小程序如何实现底部按钮》一文的全部内容。 感谢您的阅读！ 相信大家都有一定的了解，希望分享的内容对大家有所帮助。 如果您想了解更多知识，请关注易速云行业资讯频道！