从0到一开发微信小程序（4）—小程序组件

本文链接：https://blog.csdn.net/zhouhengzhe/article/details/126987076

文章目录

其他相关文章
1、组件

1、组件

1.1、基础视图

小程序中常用的基础视图，有三种，分别是view，text，image
view：视图容器
text：文本
image：图片。支持 JPG、PNG、SVG、WEBP、GIF 等格式，2.3.0 起支持云文件ID。

1.1.1、view

view的显示效果跟div是一样的，我们可以理解为它就是一个html中的div，它属于块级元素

1.1.1.1、属性说明

属性	类型	默认值	必填	说明
hover-class	string	none	否	指定按下去的样式类。当 hover-class=“none” 时，没有点击态效果
hover-stop-propagation	boolean	false	否	指定是否阻止本节点的祖先节点出现点击态
hover-start-time	number	50	否	按住后多久出现点击态，单位毫秒
hover-stay-time	number	400	否	手指松开后点击态保留时间，单位毫秒

注意：如果需要滚动视图，请使用scroll-view
测试代码：
新建一个views页面，在views.wxml中添加：

<view class="container">
  <view class="page-body">
    <view class="page-section">
      <view class="page-section-title">
        <text>flex-direction: row\n横向布局</text>
      </view>
      <view class="page-section-spacing">
        <view class="flex-wrp" style="flex-direction:row;">
          <view class="flex-item demo-text-1">A</view>
          <view class="flex-item demo-text-2">B</view>
          <view class="flex-item demo-text-3">C</view>
        </view>
      </view>
    </view>
  </view>
</view>

展示效果：
在这里插入图片描述

1.1.2、text

文本，承载页面文本信息，类似span的功能

<text>文本1</text>
<text>文本2</text>

text 是行内元素
温馨提示：

text 组件内只支持 text 嵌套
除了文本节点以外的其他节点都无法长按选中

1.1.3、image

图片。支持 JPG、PNG、SVG、WEBP、GIF 等格式

属性	类型	默认值	必填	说明
src	string		否	图片资源地址
mode	string	scaleToFill	否	图片裁剪、缩放的模式
webp	boolean	false	否	默认不解析 webP 格式，只支持网络资源
lazy-load	boolean	false	否	图片懒加载，在即将进入一定范围（上下三屏）时才开始加载
show-menu-by-longpress	boolean	false	否	长按图片显示发送给朋友、收藏、保存图片、搜一搜、打开名片/前往群聊/打开小程序（若图片中包含对应二维码或小程序码）的菜单。
binderror	eventhandle		否	当错误发生时触发，event.detail = {errMsg}
bindload	eventhandle		否	当图片载入完毕时触发，event.detail = {height, width}

在上面中，model的属性值又有很多种

合法值	说明
scaleToFill	缩放模式，不保持纵横比缩放图片，使图片的宽高完全拉伸至填满 image 元素
aspectFit	缩放模式，保持纵横比缩放图片，使图片的长边能完全显示出来。也就是说，可以完整地将图片显示出来。
aspectFill	缩放模式，保持纵横比缩放图片，只保证图片的短边能完全显示出来。也就是说，图片通常只在水平或垂直方向是完整的，另一个方向将会发生截取。
widthFix	缩放模式，宽度不变，高度自动变化，保持原图宽高比不变
heightFix	缩放模式，高度不变，宽度自动变化，保持原图宽高比不变
top	裁剪模式，不缩放图片，只显示图片的顶部区域
bottom	裁剪模式，不缩放图片，只显示图片的底部区域
center	裁剪模式，不缩放图片，只显示图片的中间区域
left	裁剪模式，不缩放图片，只显示图片的左边区域
right	裁剪模式，不缩放图片，只显示图片的右边区域
top left	裁剪模式，不缩放图片，只显示图片的左上边区域
top right	裁剪模式，不缩放图片，只显示图片的右上边区域
bottom left	裁剪模式，不缩放图片，只显示图片的左下边区域
bottom right	裁剪模式，不缩放图片，只显示图片的右下边区域

show-menu-by-longpress的属性值对应的字段信息为：

支持长按识别的码

类型	说明
小程序码
微信个人码
企业微信个人码
普通群码	指仅包含微信用户的群
互通群码	指既有微信用户也有企业微信用户的群
公众号二维码

