微信小程序开发

横向滚动，竖向滚动;

wxml:

<scroll-view scroll-x="ture"> 
<view  class="scrOut" >
<view class="scrbox">111</view>
<view class="scrbox">222</view>
<view class="scrbox">333</view>
<view class="scrbox">444</view>
<view class="scrbox">555</view>
</view>
</scroll-view>

<scroll-view scroll-y="ture">
  <view class="scrOut2">
   <view class="scrbox2">111</view>
   <view class="scrbox2">222</view>
   <view class="scrbox2">333</view>
   <view class="scrbox2">444</view>
   <view class="scrbox2">555</view>
  </view>
</scroll-view>

wxss：

.scrOut{
  display:flex; width: 500px;
  
}
.scrbox{
  background-color: darkgoldenrod;
  width: 100px;
  height: 100px;
  margin-right: 5px;
  flex: 1 0 120px;
}
.scrOut2{
 height: 250px;
}
.scrbox2{
  width: 100%; height: 100px;
  margin-bottom: 3px;
  background-color: pink;
}

图片滚动:

WXML:

<swiper-item>
  <image src="/imges/1.webp"></image>
</swiper-item>
<swiper-item>
  <image src="/imges/2.webp"></image>
</swiper-item>
<swiper-item>
  <image src="/imges/3.webp"></image>
</swiper-item>
</swiper>