用户
 找回密码
 立即注册

QQ登录

只需一步,快速开始

扫一扫,登录网站

小程序社区 首页 教程 新手教程 查看内容

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

天下雪 2017-4-24 00:12

作者:王梵,来自原文地址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 cl ...

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

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>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
/*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;
}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34

运行效果如下 

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

属性名说明位置备注
scroll-x水平方向滑动时必须设置为truescroll-view标签只能在wxml中设置
white-space必须设置为nowrapscroll-view标签可以在wxss中设置
display必须设置为inline-blockscroll-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= 
                 
                邀请 
鲜花
鲜花 (1)
鸡蛋
鸡蛋

刚表态过的朋友 (1 人)

分享至 : QQ空间
收藏
来自: 原文地址

相关阅读