關於微信小程式scroll-view橫向滑動問題
阿新 • • 發佈:2019-02-08
看到網上很多關於小程式scroll-view之內不能使用彈性盒子的說法,還有一些樣式感覺都不是很詳盡,故寫此篇
首先,在寫scroll-view時,我們最好先給他一個父view,來專門控制scroll-view的寬高,以便於來各種定位和擴充套件,接著我們將要滑動的子元素·也包裝進一個父view,讓這個view寬度隨子元素擴充套件,高度則不變,然後將這個view放入scroll-view中,就完成了,看以下程式碼
<view id='fa'> <scroll-view scroll-x> <view id='scroll_box'> <view class='single' wx:for="{{[1,1,1,1,1,1,1]}}" wx:key="tests"> <image src='./failed.png'></image> <text>哈哈</text> </view> </view> </scroll-view> </view>
#fa{ width: 100%; height: 200rpx; } #fa scroll-view{ width: 100%; height: 100%; /*下面的也可放到這white-space: nowrap;*/ } #scroll_box{ width: auto; height: 200rpx; overflow: auto; white-space: nowrap;/*父元素與其取其一*/ display: inline-block;/*也可這樣display:inline-flex*/ } .single{ width: 150rpx; height: 200rpx; display: inline-flex; flex-direction: column; align-items: center; } .single image{ width: 150rpx; height: 150rpx; } .single text{ font-size: 30rpx; }