uniapp développe la page d'accueil de l'applet Ele.me WeChat.

Position : Sticky est un nouvel attribut de CSS, qui signifie positionnement collant. Il est principalement utilisé pour surveiller l'événement de défilement pendant le processus de glissement, lorsque la distance entre un élément et son élément parent atteint l'exigence de collant (comme Ajouter). le style position:sticky; top:20px) sur la case rouge dans l'image ci-dessous ; puis la case rouge défile vers le haut et sera fixée à la position appropriée lorsque la distance de l'élément parent atteint 20px. L'effet est parfait. combinaison de moissonneuse relative et fixe.

Ce nouvel attribut a un large éventail d'applications. Tout le monde aime apprendre des bonnes choses ~ Par exemple, dans la mise en page de la page d'accueil de l'applet Ele.me WeChat, l'élément de champ de recherche utilise une mise en page collante. il a mis en œuvre? Drap de laine? Jetons d'abord un coup d'œil à l'effet global (comme indiqué ci-dessous, vous pouvez également ouvrir l'applet Ele.me WeChat pour en faire l'expérience ~).

Code du modèle :

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

Remarque : L'attribut dynamique top est ajouté ici à la zone de recherche. En effet, dans l'applet, la distance entre la zone de recherche et l'élément parent spécifique est activée. les différents appareils mobiles évoluent. Comment trouver la valeur dynamique de l'attribut supérieur ?

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

                                                              

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!