uni-app里面加滚动条滑动是否可行,是否因为uni-app没有滚动嵌套的概念

uni-app里面加滚动条滑动是否可行,是否因为uni-app没有滚动嵌套的概念

里面加滚动条滑动是不是不行啊,是因为uniapp没有滚动嵌套的概念吗

2 回复

老哥 最后实现了滚动嵌套这个功能嘛?

更多关于uni-app里面加滚动条滑动是否可行,是否因为uni-app没有滚动嵌套的概念的实战教程也可以访问 https://www.itying.com/category-93-b0.html


uni-app 中,是可以实现滚动条滑动的。uni-app 是基于 Vue.js 的跨平台开发框架,支持在多个平台(如微信小程序、H5、App 等)上运行。虽然 uni-app 没有直接提供“滚动嵌套”的概念,但通过合理使用组件和 CSS,仍然可以实现滚动效果。

实现滚动条滑动的方式

  1. 使用 scroll-view 组件
    uni-app 提供了 scroll-view 组件,专门用于实现滚动效果。你可以在需要滚动的地方包裹 scroll-view,并设置相关属性来控制滚动行为。

    <scroll-view scroll-y="true" style="height: 300px;">
      <view v-for="item in list" :key="item.id">{{ item.text }}</view>
    </scroll-view>
    
    • scroll-y="true" 表示允许垂直滚动。
    • style="height: 300px;" 设置滚动区域的高度。
  2. 使用 CSS 实现滚动
    如果你不希望使用 scroll-view,也可以通过 CSS 的 overflow 属性来实现滚动效果。

    <view style="height: 300px; overflow-y: auto;">
      <view v-for="item in list" :key="item.id">{{ item.text }}</view>
    </view>
    
    • overflow-y: auto; 表示在内容超出容器高度时显示垂直滚动条。
  3. 嵌套滚动的处理
    如果你需要实现嵌套滚动(即在一个滚动区域内再嵌套一个滚动区域),可以通过合理设置 scroll-view 的样式和属性来实现。

    <scroll-view scroll-y="true" style="height: 500px;">
      <view>外层内容</view>
      <scroll-view scroll-y="true" style="height: 200px;">
        <view v-for="item in innerList" :key="item.id">{{ item.text }}</view>
      </scroll-view>
      <view>外层内容</view>
    </scroll-view>
回到顶部