前端页面开发常用的是DIV+CSS布局，但是在小程序中为了达到不同端的兼容，定义了一套的组件标签，比如和div类似的有view。

一、视图容器

1.1 view组件

view是一个块级容器组件，没有特殊功能，主要用于布局展示，类似于DIV+CSS中的div，view具备一套关于点击行为的属性：

hover: 是否启动点击状态，默认值为false
hover-class: 指定按下去的样式，当hover-class="none"时，没有点击效果，默认值为“none”
hover-start-time: 按住后多久出现点击状态，单位毫秒，默认值为50
hover-stay-time: 手指松开后点击状态保留时间，单位毫秒，默认值为400

下面介绍三种常见的布局：

三栏布局

1
2
3
4
5
<view style="display: flex;">
    <view style="background-color:red;flex-grow:1;height:80rpx;">1</view>
    <view style="background-color:blue;flex-grow:1;height:80rpx;">2</view>
    <view style="background-color:green;flex-grow:1;height:80rpx;">3</view>
</view>

左右混合布局

1
2
3
4
5
6
7
<view style="display: flex; height: 400rpx;">
    <view style="background-color:red;width:250rpx;color:#fff;">1</view>
    <view style="flex-grow:1;display:flex;flex-direction:column;">
        <view style="flex-grow:1;background-color:blue;color:#fff;">2</view>
        <view style="flex-grow:1;background-color:green;color:#fff;">3</view>
    </view>
</view>

上下混合布局

1
2
3
4
5
6
7
<view style="display: flex; flex-direction: column; height: 400rpx;">
    <view style="background-color:red;height:150px;color:#fff;">1</view>
    <view style="flex-grow:1;display:flex;">
        <view style="flex-grow:1;background-color:blue;color:#fff;">2</view>
        <view style="flex-grow:1;background-color:green;color:#fff;">3</view>
    </view>
</view>

常见布局

1.2 scroll-view组件

该组件容器具备可滑动的能力，尽管我们可以给view组件设置overflow: scroll属性来实现，但是由于小程序没有DOM的概念，不方便于后续处理，因此我们需要用到scroll-view组件，有以下属性：

scroll-x: 允许横向滚动，默认false
scroll-y: 允许纵向滚动，默认false
upper-threshold: 距顶部/左边多远时（单位px）触发scrolltoupper事件，默认50
lower-threshold: 距底部/右边多远时（单位px）触发scrolltolower事件，默认50
scroll-top: 设置竖向滚动条位置
scroll-left: 设置横向滚动条位置
scroll-into-view: 值应为某子元素的id，滚动到该元素时，元素对齐滚动区域顶部
bindscrolltoupper: 滚动到顶部/左边，会触发scrolltoupper事件
bindscrolltolower: 滚动到底部/右边，会触发scrolltolower事件
bindscroll: 滚动时触发事件

目前，请勿在scroll-view中使用textarea、map、canvas、video组件。

1
2
3
4
5
6
7
8
9
10
11
<scroll-view class="scroll-container" upper-threshold="0" lower-threshold="100" scroll-into-view="{{toView}}" bindscroll="scroll" bindscrolltolower="scrollToLower" bindscrolltoupper="scrollToUpper" scroll-y="true" scroll-top="{{scrollTop}}">
    <view id="item-1" class="scroll-item bg-red">1</view>
    <view id="item-2" class="scroll-item bg-blue">2</view>
    <view id="item-3" class="scroll-item bg-red">3</view>
    <view id="item-4" class="scroll-item bg-blue">4</view>
    <view id="item-5" class="scroll-item bg-red">5</view>
    <view id="item-6" class="scroll-item bg-blue">6</view>
</scroll-view>
<view class="act">
    <button bindtap="scrollToTop">点击滚到顶部</button>
</view>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
.scroll-container{
    border: solid 1px;
    height: 800rpx;
}
.scroll-container .scroll-item{
    height: 300rpx;
    width:120%;
}
.bg-blue{
    background-color: #87cefa;
}
.bg-red{
    background-color: #ff6347;
}
.act{
    padding: 10px;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
Page({
    data: {
        toView: 'item-3'  //第一次渲染 默认滚动到该元素区域
    },
    scrollToUpper: function(){
        console.log('触发到滚动顶部事件');
    },
    scrollToLower: function(){
        console.log('触发到滚到底部事件');
    },
    // 点击按钮时，滚到顶部
    scroll: function(){
        console.log('触发了滚动事件');
    },
    scrollToTop: function(){
        this.setData({
            scrollTop: '0'
        })
    }
})

滚动视图

1.3 滑块视图组件

tabBar可以配置程序顶部或底部菜单样式，可配置属性：

scroll-x: 允许横向滚动，默认false
scroll-y: 允许纵向滚动，默认false
upper-threshold: 距顶部/左边多远时（单位px）触发scrolltoupper事件，默认50
lower-threshold: 距底部/右边多远时（单位px）触发scrolltolower事件，默认50
scroll-top: 设置竖向滚动条位置
scroll-left: 设置横向滚动条位置
scroll-into-view: 值应为某子元素的id，滚动到该元素时，元素对齐滚动区域顶部
bindscrolltoupper: 滚动到顶部/左边，会触发scrolltoupper事件
bindscrolltolower: 滚动到底部/右边，会触发scrolltolower事件
bindscroll: 滚动时触发事件

1
2
3
4
5
6
7
8
<swiper class="banner" indicator-dots="true" autoplay="{{autoplay}}" current="0" interval="2000" duration="300" bindchange="change">
    <block wx:for="{{sliderList}}">
        <swiper-item class="{{item.className}}">{{item.name}}</swiper-item>
    </block>
</swiper>
<view>
    <button bindtap="play">暂停|播放</button>
</view>
1
2
3
4
5
6
7
8
9
10
11
12
13
.banner{
    height: 400px;
    background-color: #ddd;
}
.bg-blue{
    background-color: #87cefa;
}
.bg-red{
    background-color: #ff6347;
}
.bg-green{
    background-color: #43cd80;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
Page({
    data: {
        autoplay: true,
        sliderList: [
            {className: 'bg-red', name: 'slider1'},
            {className: 'bg-blue', name: 'slider2'},
            {className: 'bg-green', name: 'slider3'},
        ]
    },
    //监听swiper滚动事件，并切换面板
    switchTab: function(e){
        console.log('监听切换处理');
    },
    play: function(){
        this.setData({
            autoplay: !this.data.autoplay
        })
    },
    change: function(){
        console.log('执行了滑动');
    }
})

滑块视图