提示：

image组件默认宽度320px、高度240px
image组件中二维码/小程序码图片不支持长按识别。仅在 wx.previewImage 中支持长按识别
image组件进行缩放时，计算出来的宽高可能带有小数，在不同 webview 内核下渲染可能会被抹去小数部分

测试代码：
新增一个页面：image-view，然后在image-view.js中添加

Page({
  data: {
    array: [{
      mode: 'scaleToFill',
      text: 'scaleToFill：不保持纵横比缩放图片，使图片完全适应'
    }, {
      mode: 'aspectFit',
      text: 'aspectFit：保持纵横比缩放图片，使图片的长边能完全显示出来'
    }, {
      mode: 'aspectFill',
      text: 'aspectFill：保持纵横比缩放图片，只保证图片的短边能完全显示出来'
    }, {
      mode: 'top',
      text: 'top：不缩放图片，只显示图片的顶部区域'
    }, {
      mode: 'bottom',
      text: 'bottom：不缩放图片，只显示图片的底部区域'
    }, {
      mode: 'center',
      text: 'center：不缩放图片，只显示图片的中间区域'
    }, {
      mode: 'left',
      text: 'left：不缩放图片，只显示图片的左边区域'
    }, {
      mode: 'right',
      text: 'right：不缩放图片，只显示图片的右边边区域'
    }, {
      mode: 'top left',
      text: 'top left：不缩放图片，只显示图片的左上边区域'
    }, {
      mode: 'top right',
      text: 'top right：不缩放图片，只显示图片的右上边区域'
    }, {
      mode: 'bottom left',
      text: 'bottom left：不缩放图片，只显示图片的左下边区域'
    }, {
      mode: 'bottom right',
      text: 'bottom right：不缩放图片，只显示图片的右下边区域'
    }],
    src: 'https://res.wx.qq.com/wxdoc/dist/assets/img/0.4cb08bb4.jpg'
  },
  imageError: function(e) {
    console.log('image3发生error事件，携带值为', e.detail.errMsg)
  }
})

在image-view.wxml中添加

<view class="page">
  <view class="page__hd">
    <text class="page__title">image</text>
    <text class="page__desc">图片</text>
  </view>
  <view class="page__bd">
    <view class="section section_gap" wx:for="{{array}}" wx:for-item="item">
      <view class="section__title">{{item.text}}</view>
      <view class="section__ctn">
        <image style="width: 200px; height: 200px; background-color: #eeeeee;" mode="{{item.mode}}" src="{{src}}"></image>
      </view>
    </view>
  </view>
</view>

展示效果：
在这里插入图片描述

1.2、滑件视图容器Swiper（焦点轮播图）

Swiper常用属性说明：

属性	类型	默认值	必填	说明
indicator-dots	boolean	false	否	是否显示面板指示点
indicator-color	color	rgba(0, 0, 0, .3)	否	指示点颜色
indicator-active-color	color	#000000	否	当前选中的指示点颜色
autoplay	boolean	false	否	是否自动切换
interval	number	5000	否	自动切换时间间隔
duration	number	500	否	滑动动画时长
circular	boolean	false	否	是否采用衔接滑动
vertical	boolean	false	否

滑动视图相信大家应该看过，往左右拉的那种图吧，我们来实现一版，
简单版：新建一个swiper页面，再swiper.wxml中添加

<!-- swiper.wxml -->
<view>
  <swiper class="swiper">
    <swiper-item>
      <image mode="widthFix" src="../../images/1.jpg"></image>
    </swiper-item>
    <swiper-item>
      <image mode="widthFix" src="../../images/2.jpg"></image>
    </swiper-item>
    <swiper-item>
      <image mode="widthFix" src="../../images/3.jpg"></image>
    </swiper-item>
  </swiper>
</view>

在swiper.wxss中添加：（同时设置图片样式充满全屏，因为图片默认大小：宽度320px、高度240px）

/* swiper.wxss */
image{
  width: 100%;
}

展示效果：
在这里插入图片描述

一直向右拉，依次会出现1.jpg,2.jpg,3.jpg的图
复杂版：自动每隔5秒向下换图，新建页面swiper-complex，其中swiper-complex.wxml中添加

