微信小程序悬浮view

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

wxml代码如下:

1514045-1b3b27a756b1acde.png

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

wxss代码如下:

1514045-d8e95bea2282f8ab.png

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

注意:

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

猜你喜欢

转载自blog.csdn.net/weixin_33830216/article/details/87251167