uniapp设置滚动高度

uniapp中设置滚动高度的方法详解

1、为什么要设置滚动高度

在uniapp中，有时候需要给页面添加滚动效果，比如当页面内容太多超出屏幕高度时。但是有时候默认的滚动效果可能不够好，这时候我们需要设置滚动高度来满足我们的需要。

2、如何设置滚动高度

在uniapp中，我们可以使用`scroll-view`组件来实现滚动效果，并通过设置`scroll-y`属性来实现垂直滚动效果。但是默认情况下，`scroll-view`的高度会自适应内容高度，这时候我们需要手动设置滚动高度。

具体实现的方法是：在`scroll-view`组件中添加一个`view`元素，并设置它的高度。这样，`scroll-view`组件将会根据`view`元素的高度来决定滚动高度。

下面是一个简单的例子：

  <scroll-view class="scrollview" scroll-y>
    <view class="container" style="height: {{ containerHeight }}px;">
      //这里放置页面内容
    </view>
  </scroll-view>

这里我们添加了一个`view`元素，并为其设置了一个高度值。其中`containerHeight`是一个动态的值，需要在页面渲染时计算得出。该值可以根据页面实际内容高度来决定。

具体计算方法是：

  const query = uni.createSelectorQuery().in(this);
  query.select('.container').boundingClientRect((res) => {
    this.containerHeight = res.height;
  }).exec();

该方法使用了`uni.createSelectorQuery()`方法来获取`container`元素的宽高等信息，然后通过回调函数来计算出元素的高度。

3、完整示例

下面是一个完整的示例代码：

  <template>
    <scroll-view class="scrollview" scroll-y>
      <view class="container" style="height: {{ containerHeight }}px;">
        //这里放置页面内容
      </view>
    </scroll-view>
  </template>
  <script>
    export default {
      data() {
        return {
          containerHeight: 0
        }
      }
      onReady() {
        const query = uni.createSelectorQuery().in(this);
        query.select('.container').boundingClientRect((res) => {
          this.containerHeight = res.height;
        }).exec();
      }
    }
  </script>

4、总结

通过以上的介绍，我们学会了在uniapp中如何设置滚动高度。需要注意的是，滚动高度需要根据页面内容来决定，不同的页面需要根据实际情况来确定高度值。