uni-app 自定义水平scrollview

发布于 1周前 作者 sinazl 来自 Uni-App

uni-app 自定义水平scrollview

水平scrollview ,里面内容是text,长度不同,怎么实现

3 回复

scrollview本身不就支持水平滚动的?


但是里面的内容宽度如果不写死会有问题,导致scrollview不能滑动而是整个界面可以左右滑动

在uni-app中实现自定义水平ScrollView,可以通过自定义组件结合scroll-view组件来完成。以下是一个基本的实现案例,包括一个自定义的水平ScrollView组件和它的使用示例。

自定义水平ScrollView组件(HorizontalScrollView.vue)

<template>
  <view class="container">
    <scroll-view scroll-x="true" class="scroll-view">
      <slot></slot>
    </scroll-view>
  </view>
</template>

<script>
export default {
  name: 'HorizontalScrollView',
  props: {
    // 可以在这里定义需要的props,比如滚动条颜色、滚动速度等
  },
  methods: {
    // 可以在这里定义自定义方法
  }
}
</script>

<style scoped>
.container {
  width: 100%;
  height: 100%; /* 根据需求调整高度 */
}
.scroll-view {
  width: 100%;
  white-space: nowrap; /* 阻止子元素换行 */
}
.scroll-view > * {
  display: inline-block; /* 使子元素横向排列 */
  width: auto; /* 子元素宽度自适应 */
  height: 100%; /* 子元素高度与容器一致 */
}
</style>

使用示例(App.vue)

<template>
  <view>
    <HorizontalScrollView>
      <view class="item" v-for="(item, index) in items" :key="index">
        {{ item }}
      </view>
    </HorizontalScrollView>
  </view>
</template>

<script>
import HorizontalScrollView from './components/HorizontalScrollView.vue';

export default {
  components: {
    HorizontalScrollView
  },
  data() {
    return {
      items: ['Item 1', 'Item 2', 'Item 3', 'Item 4', 'Item 5']
    };
  }
}
</script>

<style scoped>
.item {
  background-color: #f0f0f0;
  padding: 20px;
  margin-right: 10px; /* 子元素之间的间距 */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  text-align: center;
}
</style>

说明

  1. HorizontalScrollView.vue:定义了一个自定义的水平ScrollView组件,使用scroll-view组件并设置scroll-x="true"来实现水平滚动。通过<slot></slot>插槽,可以接收父组件传递的内容。

  2. App.vue:使用自定义的HorizontalScrollView组件,并通过v-for指令循环渲染多个子元素(item)。每个子元素都设置了简单的样式以便区分。

这种方式可以轻松实现一个基本的自定义水平ScrollView,你可以根据实际需求进一步扩展和美化。

回到顶部
AI 助手
你好,我是IT营的 AI 助手
您可以尝试点击下方的快捷入口开启体验!