『微信小程序从0到1』常用组件

🐱‍🐉🐱‍🐉🐱‍🐉 请乘理想之马，挥鞭从此起程，路上春色正好，天上太阳正晴🐾🐾🐾

🌈博客主页👉白小筠

常见的视图容器类组件

1、view

• 普通视图区域
• 类似于HTML中的div，是一个块级元素
• 常用来实现页面的布局效果

2、scroll-view

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

3、swiper和swiper-item

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

view组件的基本使用

实现效果：

实现步骤：
list.wxml

<view class="container1">
<view>A</view>
<view >B</view>
<view>C</view>
</view>

编辑样式在list.wxss

.container1 view{
  width: 100px;
  height: 100px;
  text-align: center;
  line-height: 100px;
}
.container1 view:nth-child(1){
  background-color: limegreen;
}
.container1 view:nth-child(2){
  background-color: lightblue;
}
.container1 view:nth-child(3){
  background-color: lightpink;
}
.container1{
  /* 横向对齐 */
display: flex;
justify-content: space-around;
}

实现纵向滚动效果

效果展示：

实现步骤：

1、设置scroll-y="true“

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

2、设置高度
需要设置高度，要不然页面不会显示滚动条

.container1{
border: 1px solid red;
width: 100px;
height: 120px;
}

实现轮播图

<swiper class="swiper-container">
<!-- 第一个轮播图 -->
<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: lightblue;
}

swiper-item:nth-child(2) .item{
  background-color: red;
}
swiper-item:nth-child(3) .item{
  background-color: seashell;
}

swiper组件的常用属性

1、indicator-dots属性

<swiper class="swiper-container" indicator-dots>

让轮播图出现小点

效果展示：

2、indicator-color指示点颜色

<swiper class="swiper-container" indicator-dots indicator-color="white" >

效果展示

3、indicator-active-color被激活的小圆点的颜色

<swiper class="swiper-container" indicator-dots indicator-color="white" indicator-active-color="red" >

4、autoplay：自动切换默认5秒

<swiper class="swiper-container" indicator-dots indicator-color="white" indicator-active-color="red" autoplay="true" >

5、interval 自定义切换时间

<swiper class="swiper-container" indicator-dots indicator-color="white" indicator-active-color="red" autoplay="true" interval="3000">

6、circulars是否采用衔接滑动

<swiper class="swiper-container" indicator-dots indicator-color="white" indicator-active-color="red" autoplay="true" interval="3000"
circular="true"
>

常用的基础组件内容

1、text组件的selectable的属性，实现长按选中文本内容的效果

需要使用真机调试查看效果

<view>
手机号支持长按选中效果
<text selectable="true">13800005056</text>
</view>

2、rich-text组件的nodes属性节点，把HTML字符串渲染为对应的UI结构

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

效果展示：

3、button组件

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

通过type指定按钮类型

<button>普通按钮</button>
<button type="primary">主色调按钮</button>
<button type="warn">警告按钮</button>

通过size属性指定按钮的大小

<button type="primary" size="mini">主色调按钮</button>

通过plain设置镂空按钮

<button type="warn" plain="true">警告按钮</button>

效果展示：

4、image组件

图片组件

<image src="../../img/98a9325291aa481ca0d9d5df8910771b.jpg">

</image>

image{
  border: 1px solid;
}

image组件中通过model属性指定图片的裁剪和缩放模式，常用的model下属性如下

name	function
scaleToFill	宽高同时拉伸，填充满整个image
aspectFit	以最长边为准进行缩放，显示出整个图片
aspectFitll	以最短边为准进行缩放，显示去掉长边不在比例内部分后的图片
heightFix	高度不变，宽度自动变化，保持原图宽高比不变
widthFix	宽度不变，高度自动变化，保持原图宽高比例