uniapp sets scroll height

Uniapp is a cross-platform application development tool based on the Vue.js framework, which can quickly build applications for multiple platforms (iOS, Android, H5). When developing with Uniapp, you often encounter the need to set the scroll height. Therefore, this article will introduce how to set the scroll height in Uniapp.

1. Set the page scroll height

1. Add a scroll-view tag in the template

When writing the page, we can add it in the template A scroll-view tag to implement page scrolling. At the same time, we also need to set the height of the scroll-view so that the page can be scrolled.

For example, add the following code to the template:

<template>
  <scroll-view style="height: 1000rpx;">
    <!-- 页面内容 -->
  </scroll-view>
</template>

In this example, we set the height of scroll-view to 1000rpx.

2. Calculate the scroll height in the page life cycle hook function

In addition to setting the height of scroll-view in the template, we can also set the scroll height in the page life cycle hook The scroll height is calculated in the function.

For example, in the onLoad hook function of the page, we can calculate the scroll height as follows:

<template>
  <scroll-view :style="{height: scrollHeight + 'rpx'}">
    <!-- 页面内容 -->
  </scroll-view>
</template>

<script>
  export default {
    data() {
      return {
        scrollHeight: 0
      };
    },
    onLoad() {
      // 获取屏幕高度
      const screenHeight = uni.getSystemInfoSync().screenHeight;
      // 计算scroll-view的高度
      const scrollHeight = screenHeight - 100;  // 100为非内容区高度
      // 更新scroll-view的高度
      this.scrollHeight = scrollHeight;
    }
  }
</script>

In this example, we use a variable scrollHeight to represent the height of scroll-view , its initial value is 0. In the onLoad hook function of the page, we obtained the height of the screen through the uni.getSystemInfoSync() API and calculated the height of the scroll-view based on the screen height. Finally, we assign the calculated scroll-view height to the scrollHeight variable, thereby updating the scroll height of the page.

2. Set the scroll height of the component

In addition to the page scroll height, we sometimes need to set the scroll height for the component. Uniapp provides a mixin mode to share code between multiple components. We can use the mixin pattern to set the scroll height of the component.

1. Create a mixin

First, we need to create a mixin in the Uniapp project. Create a new "scrollHeightMixin.js" file in the "/common/mixins/" folder in the project root directory to store our mixin code.

export default {
  data() {
    return {
      scrollHeight: 0
    };
  },
  mounted() {
    // 获取屏幕高度
    const screenHeight = uni.getSystemInfoSync().screenHeight;
    // 计算scroll-view的高度
    const scrollHeight = screenHeight - 100;   // 100为非内容区高度
    // 更新scroll-view的高度
    this.scrollHeight = scrollHeight;
  }
};

In this example, we define a mixin named scrollHeightMixin, which contains a variable named scrollHeight. In the mounted hook function of the mixin, we use the uni.getSystemInfoSync() API to obtain the screen height, and calculate the height of the scroll-view based on the screen height. Finally, we assign the calculated scroll-view height to the scrollHeight variable to achieve the scroll height of the component.

2. Using mixin in components

Next, we need to introduce the previously defined mixin into the component. Add the following code in the script tag of the component:

<script>
  import ScrollHeightMixin from "@/common/mixins/scrollHeightMixin.js";
  export default {
    mixins: [ScrollHeightMixin],
    // 组件其他内容
  };
</script>

In this example, we use the import statement to introduce the previously defined mixin into the component. Then, we add the mixin to the mixins property so that the component can use the scrollHeight variable defined in the mixin.

Finally, we can use the scroll-view tag in the component's template tag and set the height of the scroll-view to the scrollHeight variable value defined in the mixin.

<template>
  <scroll-view :style="{height: scrollHeight + 'rpx'}">
    <!-- 组件内容 -->
  </scroll-view>
</template>

In this example, we set the height of scroll-view to the scrollHeight variable value defined in the mixin.

Summary:

This article introduces how to use Uniapp to set the page scroll height and component scroll height. For the page scroll height, we can set the scroll-view height in the template, or calculate the scroll height in the page's life cycle hook function. For component scroll height, we can use mixin mode to achieve it. Hope this article is helpful to you in setting scroll height in Uniapp development.

The above is the detailed content of uniapp sets scroll height. For more information, please follow other related articles on the PHP Chinese website!