當使用scroll-view這個標籤的時候,咱們是爲了實現向左滑或者向下滑的效果。css
你只須要將個人案例複製到你的項目,將圖片路徑修改完以後,就能夠看到效果,切記是下面那一份代碼呦!css也在一塊兒
一下是個人案例:html
在剛開始的時候就是這樣寫的,可是一直都不能夠出現滑動效果,因而果斷換思路。就有了下面的這樣的佈局佈局
<scroll-view class='cover' scrollX="true"> <view> <image src='../../resource/1.jpg'/> </view> <view> <image src='../../resource/1.jpg'/> </view> <view> <image src='../../resource/1.jpg'/> </view> <view> <image src='../../resource/1.jpg'/> </view> <view> <image src='../../resource/1.jpg'/> </view> <view> <image src='../../resource/1.jpg'/> </view> <view> <image src='../../resource/1.jpg'/> </view> <view> <image src='../../resource/1.jpg'/> </view> <view> <image src='../../resource/1.jpg'/> </view> <view> <image src='../../resource/1.jpg'/> </view> </scroll-view>
修改事後的佈局:spa
<view class="scroll_box"> <scroll-view class='cover' scrollX="true"> <view> <image src='../../resource/1.jpg'/> </view> <view> <image src='../../resource/1.jpg'/> </view> <view> <image src='../../resource/1.jpg'/> </view> <view> <image src='../../resource/1.jpg'/> </view> <view> <image src='../../resource/1.jpg'/> </view> <view> <image src='../../resource/1.jpg'/> </view> <view> <image src='../../resource/1.jpg'/> </view> <view> <image src='../../resource/1.jpg'/> </view> <view> <image src='../../resource/1.jpg'/> </view> <view> <image src='../../resource/1.jpg'/> </view> </scroll-view> </view>
.cover{ height: 100rpx; } .scroll_box{ width: 84%; overflow: hidden; background: #fff; white-space: nowrap; margin: 0 auto; } /*封面的樣式 */ .cover image{ width: 150rpx; height: 130rpx; margin-right: 20rpx; } .cover view{ display:inline-block; }