下载掌阅APP，畅读海量书库
立即打开
scroll-view是uni-app框架中的一个组件，用于创建可滚动的视图区域，常用于长列表、滚动图像等场景。该组件用法比较简单，只需要将要滚动的内容放在scroll-view内，参见下面的示例代码。
在上面的示例中，使用scroll-view组件创建了一个可滚动的区域，内部包含了一个view列表，该列表会根据items数组中的数据进行渲染。
scroll-view组件支持很多配置选项，下面列举一些常用的选项。
● scroll-x：是否开启横向滚动，默认为false。
● scroll-y：是否开启纵向滚动，默认为true。
● scroll-top：设置滚动条与顶部的距离，单位为px。
● scroll-left：设置滚动条与左侧的距离，单位为px。
● scroll-into-view：设置滚动到目标元素的id值。
● scroll-with-animation：是否使用动画滚动，默认为false。
● lower-threshold：距离底部/右边多少像素时触发scrolltolower事件，单位为px。
● upper-threshold：距离顶部/左边多少像素时触发scrolltoupper事件，单位为px。
在uni-app中，可以使用touch事件来监听触摸屏幕的交互操作，如滑动、按下、松开等，以便针对这些事件进行相应的响应操作。touch事件由组件上的@touchstart、@touchmove、@touchend、@touchcancel四个事件组成，分别在如下时刻触发。
● @touchstart：当手指触摸屏幕时触发。
● @touchmove：当手指在屏幕上滑动时，连续触发。
● @touchend：当手指离开屏幕时触发。
● @touchcancel：当系统停止跟踪触摸时触发，如在触摸过程中突然弹出系统提示框等情况。
这些事件的触发顺序为：touchstart→touchmove→touchend或touchcancel。在事件对象中，可以获取触摸点的坐标等信息，通过计算可以实现拖拽、滑动等交互效果，参见下面的示例代码。
在uni-app中，页面生命周期指的是页面从创建到销毁的整个过程所经历的一系列事件。以下是对uni-app中页面生命周期的详细介绍。
● onLoad：监听页面加载，这个生命周期函数会在页面被加载时触发。在这个函数中可以获取一个options参数对象，该对象包含了页面跳转时传递过来的参数。在这个函数中可以进行一些初始化操作。
● onShow：监听页面显示，这个生命周期函数会在页面显示后触发。在这个函数中可以进行一些刷新操作，如刷新页面数据。
● onReady：监听页面初次渲染完成，这个生命周期函数会在页面初次渲染完成时触发。在这个函数中可以进行一些操作，如隐藏loading提示框。
● onHide：监听页面隐藏，这个生命周期函数会在页面被隐藏时触发。在这个函数中可以进行一些操作，如停止动画、清除缓存等。
● onUnload：监听页面卸载，这个生命周期函数会在页面被卸载时触发。在这个函数中可以进行一些清理操作，如数据保存、清理资源等。
● onPullDownRefresh：监听页面下拉刷新，这个生命周期函数会在用户下拉页面时触发。在这个函数中可以进行一些刷新操作，如获取最新数据等。
● onReachBottom：监听页面上拉触底，这个生命周期函数会在用户上拉页面触底时触发。在这个函数中可以进行一些分页加载数据等操作。
● onPageScroll：监听页面滚动，这个生命周期函数会在页面滚动时触发。在这个函数中可以获取页面滚动的距离等信息。
● onResize：监听页面尺寸变化，这个生命周期函数会在页面尺寸变化时触发。在这个函数中可以获取新的页面尺寸信息。
以上就是uni-app中页面生命周期的详细介绍。在实际开发中，开发者可以根据自己的需求合理利用这些生命周期函数，从而提高页面的交互性和用户体验，参见下面的示例代码。
在这段示例代码中，定义了一个页面，其中包含一个text组件和一个button组件。在页面加载完成时会打印一条信息，并输出页面传递过来的参数。当页面显示、初次渲染完成、隐藏或卸载时，也会打印相应的信息。当用户下拉页面时，会触发下拉刷新操作，并在下拉刷新完成后停止下拉刷新。当用户上拉页面触底时，会触发上拉触底操作。当页面滚动时，会打印页面滚动的距离信息。当页面尺寸变化时，会打印新的页面尺寸信息。当用户单击按钮时，会改变页面中的text组件显示的文字。
uni-app支持使用原生导航栏和自定义导航栏两种方式来展示页面导航信息，下面分别介绍这两种方式。
在uni-app中，原生导航栏是指操作系统提供的默认导航栏，它具有设备操作系统的特点和风格，通常包括标题、返回按钮、右侧按钮等元素。开发者可以通过uni-app提供的API来实现原生导航栏的设置和控制。
pages.json文件是uni-app中的配置文件，用于设置应用的全局属性和样式。可以在该文件中设置导航栏的样式、背景色、标题、左按钮、右按钮等属性，参见下面的示例代码。
以上代码展示了全局定义的配置，如果需要在App平台定义特有的样式，则可以通过如下代码实现。
当原生导航栏相关参数配置完成后，即可在需要使用原生导航栏的页面中展示导航栏，同时也可以使用uni-app提供的API来控制导航栏的样式和行为，参见下面的示例代码。
在该示例中，onNavigationBarButtonTap是一个页面级别的事件处理函数，当用户单击导航栏按钮时被调用。在该函数中，可以调用uni-app提供的API来实现页面跳转、显示提示等操作。
总之，原生导航栏可以使应用界面更加美观和统一，但它的功能相对简单，如果需要实现更多的自定义功能和样式，则建议使用下面的自定义导航栏。
uni-app导航栏
在大部分情况下，使用微信官方自带的navigationBar配置导航栏的显示内容和样式，但有时需要在导航栏中集成搜索框、自定义背景图、返回首页按钮等，这就需要使用自定义导航栏来实现。
导航栏可以全局配置，也可以单独页面配置，具体根据业务需求决定。navigationStyle属性可以控制导航栏样式，包括default和custom两种取值。custom表示取消默认的原生导航栏，使用自定义导航栏，参见下面的示例代码。
在不同型号手机的头部，导航栏高度可能不一致，所以为了适配更多型号，需要计算整个导航栏的高度、胶囊按钮与顶部的距离、胶囊按钮与右侧的距离，如图2-2所示。
图2-2 导航栏高度示意图
在uni-app中可以使用uni.getSystemInfo方法获取设备信息，使用uni.getMenuButton BoundingClientRect方法获取胶囊按钮信息，参见下面的示例代码：
注意：
胶囊按钮只在小程序平台存在。
tabBar是移动端应用常见的底部标签栏，用于实现页面之间的快速切换，小程序中通常将其分为底部tabBar和顶部tabBar。uni-app中的tabBar可以配置的标签数量最少为两个，最多为5个，其配置项见表2-1。
表2-1 tabBar配置项
每个tab的配置选项见表2-2。
表2-2 tab配置选项
参见下面的示例代码。
任务2对应的完整知识储备见https://book.change.tm/01/task2.html。