uniapp滑动屏幕某一元素自动吸顶

dddxz_2

已于 2022-12-26 11:23:51 修改

阅读量718

点赞数 1

分类专栏： uniapp 文章标签：前端 css css3

于 2022-12-20 14:15:58 首次发布

本文链接：https://blog.csdn.net/dddxz_2/article/details/128383985

版权

uniapp 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

css实现

<view class="ComBox">
		<view class="slot-wrap">
			<view class="nav_search" :style="'top:'+navTop+'px'">
				<!-- 搜索框 -->
				<u-search placeholder="请输入关键字" v-model="keyword" ></u-search>
			</view>
			<!-- 轮播图 -->
			<view style="margin-top: 5px;">
				<u-swiper :list="ad_list" name='img' :height="200"></u-swiper>
			</view>
			<!-- 分类 -->
			<view class="sort-area">
				
			</view>
		</view>
        <!-- 吸顶 -->
		<view class="suggest-top">
			<view @click="showGoods" class="left-item" :class="change == 1?'active':''">
				精选团购
			</view>
			<view @click="showShop" class="left-item" :class="change == 2?'active':''">
				推荐商户
			</view>
		</view>
        <!-- 内容1 -->
		<view class="content" v-if="change == 1">
            <scroll-view scroll-y="true" class="fullHeight" scroll-top="0" show-scrollbar="true" @scrolltolower="bottomLoad()"></scroll-view>
        </view>
		<!-- 内容2 -->
		<view class="content" v-if="change == 2"></view>
	</view>

.ComBox {
		height: auto;
		position: relative;

		.suggest-top {
			position: sticky !important;
			z-index: 999;
			top: var(--window-top);
			width: 100%;
			height: 50px;
			line-height: 50px;
			display: flex;
			justify-content: space-between;
			text-align: center;
			background-color: #fff;
		}

		.fullHeight {
			margin-top: 5px;
			height: calc(100vh - var(--window-bottom) - var(--window-top) - 65px);
			// border: #06c 1px solid;
		}
	}