美文网首页
微信小程序悬浮view

微信小程序悬浮view

作者: 肉肉要次肉 | 来源:发表于2019-01-18 11:50 被阅读42次

在项目中,遇到需要将提交按钮悬浮在页面底部,不随页面滑动

wxml代码如下:

我们先来看一下第一个view class='content',这个view就是你想滑动的区域,下面提交,则是想悬浮的按钮部分

wxss代码如下:

这里起到悬浮作用的样式,就是.sumitview这个动态样式。要将position设为fixed。想距上下左右的样式,这里要以top,bottom,left,right的形式

注意:

在wxml布局中,提交按钮部分还有一个最外层的view,给了一个按钮底层固定的高度,这个是因为悬浮不占页面空间位置,如果不给最外层加上一个view,滑动的内容会穿透过悬浮层。

相关文章

网友评论

      本文标题:微信小程序悬浮view

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