<list :show-scrollbar="false" :bounce="false" :style="{width: '152rpx', height: '2560rpx'}" scrollable="false">
<cell v-for="(item,index) in list" :key="index">
<view class="text-box-column">
<text style="background-color: #007AFF;">{{index}}</text>
</view>
</cell>
</list>
<scroller scroll-direction="horizontal"
:bounce="false"
:show-scrollbar="false"
style="width: 598rpx;"
>
<list :show-scrollbar="false" :bounce="false" :style="{width: `${data.length*132}rpx`, height: '2560rpx'}" scrollable="false">
<cell v-for="(item,index) in list" :key="index">
<view class="row">
<view v-for="($item,i) in item" :key="i" class="text-box-column">
<text>{{$item}}</text>
</view>
</view>
</cell>
</list>
</scroller>
</scroller> ```
periH
- 发布：2021-11-30 18:22
- 更新：2021-12-08 17:04
- 阅读：350
产品分类： uniapp/App
PC开发环境操作系统： Windows
PC开发环境操作系统版本号： win10企业版
HBuilderX类型： 正式
HBuilderX版本号： 3.2.16
手机系统： iOS
手机系统版本号： iOS 14
手机厂商： 苹果
手机机型： iPhone7
页面类型： nvue
vue版本： vue2
打包方式： 云端
项目创建方式： HBuilderX
示例代码：
操作步骤：
demo种提供了4种测试结果
demo种提供了4种测试结果
预期结果：
预期实现横向向左侧可滑动，纵向向下可滚动，横向滑动时左侧固定
预期实现横向向左侧可滑动，纵向向下可滚动，横向滑动时左侧固定
实际结果：
目前的测试结果ios只能单方向滑动，安卓达到预期
目前的测试结果ios只能单方向滑动，安卓达到预期
bug描述：
实现list和scroller左右布局，类似竖向吸顶的效果，外层scroller控制里面子元素纵向滚动，横向scroller外层父容器设置flex-direction: row后横向滚动失效，当取消横向滚动容器的高度后纵向滚动失效，在安卓无此现象
periH (作者)
<scroller class="data-container row">
<list :show-scrollbar="false" :bounce="false" :style="{width: '152rpx', height: '2560rpx'}" scrollable="false">
<cell v-for="(item,index) in list" :key="index">
<view class="text-box-column">
<text style="background-color: #007AFF;">{{index}}</text>
</view>
</cell>
</list>
<scroller scroll-direction="horizontal"
:bounce="false"
:show-scrollbar="false"
style="width: 598rpx;"
>
<list :show-scrollbar="false" :bounce="false" :style="{width: `${data.length*132}rpx`, height: '2560rpx'}" scrollable="false">
<cell v-for="(item,index) in list" :key="index">
<view class="row">
<view v-for="($item,i) in item" :key="i" class="text-box-column">
<text>{{$item}}</text>
</view>
</view>
</cell>
</list>
</scroller>
</scroller>
nvue scroll-view 在示例这种布局下看上去是有点问题，这个问题我们在排查一下，我改了一下示例代码，在最外层在套一个 scroll-view 应该是实现了你想要的效果，
<scroll-view :bounce="false" class="data-container" style="flex: 1;" scroll-y="true" scroll-x="true">
<scroller class="row" style="height: 2560rpx;">
<list :show-scrollbar="false" :bounce="false" :style="{width: '152rpx', height: '2560rpx'}"
scrollable="false">
<cell v-for="(item,index) in list" :key="index">
<view class="text-box-column">
<text style="background-color: #007AFF;">{{index}}</text>
</view>
</cell>
</list>
<scroller scroll-direction="horizontal" :bounce="false" :show-scrollbar="false" style="width: 598rpx;">
<list :show-scrollbar="false" :bounce="false"
:style="{width: `${data.length*132}rpx`, height: '2560rpx'}" scrollable="false">
<cell v-for="(item,index) in list" :key="index">
<view class="row">
<view v-for="($item,i) in item" :key="i" class="text-box-column">
<text>{{$item}}</text>
</view>
</view>
</cell>
</list>
</scroller>
</scroller>
</scroll-view>