scroll-view為滾動視圖，共有水平滾動和垂直滾動兩種 使用豎向滾動時，需要給<scroll-view/>一個固定高度，通過 WXSS 設置 height。 index.wxss 是頁面的結構文件： <!--垂直滾動--> <view class="section"> <view class="section__title">vertical scroll</view><scroll-view scroll-y="true" style="height: 150px;" bindscrolltoupper="upper" bindscrolltolower="lower" bindscroll="scroll" scroll-into-view="{{toView}}" scroll-top="{{scrollTop}}"><view class="scroll-view-item ">西瓜</view><view class="scroll-view-item ">橘子</view><view class="scroll-view-item ">蘋果</view><view class="scroll-view-item ">香蕉</view> <view class="scroll-view-item ">葡萄</view><view class="scroll-view-item ">柚子</view><view class="scroll-view-item ">火龍果</view><view class="scroll-view-item ">哈密瓜</view></scroll-view> </view>

　　

<!--水平滾動--> <view class="section scroll_x"> <view class="section__title">horizontal scroll</view><scroll-view scroll-x="true" style=" white-space: nowrap; display: flex"><view class="scroll-view-item ">西瓜</view><view class="scroll-view-item ">橘子</view><view class="scroll-view-item ">蘋果</view><view class="scroll-view-item ">香蕉</view> <view class="scroll-view-item ">葡萄</view><view class="scroll-view-item ">柚子</view><view class="scroll-view-item ">火龍果</view><view class="scroll-view-item ">哈密瓜</view></scroll-view> </view>

　　

以下是頁面效果：

轉載于:https://www.cnblogs.com/taojiejun/p/8881272.html

總結

以上是生活随笔為你收集整理的微信小程序的scroll-view组件的全部內容，希望文章能夠幫你解決所遇到的問題。

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