uni-app scroll-view橫向滾動設置

1、單排橫向滾動
html

<scroll-view scroll-x="true" class="kite-classify-scroll">
<view class="kite-classify-cell"></view>
<view class="kite-classify-cell"></view>
<view class="kite-classify-cell"></view>
</scroll-view>

css

.kite-classify-scroll{
    width: 100%;
	height: 150px;
	overflow: hidden;
 	white-space: nowrap;
}
.kite-classify-cell{
	display: inline-block;
	width: 115px;
	height: 140px;
}

2、多排橫向滾動
html

  <scroll-view scroll-x="true" class="kite-classify-scroll">
  <view class="kite-classifie-content">
        <view class="kite-classify-cell"></view>
  </view>
  <view class="kite-classifie-content">
        <view class="kite-classify-cell"></view>
  </view>
....
  </scroll-view>

css

 .kite-classify-scroll{
        width: 100%;
	    overflow: hidden;
	    display: -webkit-box;
	    -webkit-line-clamp: 2;
	    -webkit-box-orient: vertical;
    }
.kite-classifie-content{
        width: 100%;
    	height: 150px;
    	overflow: hidden;
   	 	white-space: nowrap;
    }
    .kite-classify-cell{
    	display: inline-block;
    	width: 115px;
    	height: 140px;
    }
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章