How to fix element on top in uniapp

With the development of the mobile Internet, the development of mobile applications has become more and more popular. Uniapp is a cross-platform development framework that allows developers to use a set of codes to develop applications that support multiple platforms at the same time. In mobile application development, it is a very common requirement to fix some common UI components at the top of the page to provide users with a better experience. This article will explain how to pin elements to top in Uniapp.

Uniapp is an extreme end development framework that integrates eight ports of Vue.js, WeChat applet, H5, App, Alipay applet, Baidu applet, QQ applet, and 360 applet. Its characteristic is that one set of code supports multiple platforms at the same time, and developers can greatly reduce the amount of code for multi-terminal development. In Uniapp, applications are developed through the syntax of Vue.js and the component-based development method is used to make development faster and more efficient.

There are two ways to fix elements at the top in Uniapp: one is to use the layout component, and the other is to use the CSS position property. The implementation of these two methods is introduced below.

1. Using layout components

In Uniapp, there is a component specially used for page layout, named uni-vue-router , which is used Container to display routing pages. Using this component can easily achieve the effect of fixing elements at the top. The method is as follows:

1. Place the elements that need to be fixed at the top in the uni-vue-router component external.

<template>
  <view>
    <!-- 需要固定在顶部的元素 -->
    <view class="top">顶部内容</view>
    <!-- 路由页面 -->
    <uni-vue-router></uni-vue-router>
  </view>
</template>

2. Add a style to the uni-vue-router component, set its position attribute to fixed, and use calcThe function calculates the height to avoid page overlap.

page {
  /*页面固定*/
  position: fixed;
  /*距离顶部的距离*/
  top: calc(140rpx);
  /*距离底部的距离*/
  bottom: 0;
  /*页面宽度*/
  width: 100%;
 }

uni-vue-router {
  /* 路由页面固定 */
  position: fixed;
  /* 页面高度 */
  height: calc(100% - 140rpx);
  /* 距离顶部的距离 */
  top: 140rpx;
  /* 页面宽度 */
  width: 100%;
}

2. Use the position attribute of CSS

In addition to using the layout component, we can also use the position attribute of CSS to achieve the effect of fixing the element at the top.

1. Add the position: fixed CSS attribute to the element that needs to be fixed at the top, and set the z-index attribute to a higher level than other elements. .

.top {
  /* 固定在顶部 */
  position: fixed;
  /* 层级 */
  z-index: 1;
}

2. Since we use the position: fixed attribute, the element will be separated from the document flow and will no longer occupy the original position of the page. Therefore, we need to use a height placeholder element to separate the page. Spread out to prevent the element from covering other content.

<template>
  <view>
    <!-- 占位元素 -->
    <view style="height:140px"></view>
    <!-- 需要固定在顶部的元素 -->
    <view class="top">顶部内容</view>
    <!-- 其他内容 -->
    <view>其他内容</view>
  </view>
</template>

Both of the above two methods can be used to fix the element at the top of the Uniapp page. Developers can choose a development method that suits their needs. Using components is slightly simpler, but CSS is more flexible and allows you to customize more styles.

Summary

In Uniapp, fixing elements to the top of the page can be achieved using layout components or the position property of CSS. Using layout components is a simple and easy-to-use way, and using the position property of CSS allows you to customize styles more flexibly. Developers can choose according to their own needs to achieve a better user experience.

The above is the detailed content of How to fix element on top in uniapp. For more information, please follow other related articles on the PHP Chinese website!