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

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

灭绝师太

リリース： 2021-10-27 15:50:12

オリジナル

6106 人が閲覧しました

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

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

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

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