小程序scroll-view失效

叁歲伎倆 2022-09-05 01:53 170阅读 0赞

#### 横向滑动 ####

> 要点：外层设置：white-space:nowrap;dispaly:flex;  
> 内层设置：display:inline-block;

<view>
      <scroll-view scroll-x="true" style="height:50rpx; white-space:nowrap ;display:flex;" >
        <view style="display:inline-block ;color:red;">niaho</view>
        <view style="display:inline-block; color:green;">niaho</view>
        <view style="display:inline-block;color:grey;">niaho</view>
        <view style="display:inline-block;color:#00a4ff;">niaho</view>
        <view style="display:inline-block;color:yellow;">niaho</view>
        <view style="display:inline-block ;color:red;">niaho</view>
        <view style="display:inline-block; color:green;">niaho</view>
        <view style="display:inline-block;color:grey;">niaho</view>
        <view style="display:inline-block;color:#00a4ff;">niaho</view>
        <view style="display:inline-block;color:yellow;">niaho</view>
      </scroll-view>
    </view>

![请添加图片描述][6c3301721da042d788cb38506c2d5dc2.gif]

#### 纵向滑动 ####

> 关键：外层设置高度

<view>
      <scroll-view scroll-y="true" style="height:100rpx;" >
        <view style="color:red;">niaho</view>
        <view style=" color:green;">niaho</view>
        <view style="color:grey;">niaho</view>
        <view style="color:#00a4ff;">niaho</view>
        <view style="color:yellow;">niaho</view>
        <view style="color:red;">niaho</view>
        <view style="color:green;">niaho</view>
        <view style="color:grey;">niaho</view>
        <view style="color:#00a4ff;">niaho</view>
        <view style="color:yellow;">niaho</view>
      </scroll-view>
    </view>

![请添加图片描述][9cc2be1c9749423a9e32d6ed0fd00032.gif]

[6c3301721da042d788cb38506c2d5dc2.gif]: /images/20220829/20e5c0abc4ba48f3bbb84428244e54dd.png
[9cc2be1c9749423a9e32d6ed0fd00032.gif]: /images/20220829/590107d5fbee4081a18f890bcdad98cb.png