scroll-view怎么自定义高度

要自定义scroll-view的高度，可以在scroll-view的父级组件中设置高度，或者使用flex布局来控制高度。具体来说，可以在外层容器的样式中设置height属性或者使用flex-grow、flex-shrink和flex-basis属性来控制高度。另外，也可以在scroll-view组件本身的样式中设置height属性来控制高度。需要注意的是，如果scroll-view的高度超出了屏幕高度，需要在外层容器中设置overflow属性为scroll来支持滚动。

相关问题

uniapp中scroll-view自定义下拉

在uni-app中，你可以通过自定义组件来实现scroll-view的自定义下拉效果。下面是一个简单的示例：

1. 首先，创建一个自定义组件，比如命名为CustomScrollView。
在CustomScrollView.vue文件中，可以定义一个容器元素和一个下拉刷新的提示元素，如下所示：

<template>
  <view class="custom-scroll-view">
    <view class="refresh-indicator" v-show="showRefreshIndicator">
      <!-- 自定义下拉刷新的内容 -->
      <!-- ... -->
    </view>
    <scroll-view class="scroll-view-content">
      <!-- scroll-view的内容 -->
      <!-- ... -->
    </scroll-view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      showRefreshIndicator: false, // 是否显示下拉刷新提示
      startY: 0, // 记录开始滑动的位置
    };
  },
  methods: {
    onTouchStart(e) {
      this.startY = e.touches[0].clientY;
    },
    onTouchMove(e) {
      const currentY = e.touches[0].clientY;
      const distance = currentY - this.startY;
      if (distance > 0 && this.$refs.scrollView.scrollTop === 0) {
        // 下拉到顶部了，显示下拉刷新提示
        this.showRefreshIndicator = true;
      } else {
        // 没有下拉到顶部，隐藏下拉刷新提示
        this.showRefreshIndicator = false;
      }
    },
    onTouchEnd() {
      if (this.showRefreshIndicator) {
        // 触发下拉刷新事件
        this.$emit('refresh');
      }
      this.showRefreshIndicator = false;
    },
  },
};
</script>

<style scoped>
.custom-scroll-view {
  position: relative;
  height: 100%;
}

.refresh-indicator {
  position: absolute;
  top: -50px; /* 下拉刷新提示的高度 */
  left: 0;
  right: 0;
  height: 50px; /* 下拉刷新提示的高度 */
}

.scroll-view-content {
  height: 100%;
}
</style>

2. 在使用CustomScrollView组件的页面中，可以引入该组件并监听其下拉刷新事件，如下所示：

<template>
  <view>
    <!-- ... -->
    <custom-scroll-view @refresh="onRefresh">
      <!-- ... -->
    </custom-scroll-view>
  </view>
</template>

<script>
import CustomScrollView from '@/components/CustomScrollView';

export default {
  components: {
    CustomScrollView,
  },
  methods: {
    onRefresh() {
      // 处理下拉刷新逻辑
      // ...
    },
  },
};
</script>

通过以上步骤，你就可以实现自定义下拉刷新效果了。当用户在CustomScrollView组件内部下拉到顶部时，会触发refresh事件，你可以在onRefresh方法中处理下拉刷新的逻辑，例如发送网络请求获取最新数据，然后更新页面内容。

需要注意的是，以上示例是基于uni-app框架的实现方式，如果你使用的是其他框架或原生开发，具体实现方式可能会有所不同。

uniapp使用scroll-view固定底部自定义tabbar

在uniapp中使用scroll-view固定底部自定义tabbar的方法如下：

1. 首先，在页面的底部添加一个固定的tabbar组件，例如：

<template>
  <view>
    <!-- 页面内容 -->
    <scroll-view scroll-y="true" style="height: {{scrollViewHeight}}rpx;" bindscroll="scrollviewScroll">
      <!-- scroll-view的内容 -->
    </scroll-view>
    
    <!-- 固定的底部tabbar -->
    <custom-tabbar></custom-tabbar>
  </view>
</template>

2. 在页面的data中定义一个变量`scrollViewHeight`，用于设置scroll-view的高度，例如：

export default {
  data() {
    return {
      scrollViewHeight: 0
    }
  },
  // 其他代码...
}

3. 在页面的`onLoad`生命周期函数中，获取底部tabbar的高度，并计算scroll-view的高度，例如：

export default {
  onLoad() {
    // 获取底部tabbar的高度
    const query = uni.createSelectorQuery().in(this)
    query.select('.custom-tabbar').boundingClientRect((res) => {
      // 计算scroll-view的高度
      const windowHeight = uni.getSystemInfoSync().windowHeight
      const tabbarHeight = res.height
      const scrollViewHeight = windowHeight - tabbarHeight
      this.scrollViewHeight = scrollViewHeight
    }).exec()
  },
  // 其他代码...
}

4. 在scroll-view的`bindscroll`事件中，监听scroll-view的滚动事件，例如：

export default {
  methods: {
    scrollviewScroll(e) {
      // 处理scroll-view的滚动事件
    },
    // 其他方法...
  },
  // 其他代码...
}

通过以上步骤，你可以在uniapp中使用scroll-view固定底部自定义tabbar。