微信小程序开发入门教程（十）

背景

前几篇文章我们已经学习了
WXML
相关的数据绑定与几种渲染方式，还学习了与
WXSS
相关的样式绑定、浮动定位和Flex布局，其中无论是
WXML
的页面布局还是
WXSS
的样式都是基于元素而言的，而这些元素就是组件，微信团队已经为我们封装了很多功能齐全的组件，这些组件可以满足绝大多数开发的需求，从这篇文章开始，我们将系统的学习微信小程序的组件，虽然不需要将每一个组件和属性都牢牢记住，但是至少要有一个概念，知道微信团队已经提供了哪些能力，你不需要知道所有问题的答案，但是你需要知道去哪找到你问题的答案。

组件定义

微信小程序组件类似于HTML元素，每一个标签代表一个组件，官方对于组件的定义如下：

组件是视图层的基本组成单位
组件自带一些功能与微信风格样式
一个组件通常包括开始标签和结束标签。属性用来修饰这个组件，内容在开始标签之内

按类型可以将组件划分为七大类：视图容器、基础内容、表单、导航、多媒体、地图、画布。每个组件都有共同属性和自己特有的属性，组件共有的属性如下：

id：组件的唯一表示，保持整个页面唯一
class：组件里的样式类，对应
WXSS
中定义的样式类
style：组件的内联样式，可以动态设置样式
data-* ：自定义属性，组件上触发事件时，会发送给事件处理函数，事件处理函数可以通过datascl获取
bind*/catch*：组件的事件，绑定逻辑层的相关事件处理函数，bind为冒泡事件，catch为非冒泡事件

每个属性都有其对应的属性值，属性值的类型有以下几种：

Boolean
Number：数字
String：字符串
Array：数组
Object：对象
EventHandler：事件处理函数
Any：任意属性

视图容器

在微信小程序中提供了一套类似于
<div/>
的容器组件，那就是
<view/>
<scroll-view>
<swiper/>
,在HTML中大部分的标签都能嵌套任何标签，但是小程序中大部分组件都有其自己特定的功能和意义，标签有特定的用法，内部也只能嵌套指定的组件，而容器组件能嵌套任何标签，容器组件是构建布局的基础组件。

view组件

<view/>
是一个块级容器组件，没有特殊的功能，主要用于布局展示，是布局中最基本的UI组件，任何一种复杂的布局都可以通过嵌套
<view/>
组件，设置相关的
WXSS
来实现，
<view/>
支持常用的CSS布局属性，如display、float、position甚至是Flex布局等，这些属性在前两篇文章已经详细介绍过，这里就不过多赘述了。接下来通过例子说明一下简单的布局思路。

水平3栏布局

水平3栏的思路比较简单，在一个
<view/>
中放置三个等分的
<view/>
即可，可以通过Flex布局实现，通过
flew-grow
属性实现等分，其代码如下：

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

其最后的结果如下

左右混合布局

其效果如下

其主要思路是在水平方向上放置两个view，其宽度的比例是1:3，然后在第二个view中再以垂直的方式放置两个view，且平分高度，其代码如下

<view style="display: flex; height: 400rpx;">
<view style="flex-grow: 1; background-color: red;">1</view>
<view style="flex-grow: 3; flex-direction: column; display: flex;">
<view style="flex-grow: 1; background-color: yellow;">2</view>
<view style="flex-grow: 1; background-color: blue;">3</view>
</view>
</view>

上下混合布局

其最终效果如下

这个的实现思路和左右混合类似，只是先在垂直方向放置两个view，高度比例为1:3，

然后在第二个view中水平放置两个view，其代码如下。

<view style="display: flex; height: 400rpx; flex-direction: column;">
<view style="flex-grow: 1; background-color: red;">1</view>
<view style="flex-grow: 3; display: flex;">
<view style="flex-grow: 1; background-color: yellow;">2</view>
<view style="flex-grow: 1; background-color: blue;">3</view>
</view>
</view>

通过以上三个例子可以看出，任何复杂的布局都可以通过不断地嵌套view来实现。

scroll-view组件

在实际的场景中我们经常需要使用到滑动列表，微信小程序给我们提供了
scroll-view
组件能够实现复杂的滑动场景，还提供了一系列的监听满足一些特定的需求，
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：值为某个子view的id，滚动到该元素时，该元素顶部对齐滚动区域顶部
bindscrolltoupper：滚动到顶部/左边，会触发scrolltoupper事件
bindscrolltolower：滚动到底部或右边，会触发scrolltolower事件
bindscroll：滚动时触发

目前有些组件不能在
scroll-view
中使用

，如
map
textarea
video
canvas
等，下面通过具体的例子来说明
scroll-view
的使用，在使用纵向滑动时要给
scroll-view
设置一个固定的高度，其代码如下

WXML

<scroll-view class="scroller-container" upper-threshold="0" lower-threshold="100"
scroll-into-view="{{toView}}" bindscroll="scroll" bindscrolltolower="scrollToLower"
bindscrolltoupper="scrollToUpper" scroll-y="true" scroll-top="{{scrollToTop}}">
<view id="item-1" class="scroller-item bg-red">1</view>
<view id="item-2" class="scroller-item bg-blue">2</view>
<view id="i3" class="scroller-item bg-red">3</view>
<view id="item-4" class="scroller-item bg-blue">4</view>
<view id="item-5" class="scroller-item bg-red">5</view>
<view id="item-6" class="scroller-item bg-blue">6</view>
</scroll-view>
<view class="act">
<button bindtap="scrollToTop">滚动到顶部</button>
</view>

Page({
    /**
     * 页面的初始数据
     */
    data: {
    
    },

    scrollToUpper: function() {
        console.log('触发滚动到顶部事件')
    },

    scrollToLower: function() {
        console.log('触发滚动到底部事件')
    },

    scroll: function() {
        console.log('触发滚动事件')
    },

    scrollToTop: function() {
        this.setData({
            scrollToTop: '0'
        })
    },

    /**
     * 生命周期函数--监听页面加载
     */
    onLoad: function (options) {
        this.setData({
            toView: 'item-4'
        })
    },
})

WXSS

.scroller-container {
    border: solid 1px;
    height: 900rpx;
}

.scroller-item {
    height: 300rpx;
    width: 100%;
}

.bg-blue {
    background-color: #87CEFA;
}

.bg-red {
    background-color: #FF6347;
}

.act {
    padding: 10px;
}

效果如下：

这其中一个问题1. scroll-into-view 的值必须是动态的，通过setData设置后，重新渲染才会有效。如果是静态的，如
scroll-into-view="item2"
，则无效。

最后

有兴趣可以关注公众号QStack，会定期分享一定的文章和免费的学习资源。

原文链接：https://blog.csdn.net/QStack/article/details/123941914

背景