Detailed tutorial of scroll-view of uni-app component

scroll-view is an important component in UniApp, it provides the function of scrolling content in the view area. Whether it is on the applet, H5 or APP side, scroll-view can help you realize the needs of scrolling content. This tutorial will introduce in detail how to use the scroll-view component in UniApp, and provide sample code for reference.

step

The following are the detailed steps to use the scroll-view component:

Step 1: Create a page
First, create a new page or add the scroll-view component to an existing page. templateAdd the following code to the page :

<template>
  <view>
    <scroll-view class="scroll-view" scroll-y="true">
      <!-- 这里是你的滚动内容 -->
    </scroll-view>
  </view>
</template>

Step 2: Set the scrolling style
In order for the scroll-view to take effect and have a scrolling effect, you need to styleset the height and other styles for it in the page. The sample code is as follows:

<style>
  .scroll-view {
      
      
    height: 100vh; /* 设置高度为页面的可视高度，可根据实际需求进行调整 */
  }
</style>

Step 3: Add scrolling content
Add the content you need to scroll in the scroll-view component, which can be text, pictures, lists, etc. The sample code is as follows:

<scroll-view class="scroll-view" scroll-y="true">
  <view class="content">
    <text>这是一个滚动内容示例</text>
    <!-- 这里可以添加更多的内容 -->
  </view>
</scroll-view>

sample code

Here is a complete sample code showing how to use the scroll-view component in UniApp:

<template>
  <view>
    <scroll-view class="scroll-view" scroll-y="true">
      <view class="content">
        <text>这是一个滚动内容示例</text>
        <image src="../../static/logo.png"></image>
        <text>UniApp 是一个跨平台开发框架</text>
        <!-- 这里可以添加更多的内容 -->
      </view>
    </scroll-view>
  </view>
</template>

<script>
  export default {
      
      
    name: 'ScrollPage'
  }
</script>

<style>
  .scroll-view {
      
      
    height: 100vh;
  }
  .content {
      
      
    padding: 20rpx;
    font-size: 28rpx;
    text-align: center;
  }
</style>

Summarize

Through this tutorial, you have learned how to use the scroll-view component in UniApp to realize the function of scrolling content. You can add any content to the scroll-view component according to actual needs, so as to create a rich and varied scrolling interface. Hope this tutorial can help you.