1. 程式人生 > >關於微信小程式scroll-view橫向滑動問題

關於微信小程式scroll-view橫向滑動問題

看到網上很多關於小程式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;
}