uniapp, Ele.me WeChat 애플릿 홈페이지 끈적 끈적한 포지셔닝 레이아웃 개발

위치: 고정은 고정 위치 지정을 의미하는 CSS의 새로운 속성으로, 요소와 상위 요소 사이의 거리가 고정 요구 사항에 도달하는 경우 스크롤 이벤트를 모니터링하는 데 주로 사용됩니다. 스타일 위치:고정; 상단:20px)를 아래 그림의 빨간색 상자에 추가하면 빨간색 상자가 위쪽으로 스크롤되어 상위 요소와의 거리가 20px에 도달하면 적절한 위치에 고정됩니다. 상대결합과 고정결합의 결합.

이 새로운 속성은 다양한 용도로 사용됩니다. 예를 들어 Ele.me WeChat 애플릿의 홈페이지 레이아웃에서는 검색 상자 요소가 고정 레이아웃을 사용합니다. 모직물을 구현했나요? 먼저 전반적인 효과를 살펴보겠습니다(아래 그림과 같이 Ele.me 위챗 애플릿을 열어서 체험해 볼 수도 있습니다~).

템플릿 코드:

            <template>
                <!-- 粘性定位搜索盒子 -->
				<view class="search-box" :style="{top:top+&#39;px&#39;}">
					<view class="ctn">
						<view class="hx-search-box" @click="goSearch">
							<view class="hx-search-text">
								<uni-icons type="search" size="22" 
								color="#666666" />
								<text>鲜果大咖水果捞 20减12</text>
							</view>
							<view>
								<button class="search-txt">搜索</button>
							</view>
						</view>
					</view>
				</view>
			</template>

참고:

여기서 동적 속성 top이 검색 상자 상자에 추가되었습니다. 이는 애플릿에서 검색 상자와 특정 상위 요소 사이의 거리 때문입니다. 다양한 모바일 장치가 변화하고 있습니다. 동적 상위 속성 값을 찾는 방법은 무엇입니까?

    <script>
        export default {
            data() {
			return {
			//在这里给到top属性一个默认的值为0
			    top: 0
			}
	     },
	     onLoad() {
			// 获取手机系统信息 状态栏高度 
			const statusBarHeight = uni.getSystemInfoSync().statusBarHeight
			// 获取胶囊的位置
			const menuButtonInfo = uni.getMenuButtonBoundingClientRect()
		    //导航栏的高度 = (胶囊底部高度 - 状态栏的高度) + (胶囊顶部高度 - 状态栏内的高度) 
		    this.navBarHeight = (menuButtonInfo.bottom - info.statusBarHeight) + 
		                        (menuButtonInfo.top - info.statusBarHeight)
		      //top的值为状态栏的高度+导航栏的高度
			this.top = menuButtonInfo.bottom + menuButtonInfo.top - statusBarHeight;
		    } 
        }
    </script>
    <style>
        .search-box {
        		position: sticky;
        		z-index: 2;
    </style>

                                                       

위 내용은 uniapp, Ele.me WeChat 애플릿 홈페이지 끈적 끈적한 포지셔닝 레이아웃 개발의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!