小程序scroll-view的使用

欢迎加入小程序交流群:微信小程序开发(交流QQ群:604788754),本群免费解答问题,定期更新工作种遇到的小程序。

WXML:

<view>
    <scroll-view class="demo-view-1" scroll-x="true">
        <view class="bc_green bc_size inline"></view>
        <view class="bc_red bc_size inline"></view>
        <view class="bc_blue bc_size inline"></view>
        <view class="bc_pink bc_size inline"></view>
        <view class="bc_yellow bc_size inline"></view>
        <view class="bc_gray bc_size inline"></view>
        <view class="bc_tan bc_size inline"></view>
    </scroll-view>
</view>

WXSS:

.demo-view-1{
    white-space: nowrap;
    height: 300rpx;
}

.bc_green{
    background-color: #00ff00;
}
.bc_red{
    background-color: #ff0000;
}
.bc_blue{
    background-color: #0000ff;
}
.bc_pink{
    background-color: pink;
}
.bc_yellow{
    background-color: yellow;
}
.bc_gray{
    background-color: gray;
}
.bc_tan{
    background-color: tan;
}
.inline{
    display: inline-block;
}
.bc_size{
    width: 300rpx;
    height: 300rpx;
}

 

posted @ 2017-06-19 17:16  生如逆旅,一苇以航  阅读(209)  评论(0编辑  收藏  举报