uniapp uview吸顶u-sticky 无效怎么办?
背景
最近在做一个人力资源招聘系统,大概业务流程如下:
人员填写个人简历页面,需要将顶部,用到了u-navbar 再在下面使用吸顶u-sticky。
结果发现无效。经过一番研究,可以这么做。
解决方案
将想要吸顶的地方和u-navbar放在一块,将<u-navbar>和要吸顶的内容,一起放到<u-sticky>中:
<u-navbar :border-bottom="false" back-icon-size="28" back-icon-name="thumb-up" back-icon-color="#0068b7":back-text="back_text" :back-text-style="backtextstyle" title-color="#0068b7" is-fixed="true":background="background"></u-navbar>
<u-sticky>
<view class="u-p-b-20 u-border-bottom" :style="{backgroundImage:backgroundImagecolor,color:'#0068b7'}"><view class="pp u-flex" style="justify-content: center;font-weight: bold;"><view style="font-size: 18px;">人才档案</view></view><view class="pp u-flex u-m-t-10" style="justify-content: center;"><view style="font-size: 12px;color:#ff0000">*特别说明:您的信息仅作为本公司招聘面试,请放心填写</view><strong></strong></view>
</view>
</u-sticky>
调整后:
<u-sticky><u-navbar :border-bottom="false" back-icon-size="28" back-icon-name="thumb-up" back-icon-color="#0068b7":back-text="back_text" :back-text-style="backtextstyle" title-color="#0068b7" is-fixed="true":background="background"></u-navbar><view class="u-p-b-20 u-border-bottom" :style="{backgroundImage:backgroundImagecolor,color:'#0068b7'}"><view class="pp u-flex" style="justify-content: center;font-weight: bold;"><view style="font-size: 18px;">人才档案</view></view><view class="pp u-flex u-m-t-10" style="justify-content: center;"><view style="font-size: 12px;color:#ff0000">*特别说明:您的信息仅作为本公司招聘面试,请放心填写</view><strong></strong></view></view></u-sticky>