uniapp が Ele.me WeChat アプレットのホームページを開発 スティッキー スティッキー ポジショニング レイアウト

Position: Sticky は CSS の新しい属性で、スティッキーな位置決めを意味します。主にスクロール イベントを監視するために使用されます。スライド プロセス中、要素とその親要素の間の距離はスティッキーに達します。必要な場合は、 (たとえば、下の図の赤いボックスにスタイル「position:sticky; top:20px」を追加します); すると、赤いボックスは上にスクロールし、親要素からの距離が 20px に達すると、適切な位置に固定されます。 この効果は、相対と固定の完璧な組み合わせです。

この新しい属性には幅広い用途があります。誰もが良いものから学ぶのが好きです~ たとえば、Ele.me WeChat アプレットのホームページ レイアウト、検索ボックス この要素はスティッキー レイアウトを使用していますが、どのように実装されていますか?まず全体的な効果を見てみましょう (以下に示すように、Ele.me WeChat アプレットを開いて体験することもできます~)。

テンプレート コード:

            <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>

注: 動的属性の先頭が検索ボックスに追加されます。これは、ミニ プログラム側で、検索ボックスと特定の親要素の間の距離がモバイル デバイスごとに異なるためです。動的な最上位属性値を見つけるにはどうすればよいですか?

    <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 中国語 Web サイトの他の関連記事を参照してください。