uni-app實現橫向滾動
阿新 • • 發佈:2022-03-07
借鑑部落格:
https://blog.csdn.net/qq_36436407/article/details/115002550
成功後效果:
實現程式碼:
<template> <view> <view class="prefer-title"> 為你優選 </view> <view> <scroll-view class="prefer-scroll" scroll-x="true" @scroll="scroll"> <block v-for="item in 5" :key="item"> <view class="image-box"> <view >A</view> </view> </block> </scroll-view> </view> </view> </template> <script> exportdefault { data() { return { scrollTop: 0, old: { scrollTop: 0 } } }, methods: { upper: function(e) { console.log(e) }, lower: function(e) { console.log(e) }, scroll: function(e) { console.log(e)this.old.scrollTop = e.detail.scrollTop }, } } </script> <style> .prefer-title{ margin: 30upx 0; } .prefer-scroll{ white-space: nowrap; width: 100%; height: 300upx; } .image-box{ display: inline-block; width: 300upx; height: 280upx; border: 1upx solid green; } </style>
。