wxml代碼

<scroll-view scroll-x="true"> <view class="banner" scroll-x="true"> <view class="banner_Item"> 第一塊</view> <view class="banner_Item"> 第二塊</view> <view class="banner_Item"> 第三塊</view> <view class="banner_Item"> 第四塊</view> <view class="banner_Item"> 第五塊</view> </view> </scroll-view>

wxss代碼

.banner{height:160rpx; width:100%;display: flex;display: -webkit-box;flex-direction: column;} .banner_Item{ width: 160rpx;height: 160rpx;background-color:red;margin-right:10rpx;}

效果圖

總結

以上是生活随笔為你收集整理的微信小程序横向图片左右滑动的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。