常用的视图容器类组件
view
- 类似与HTML中的
div,是一个块级元素- 常用来实现页面的布局效果
- 普通视图区域
scroll-view
- 可滚动的视图区域
常用来实现滚动列表效果
<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
- 按钮组件
- 功能比HTML中的button按钮丰富
- 通过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
- 图片组件
- image组件默认宽度为
300px、高度为240px
navigator(待补充)
- 页面导航组件
- 类似于HTML中的a链接
text
文本组件,相当于html中的
span标签，它的一个属性selectable可以实现长按选中的效果
rich-text
这个文本组件中具有一个属性:
nodes,nodes中可以写一些视图标签，并且可以直接写一些样式
<rich-text nodes="<h1 style='color:red'>标题</h1>"></rich-text>
