小程序的填坑之路

一,組件運用

1.view-scroll橫向滑動

//wxml中代碼
<view class="container">
    <view class="section">
        <scroll-view  scroll-x="true" style="width:100%;">
            <view class="a scroll-item">a</view>
            <view class="b scroll-item">b</view>
            <view class="c scroll-item">c</view>
        </scroll-view>
    </view>
</view>

wxss中注意,我以前是在.section中display:inline-block的,可是scroll-view中的三項仍是以block的形式排列,將每一個scroll-item設置爲display:inlne-block才以行內塊的形式顯示;還要將scroll-view設置爲不回車顯示white-space:nowrap;

.container{
  width:100%;

}
.section{
  width:100%;
  height:300rpx;
}
scroll-view{
    width:100%;
    white-space:nowrap;
}
.scroll-item{
  width:100%;
  height:300rpx;
  display: inline-block;
}
.a{
  background:yellow;

}
.b{
  background: silver;
}
.c{
  background: pink;
}