uniapp uview吸顶u-sticky 无效怎么办?

发布于:2025-08-30 ⋅ 阅读:(27) ⋅ 点赞:(0)

背景

最近在做一个人力资源招聘系统,大概业务流程如下:

人员填写个人简历页面,需要将顶部,用到了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>


网站公告

今日签到

点亮在社区的每一天
去签到