<!-- swiper-complex.wxml -->
<view>
  <swiper 
  class="swiper"
  indicator-dots="{{ swiperOptions.indicatorDots }}"
  indicator-color="{{ swiperOptions.indicatorColor }}"
  indicator-active-color="{{ swiperOptions.indicatorActiveColor }}"
  autoplay="{{ swiperOptions.autoplay }}"
  interval="{{ swiperOptions.interval }}"
  duration="{{ swiperOptions.duration }}"
  circular="{{ swiperOptions.circular }}"
  vertical="{{ swiperOptions.vertical }}"
  >
    <swiper-item>
      <image mode="widthFix" src="../../images/1.jpg"></image>
    </swiper-item>
    <swiper-item>
      <image mode="widthFix" src="../../images/2.jpg"></image>
    </swiper-item>
    <swiper-item>
      <image mode="widthFix" src="../../images/3.jpg"></image>
    </swiper-item>
  </swiper>
</view>

swiper-complex.js中添加

// swiper-complex.js
Page({
  data: {
    swiperOptions:{
      indicatorDots:true,
      indicatorColor:"#fff",
      indicatorActiveColor:"#f00",
      autoplay:true,
      interval:5000,
      duration:1000,
      circular:true,
      vertical:true
     }
   }
})

1.3、滚动视图区域(scroll-view)

功能描述

可滚动视图区域。使用竖向滚动时，需要给scroll-view一个固定高度，通过 WXSS 设置 height。组件属性的长度单位默认为px，2.4.0起支持传入单位(rpx/px)。

属性说明：

属性	类型	默认值	必填	说明
scroll-x	boolean	false	否	允许横向滚动
scroll-y	boolean	false	否	允许纵向滚动
upper-threshold	number/string	50	否	距顶部/左边多远时，触发 scrolltoupper 事件
lower-threshold	number/string	50	否	距底部/右边多远时，触发 scrolltolower 事件
scroll-top	number/string		否	设置竖向滚动条位置
scroll-left	number/string		否	设置横向滚动条位置
scroll-into-view	string		否	值应为某子元素id（id不能以数字开头）。设置哪个方向可滚动，则在哪个方向滚动到该元素
scroll-with-animation	boolean	false	否	在设置滚动条位置时使用动画过渡
enable-back-to-top	boolean	false	否	iOS点击顶部状态栏、安卓双击标题栏时，滚动条返回顶部，只支持竖向
enable-flex	boolean	false	否	启用 flexbox 布局。开启后，当前节点声明了 `display: flex` 就会成为 flex container，并作用于其孩子节点。
scroll-anchoring	boolean	false	否	开启 scroll anchoring 特性，即控制滚动位置不随内容变化而抖动，仅在 iOS 下生效，安卓下可参考 CSS `overflow-anchor` 属性。
enable-passive	boolean	false	否	开启 passive 特性，能优化一定的滚动性能
refresher-enabled	boolean	false	否	开启自定义下拉刷新
refresher-threshold	number	45	否	设置自定义下拉刷新阈值
refresher-default-style	string	“black”	否	设置自定义下拉刷新默认样式，支持设置 `black \| white \| none`， none 表示不使用默认样式
refresher-background	string	“#FFF”	否	设置自定义下拉刷新区域背景颜色
refresher-triggered	boolean	false	否	设置当前下拉刷新状态，true 表示下拉刷新已经被触发，false 表示下拉刷新未被触发
enhanced	boolean	false	否	启用 scroll-view 增强特性，启用后可通过 ScrollViewContext
操作 scroll-view
bounces	boolean	true	否	iOS 下 scroll-view 边界弹性控制 (同时开启 enhanced 属性后生效)
show-scrollbar	boolean	true	否	滚动条显隐控制 (同时开启 enhanced 属性后生效)
paging-enabled	boolean	false	否	分页滑动效果 (同时开启 enhanced 属性后生效)
fast-deceleration	boolean	false	否	滑动减速速率控制 (同时开启 enhanced 属性后生效)
binddragstart	eventhandle		否	滑动开始事件 (同时开启 enhanced 属性后生效) detail { scrollTop, scrollLeft }
binddragging	eventhandle		否	滑动事件 (同时开启 enhanced 属性后生效) detail { scrollTop, scrollLeft }
binddragend	eventhandle		否	滑动结束事件 (同时开启 enhanced 属性后生效) detail { scrollTop, scrollLeft, velocity }
bindscrolltoupper	eventhandle		否	滚动到顶部/左边时触发
bindscrolltolower	eventhandle		否	滚动到底部/右边时触发
bindscroll	eventhandle		否	滚动时触发，event.detail = {scrollLeft, scrollTop, scrollHeight, scrollWidth, deltaX, deltaY}
bindrefresherpulling	eventhandle		否	自定义下拉刷新控件被下拉
bindrefresherrefresh	eventhandle		否	自定义下拉刷新被触发
bindrefresherrestore	eventhandle		否	自定义下拉刷新被复位
bindrefresherabort	eventhandle		否	自定义下拉刷新被中止

