uniapp是一款基于vue.js框架的跨平台应用开发工具，能够快速构建多个平台（ios、android、h5）的应用程序。在使用uniapp进行开发时，经常会遇到需要设置滚动高度的需求。因此，本篇文章将介绍uniapp如何设置滚动高度。
一、设置页面滚动高度
- 在template中添加一个scroll-view标签
在编写页面时，我们可以在template中添加一个scroll-view标签来实现页面的滚动。同时，我们还需要设置该scroll-view的高度，以使页面可以进行滚动。
例如，在template中添加下列代码：
在这个例子中，我们将scroll-view的高度设置为1000rpx。
- 在页面生命周期钩子函数中计算滚动高度
除了在template中设置scroll-view的高度之外，我们还可以在页面的生命周期钩子函数中计算滚动高度。
例如，在页面的onLoad钩子函数中，我们可以像下面这样计算滚动高度：
在这个例子中，我们使用了一个变量scrollHeight来表示scroll-view的高度，它的初始值为0。在页面的onLoad钩子函数中，我们通过uni.getSystemInfoSync() API获取了屏幕的高度，并根据屏幕高度计算了scroll-view的高度。最后，我们将计算出来的scroll-view高度赋值给scrollHeight变量，从而更新了页面的滚动高度。
二、设置组件滚动高度
除了页面滚动高度之外，我们有时还需要为组件设置滚动高度。Uniapp提供了一个mixin（混合）模式，可以在多个组件之间共享代码。我们可以使用mixin模式来设置组件的滚动高度。
- 创建一个mixin
首先，我们需要在Uniapp项目中创建一个mixin。在项目根目录中的“/common/mixins/”文件夹中新建一个“scrollHeightMixin.js”文件，用于存放我们的mixin代码。
export default {
data() {
return {
scrollHeight: 0
};
},
mounted() {
// 获取屏幕高度
const screenHeight = uni.getSystemInfoSync().screenHeight;
// 计算scroll-view的高度
const scrollHeight = screenHeight - 100; // 100为非内容区高度
// 更新scroll-view的高度
this.scrollHeight = scrollHeight;
}
};在这个例子中，我们定义了一个名为scrollHeightMixin的mixin，其中包含了一个名为scrollHeight的变量。在mixin的mounted钩子函数中，我们使用uni.getSystemInfoSync() API获取了屏幕高度，并根据屏幕高度计算了scroll-view的高度。最后，我们将计算出来的scroll-view高度赋值给scrollHeight变量，从而实现了组件的滚动高度。
- 在组件中使用mixin
接下来，我们需要在组件中引入之前定义的mixin。在组件的script标签中添加如下代码：
在这个例子中，我们使用了import语句将之前定义的mixin引入到组件中。然后，我们将该mixin添加到mixins属性中，使得组件可以使用mixin中定义的scrollHeight变量。
最后，我们可以在组件的template标签中使用scroll-view标签，并将scroll-view的高度设置为mixin中定义的scrollHeight变量值。
在这个例子中，我们将scroll-view的高度设置为mixin中定义的scrollHeight变量值。
总结：
本文介绍了如何使用Uniapp设置页面滚动高度和组件滚动高度。对于页面滚动高度，我们可以在template中设置scroll-view的高度，或者在页面的生命周期钩子函数中计算滚动高度。对于组件滚动高度，我们可以使用mixin模式来实现。希望这篇文章对您在Uniapp开发中设置滚动高度有所帮助。
