微信小程序一些常用的组件浅讲

阿洋的小窝
268 阅读3分钟

持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第20天，点击查看活动详情

1.常用组件

1)view

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

2) scroll-view

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

例子:

wxml结构

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

scroll-y: y轴自适应

wxss样式

.container{
  border: 1px solid #000;
  height: 120px;
  width: 100%;
}
​
.container view:nth-child(2n){
  height: 100px;
  width: 100px;
  background-color: pink;
}
.container view:nth-child(2n-1){
  height: 100px;
  width: 100px;
  background-co

效果: 在框中出现滑条,拉取下面内容, 注意给container固定高度

image.png

3) swiper 和 swiper-item

轮播图容器组件 和 轮播图 item 组件 部分属性:

image.png

4)text

文本组件 类似于 HTML 中的 span 标签，是一个行内元素

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

<text selectable>这是一条长按可复制的文字</text>

image.png

5)rich-text

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

<rich-text nodes="<h5>哈哈哈</h5>"></rich-text>

nodes里面可以放富文本标签,能解析成标签:

image.png

6)button

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

通过type 指定按钮类型;

通过size 控制按尺寸

通过plain 控制按钮是否镂空

image.png

7)image

图片组件 image 组件默认宽度约 300px、高度约 240px

image 组件的 mode 属性用来指定图片的裁剪和缩放模式，常用的 mode 属性值如下：

image.png

8).navigator

① 声明式导航 在页面上声明一个 导航组件 通过点击 组件实现页面跳转

② 编程式导航 调用小程序的导航 API，实现页面的跳转

导航到 tabBar 页面

tabBar 页面指的是被配置为 tabBar 的页面。 在使用 组件跳转到指定的 tabBar 页面时，需要指定 url 属性和 open-type 属性，其中：

  • url 表示要跳转的页面的地址，必须以 / 开头
  • open-type 表示跳转的方式，必须为 switchTab

示例代码:

<navigator url="/pages/index/index" open-type="switchTab">
导航到首页
</navigator>
导航到非 tabBar 页面

非 tabBar 页面指的是没有被配置为 tabBar 的页面。 在使用 组件跳转到普通的非 tabBar 页面时，则需要指定 url 属性和 open-type 属性，其中：

  • url 表示要跳转的页面的地址，必须以 / 开头
  • open-type 表示跳转的方式，必须为 navigate

示例代码:

<navigator url="/pages/movie/movie" open-type="navigate">
导航到movie
</navigator>

为了简便，在导航到非 tabBar 页面时，open-type="navigate" 属性可以省略

后退导航

如果要后退到上一页面或多级页面，则需要指定 open-type 属性和 delta 属性，其中：

  • open-type 的值必须是 navigateBack，表示要进行后退导航
  • delta 的值必须是数字，表示要后退的层级

示例代码:

<navigator open-type="navigateBack" delta="1">返回上一页</navigator>

为了简便，如果只是后退到上一页面，则可以省略 delta 属性，因为其默认值就是 1。

导航传参

navigator 组件的 url 属性用来指定将要跳转到的页面的路径。同时，路径的后面还可以携带参数：

  • 参数与路径之间使用 ? 分隔
  • 参数键与参数值用 = 相连
  • 不同参数用 & 分隔

示例代码:

<navigator url="/pages/movie/movie?id=1&name=哪吒" open-type="navigate">
导航到movie
</navigator>
avatar
文章
阅读
粉丝