目录

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></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重要属性