[已解决]微信小程序页面布局

时间：2019-05-07 来源：小程序工厂

问题模块框架类型问题类型 API/组件名称终端类型微信版本基础库版本
API和组件微信小程序 Bug view 客户端 6.7.3 2.3.0

- 当前 Bug 的表现（可附上截图）

- 预期表现
按钮不管页面的内容高度是多少始终在页面的底部，已经使用了position：absolute了

- 复现路径

- 提供一个最简复现 Demo

微信小程序开发者回答：

如果你使用页面的滚动，那你要用position:fixed
如果用的scroll-view，可以考虑放在scroll-view的外面

微信小程序开发者回答：

也是不行，现在是页面上有三个view，还有一个底部的按钮的view，页面的三个view是根据接口返回过来的数据来选择显示与否的，如果不显示这三个view的话，我设置底部按钮为absolute，它是没有效果的，会上移，如果设置fixed的话，有实现不了按钮始终在页面底部的效果

微信小程序开发者回答：

不显示的时候为啥要设成absolute？啥意思，没懂

微信小程序开发者回答：

就是这个按钮一直在页面的底部，而不是手机的底部，上面三个view都显示的话，这个按钮也要显示在页面的底部，方便跳转

微信小程序开发者回答：

那不就是 absolute 加上 bottom:0吗？

微信小程序开发者回答：

也没有效果哦，我试了，需求是说要把按钮定位在距离页面底部30rpx的位置，试了，没有用

微信小程序开发者回答：

能做个代码片段吗？

微信小程序开发者回答：

这是footer-btn的样式，这个是我写按钮的view

微信小程序开发者回答：

别截图。。直接粘贴代码啊。。不然我要手动敲好累啊。。

微信小程序开发者回答：

我好像知道原因了，你试试给在 wxss里加个
page {
width: 100%;

height: 100%;

}

微信小程序开发者回答：

page{
position: relative;
width: 100%;
height: 100%;
}
我加了，也是没有效果，在iPhoneX ，或者屏幕高度长一点的，都会上移

微信小程序开发者回答：

我有点不理解你要的效果。。能说个APP或者微信小程序我去看看吗？上移是什么鬼？如果是要最底部，就bottom:0，不要margin-bottom什么的

微信小程序开发者回答：

好的，请稍等

微信小程序开发者回答：

这就是绝对定位到底部啊。。有啥不行的？
wechatide://minicode/Yzo7P6ma7431
把你页面做成代码片段吧。。请参考以下链接
https://developers.weixin.qq.com/miniprogram/dev/devtools/minicode.html

微信小程序开发者回答：

在页面出现两个挑战赛或者三个时，按钮确实会绝对定位到底部，不过一个是，就失效了

微信小程序开发者回答：

请制作代码片段，你样式写的有问题，不拿到所有页面内容，无法确定你问题在哪里。。这太难想象了。。有可能你某个父标签用了 position:relative 或者position:absolute有关。。但这都是猜测。。请制作代码片段

微信小程序开发者回答：

wechatide://minicode/EHpCH6md7b3G 你看看把，如果把进行中和结束中的view去掉，或者display：none之后，按钮就会上移，在开发工具中iPhoneX会上移

微信小程序开发者回答：

wechatide://minicode/EHpCH6md7b3G 你看看把，如果把进行中和结束中的view去掉，或者display：none之后，按钮就会上移，在开发工具中iPhoneX会上移，图片那些我就不放上去了，还有数据是调接口的，应该不碍事吧

微信小程序开发者回答：

wechatide://minicode/wVqxU6m37N3n

微信小程序开发者回答：

我试着把进行中和已结束的挑战赛注释掉，或者设置display：none，按钮依然会上移

本文网址：http://www.91bianli.com/kaifazhinan/74615.html