测试代码：
新建一个页面score-view，在score-view.js中添加

const order = ['demo1', 'demo2', 'demo3']

Page({
  onShareAppMessage() {
    return {
      title: 'scroll-view',
      path: '/pages/scroll-view/scroll-view'
    }
  },

  data: {
    toView: 'green'
  },

  upper(e) {
    console.log(e)
  },

  lower(e) {
    console.log(e)
  },

  scroll(e) {
    console.log(e)
  },

  scrollToTop() {
    this.setAction({
      scrollTop: 0
    })
  },

  tap() {
    for (let i = 0; i < order.length; ++i) {
      if (order[i] === this.data.toView) {
        this.setData({
          toView: order[i + 1],
          scrollTop: (i + 1) * 200
        })
        break
      }
    }
  },

  tapMove() {
    this.setData({
      scrollTop: this.data.scrollTop + 10
    })
  }
})

score-view.wxml中添加

<view class="container">
  <view class="page-body">
    <view class="page-section">
      <view class="page-section-title">
        <text>Vertical Scroll\n纵向滚动</text>
      </view>
      <view class="page-section-spacing">
        <scroll-view scroll-y="true" style="height: 300rpx;" bindscrolltoupper="upper" bindscrolltolower="lower" bindscroll="scroll" scroll-into-view="{{toView}}" scroll-top="{{scrollTop}}">
          <view id="demo1" class="scroll-view-item demo-text-1"></view>
          <view id="demo2"  class="scroll-view-item demo-text-2"></view>
          <view id="demo3" class="scroll-view-item demo-text-3"></view>
        </scroll-view>
      </view>
    </view>
    <view class="page-section">
      <view class="page-section-title">
        <text>Horizontal Scroll\n横向滚动</text>
      </view>
      <view class="page-section-spacing">
        <scroll-view class="scroll-view_H" scroll-x="true" bindscroll="scroll" style="width: 100%">
          <view id="demo1" class="scroll-view-item_H demo-text-1"></view>
          <view id="demo2"  class="scroll-view-item_H demo-text-2"></view>
          <view id="demo3" class="scroll-view-item_H demo-text-3"></view>
        </scroll-view>
      </view>
    </view>
  </view>
</view>

score-view.wxss中添加

.page-section-spacing{
  margin-top: 60rpx;
}
.scroll-view_H{
  white-space: nowrap;
}
.scroll-view-item{
  height: 300rpx;
}
.scroll-view-item_H{
  display: inline-block;
  width: 100%;
  height: 300rpx;
}

展示效果：
在这里插入图片描述

1.4、图标(icon)

图标组件,其实就是字体图标效果，但是这里所提供的只有最常用的几个。
图标的使用方式为：

<icon type="xxx"></icon>

字体图标属性为：

属性	类型	默认值	必填	说明
type	string		是	icon的类型，有效值：success, success_no_circle, info, warn, waiting, cancel, download, search, clear
size	number/string	23	否	icon的大小，单位默认为px，2.4.0起支持传入单位(rpx/px)，2.21.3起支持传入其余单位(rem 等)。
color	string		否	icon的颜色，同 css 的color

新建一个页面icon，其中icon.wxml中添加：

<icon type="success" size="50" color="red"></icon>
<icon type="success_no_circle" size="50"></icon>
<icon type="info" size="50"></icon>
<icon type="warn" size="50"></icon>
<icon type="waiting" size="50"></icon>
<icon type="cancel" size="50"></icon>
<icon type="download" size="50"></icon>
<icon type="search" size="50"></icon>
<icon type="clear" size="50"></icon>

