用户
 找回密码
 立即注册

QQ登录

只需一步,快速开始

微客吧 首页 教程 微信小程序 新手教程 查看内容

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

纸飞机 2018-3-8 09:33

作者:王梵,来自原文地址scroll-view横向滑动,如下/*wxml*/ 123456789101112123456789101112/*wxss*/ .demo-view-1{ white-space ...

作者:王梵,来自

原文地址

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= 
                 
                

邀请

鲜花
鲜花
握手
握手
雷人
雷人
路过
路过
鸡蛋
鸡蛋
分享至 : QQ空间
收藏