小程序常用组件小结

常用的视图容器类组件

view

1. 类似与HTML中的div,是一个块级元素
2. 常用来实现页面的布局效果
3. 普通视图区域

scroll-view

1. 可滚动的视图区域
2. 常用来实现滚动列表效果

<scroll-view class="container1" scroll-y>
<view>A</view>
<view>B</view>
<view>C</view>
</scroll-view>

.container1 {
    
    /* display: flex; justify-content: space-around; */
    border: 1px solid #ccc;
    width: 100px;
    height: 120px;
}
.container1 view {
    
    width: 100px;
    height: 100px;
    line-height: 100px;
    text-align: center;
}
.container1 view:nth-child(1) {
    
    background-color: lightgreen;
}
.container1 view:nth-child(2) {
    
    background-color: blue;
}
.container1 view:nth-child(3) {
    
    background-color: pink;
}

实现效果如下:

swiper和swiper-item

轮播图容器组件和轮播图item组件

<swiper class="swiper_container" indicator-dots indicator-color="#fff" indicator-active-color="gray" autoplay="true" interval="2000" circular>
    <swiper-item>
        <view class="item">A</view>
    </swiper-item>
    <swiper-item>
        <view class="item">B</view>
    </swiper-item>
    <swiper-item>
        <view class="item">C</view>
    </swiper-item>
</swiper>

.swiper_container {
    
    height: 150px;
}
.item {
    
    height: 100%;
    line-height: 150px;
    text-align: center;
}
swiper-item:nth-child(1) .item {
    
    background-color: green;
}
swiper-item:nth-child(2) .item {
    
    background-color: rgb(68, 227, 248);
}
swiper-item:nth-child(3) .item {
    
    background-color: rgb(233, 35, 134);
}

效果如下:

常用的其他组件

button

1. 按钮组件
2. 功能比HTML中的button按钮丰富
3. 通过open-type属性可以调用微信提供的各种功能(客服、转发、获取用户授权、获取用户信息等)

简单demo：

<rich-text nodes="<h1 style='color:red'>标题</h1>"></rich-text>

<view>~~~~~~~~通过type指定按钮类型~~~~~~~~</view>
<button>普通的按钮</button>
<button type="primary">主色调按钮</button>
<button type="warn">警告按钮</button>

<view>~~~~~~~通过size="mini"小尺寸按钮~~~~~~~</view>
<button size="mini">普通的按钮</button>
<button type="primary" size="mini">主色调按钮</button>
<button type="warn" size="mini">警告按钮</button>

<view>~~~~~~~plain镂空按钮~~~~~~~</view>
<button size="mini" plain>普通的按钮</button>
<button type="primary" size="mini" plain>主色调按钮</button>
<button type="warn" size="mini" plain>警告按钮</button>

image

1. 图片组件
2. image组件默认宽度为300px、高度为240px

navigator(待补充)

1. 页面导航组件
2. 类似于HTML中的a链接

text

文本组件,相当于html中的span标签，它的一个属性selectable可以实现长按选中的效果

rich-text

这个文本组件中具有一个属性:nodes,nodes中可以写一些视图标签，并且可以直接写一些样式

<rich-text nodes="<h1 style='color:red'>标题</h1>"></rich-text>