miniProgram

常用组件

view

• view
  • 普通视图区域
  • 类似于div的一个块级元素
  • 常用来实现页面的布局效果
• scroll-view
  • 可滚动的视图区域
  • 常用来实现滚动列表效果
• swiper 和 swiper-item
  • 轮播图容器组件和item组件

轮播图代码示例：

1
2
3
4
5
6
7
8
9
10
11

<swiper class="swiper-container" indicator-color="white" indicator-dots autoplay interval="1000" 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>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

/* pages/list/list.wxss */
.swiper-container{
  height: 150px;
}

.item{
  height: 100%;
  line-height: 150px;
  text-align: center;
}

swiper-item:nth-child(1) .item{
  background-color: lightgreen;
}
swiper-item:nth-child(2) .item{
  background-color: lightblue;
}
swiper-item:nth-child(3) .item{
  background-color: lightpink;
}

text rich-text

text:通过text组件的selectable属性，实现长按选中文本内容的效果
rich-text:通过rich-text组件的nodes属性节点，把html字符串渲染为对应的UI结构：

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

button

• 按钮组件
• 功能比HTML中的button丰富
• 通过open-type属性可以调用微信提供的各种功能（客服、转发、获取用户授权、获取用户信息等）
• 通过type属性更改（基础、主色调、警告）按钮、
• 通过size=”mini”可将按钮改为小尺寸按钮
• 通过添加plian属性改为镂空按钮

image

• 图片组件
• 默认宽度约300px,高度240px