小程序模板网

微信小程序开发手记《四》:视图容器

作者:王梵,来自原文地址

scroll-view

横向滑动,如下

/*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;
}
  •  

运行效果如下 

scroll-view标签上需要注意的属性,如下

属性名 说明 位置 备注
scroll-x 水平方向滑动时必须设置为true scroll-view标签 只能在wxml中设置
white-space 必须设置为nowrap scroll-view标签 可以在wxss中设置
display 必须设置为inline-block scroll-view的子组件上 可以在wxss中设置

display:inline-block,这对键值只需要在scroll-view的子组件上设置就可以了,scroll-view上不需要设置display属性,默认值即可。


竖直方向滑动,如下

/*wxml*/
<view>
    <scroll-view class="demo-view-2" scroll-y="true">
        <view class="bc_green bc_size"></view>
        <view class="bc_red bc_size"></view>
        <view class="bc_blue bc_size"></view>
        <view class="bc_pink bc_size"></view>
        <view class= 


易优小程序(企业版)+灵活api+前后代码开源 码云仓库:starfork
本文地址:https://www.eyoucms.com/wxmini/doc/course/23562.html 复制链接 如需定制请联系易优客服咨询:800182392 点击咨询
QQ在线咨询