展示效果为：
在这里插入图片描述

1.5、表单(form )

表单，将用户输入的信息提交到服务器
小程序的表单与html的表单基本一致
表单页面随处可见，比如：登录，注册，信息修改，添加等

我们这里拿一个常用的登录页面来说：

我们实现一个简单的登录注册，一般需要三个组件：
- form 表单
- button 按钮
- input 输入框

新建一个页面login,在login.wxml中添加：

<view class="login">
  <form>
    <input placeholder="请输入用户名" />
    <input placeholder="请输入密码" />
    <button type="primary">登录</button>
  </form>
</view>

在login.wxss中添加

.login{
  margin-top: 100rpx;
}
input{
  border: 1px solid #999;
  border-radius: 5px;
  margin: 10px;
  padding-left: 10px;
  height: 70rpx;
}

展示效果为：
在这里插入图片描述

1.6、按钮(button)

小程序的 button 按钮与 html 的非常类似，但是小程序的功能要更强大一些

使用形式：

<button>按钮</button>

按钮属性：

属性	类型	默认值	必填	说明
type	string	default	否	按钮的样式类型
size	string	default	否	按钮的大小
plain	boolean	false	否	按钮是否镂空，背景色透明
disabled	boolean	false	否	是否禁用
loading	boolean	false	否	名称前是否带 loading 图标
form-type	string		否	用于 form组件，点击分别会触发form组件的 submit/reset 事件

其中type属性又分为：

合法值	说明
primary	绿色
default	白色
warn	红色

size属性分为：

合法值	说明
default	默认大小
mini	小尺寸

测试代码：

<button>按钮</button>
<button type="default">按钮</button>
<button type="primary">按钮</button>
<button type="warn">按钮</button>
<button type="primary" size="default">按钮</button>
<button type="primary" size="mini">按钮</button>
<button type="primary" plain>按钮</button>
<button type="primary" disabled>按钮</button>
<button type="primary" loading>按钮</button>
<button type="primary" form-type="submit">按钮</button>

展示效果：
在这里插入图片描述

1.7、输入框(input)

输入框是input, 与html的输入框类似，但是增加了很多新的功能

使用形式：

<input/>

属性说明：

属性	类型	默认值	必填	说明
value	string		是	输入框的初始内容
placeholder	string		是	输入框为空时占位符
password	boolean	false	否	是否是密码类型
disabled	boolean	false	否	是否禁用
maxlength	number	140	否	最大输入长度，设置为 -1 的时候不限制最大长度
focus	boolean	false	否	获取焦点
type	string	text	否	input 的类型
confirm-type	string	done	否	设置键盘右下角按钮的文字，仅在type='text’时生效

type 属性详解

合法值	说明
text	文本输入键盘
number	数字输入键盘
idcard	身份证输入键盘
digit	带小数点的数字键盘
nickname	昵称输入键盘

confirm-type属性详解

合法值	说明
send	右下角按钮为“发送”
search	右下角按钮为“搜索”
next	右下角按钮为“下一个”
go	右下角按钮为“前往”
done	右下角按钮为“完成”

测试代码：

<input />
<input value="测试信息"/>
<input placeholder="请输入用户名"/>
<input placeholder="请输入密码" password/>
<input placeholder="请输入密码" disabled/>
<input placeholder="文本" maxlength="10"/>
<input placeholder="文本" focus/>
<input placeholder="文本" type="text"/>
<input placeholder="文本" type="number"/>
<input placeholder="文本" type="idcard"/>
<input placeholder="文本" type="digit"/>
<input placeholder="文本" type="nickname"/>
<input placeholder="文本" type="text" confirm-type="send"/>
<input placeholder="文本" type="text" confirm-type="search"/>
<input placeholder="文本" type="text" confirm-type="next"/>
<input placeholder="文本" type="text" confirm-type="go"/>
<input placeholder="文本" type="text" confirm-type="done"/>

input{
  border: 1px solid #999;
  height: 80rpx;
  margin: 10px;
  padding-left: 10px;
}

展示效果：
在这里插入图片描述

1.8、picker(滚动选择器)

选择器的种类有很多，分别为：
1. 普通选择器
2. 多列选择器
3. 时间选择器
4. 日期选择器
5. 省市区选择器