微信小程序基本组件使用介绍

目录

1、视图容器 view

2、滚动视图容器 scroll-view

3.轮播图 swiper&swiper-item

 4.文本组件text&富文本组件rich-text

5.按钮组件button

6.图片组件image

---

1、视图容器 view

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

  

页面结构：

<!--pages/view/view.wxml-->
<view class="container1">
      <view>A</view>
      <view>B</view>
      <view>C</view>
</view>

 页面样式：

/* pages/view/view.wxss */
.container1 view{
    width: 100px;/*盒子的宽度与高度*/
    height: 100px;
    text-align: center;/*居中显示*/
    line-height: 100px; /*文本的行间距*/
}
.container1 view:nth-child(1){
    background-color:lightcoral;/*设置子块的背景颜色*/
}
.container1 view:nth-child(2){
    background-color: lightgreen;
}
.container1 view:nth-child(3){
    background-color: magenta;
}
.container1{
    display: flex;/*盒子横向布局*/
    justify-content: space-around;/*分散布局*/
}

2、滚动视图容器 scroll-view

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

 

 页面结构：

<!--pages/view/view.wxml-->
<!-- scroll-x 横向滚动 scroll-y 纵向滚动 -->
<scroll-view class="container1" scroll-y>
      <view>A</view>
      <view>B</view>
      <view>C</view>
</scroll-view>

页面样式：

/* pages/view/view.wxss */
.container1 view{
    width: 100px;/*盒子的宽度与高度*/
    height: 100px;
    text-align: center;/*居中显示*/
    line-height: 100px; /*文本的行间距*/
}
.container1 view:nth-child(1){
    background-color:lightcoral;/*设置子块的背景颜色*/
}
.container1 view:nth-child(2){
    background-color: lightgreen;
}
.container1 view:nth-child(3){
    background-color: magenta;
}
.container1{
    /*包裹滚动列表的边框线及其宽度*/
   border :1px solid red;
   width: 100px;
   /*给其强制限定一个高度，超过该高度的部分将进行滚动显示*/
    height: 130px; 

}

3.轮播图 swiper&swiper-item

• 滑块视图容器
• 可内置swiper-item组件
• 一般用来实现图片的自动播放展示（这里以view块代替展示）

 页面结构：

<!--pages/swiper/swiper.wxml-->
<text>轮播图效果展示</text>
<!-- 轮播图的结构 ，最外层为包裹性容器-->
<swiper class="swiper-container" indicator-dots indicator-color="white" autoplay 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>

页面样式：

/* pages/swiper/swiper.wxss */
.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: lightgreen;
}
.swiper-item:nth-child(3) .item{
    background-color: lightseagreen;
}

一些其它常用属性

 4.文本组件text&富文本组件rich-text

• text类似于HTML中的span标签，是一个行内元素
• text可实现长按选中复制的功能（只能使用text）
• rich-text可以通过nodes属性节点，把HTML字符串渲染成对应的UI结构

 页面结构：

<!--文本text与富文本rich-text的演示-->
<text>文本text：</text>
<view>
手机号支持长按选中效果：
<!-- selectable属性表示文本可长按被选中，且只有在text标签中才有效 -->
<text selectable>1234567896</text>
</view>
<text>富文本rich-text：</text>
<rich-text nodes="<h1 style='color:red;'>hello world</h1>"></rich-text>

属性

 

5.按钮组件button

• 其功能比HTML中的button丰富
• 可以通过open-type属性可以调用微信提供的各种功能（客服、转发、获取用户的授权、获取用户信息、打开定位服务等）

 页面结构：

<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>

属性

 

6.图片组件image

• 用于展示图片元素
• 组件默认的宽度约为300px，高度约为240px

 页面结构：

<!--pages/image/image.wxml-->
<text>添加图片演示</text>
<!-- heightFix高度固定，宽度自适应填满边框区域 -->
<image src="/images/2.jfif" mode="heightFix"></image>
<!-- widthFix宽度固定，高度自适应填满边框区域 -->
<image src="/images/2.jfif" mode="widthFix"></image>   

属性

 

image mode重要属性