WEIXIN day_02(8.17)小程序组件库

小程序组件库

小程序中，在wxml中使用组件定义页面的结构。小程序提供了一套组件库。HTML5标签都不能使用。

关于组件的属性

1. 如果组件的属性为boolean类型属性，设置方式如下：

   第一种方式：
   <view hover-stop-propagation>view>   写属性名就是true 不写为默认值
   1
   2

   第二种方式
   {{}}用于引用js字面量，设置boolean类型属性
   <view hover-stop-propagation="{{true}}">view>
   1
   2
   3

2. 在小程序中组件的属性名支持两种命名规则：

   1. 驼峰命名法

      <view hoverStopPropagation="{{true}}">view>
      1

   2. 短横线命名法

      <view hover-stop-propagation="{{true}}">view>
      1

View组件

view组件用于描述一个视图容器。类似html中的div。基本使用方法：

<view class="v1"
      hover-class="v1-hover"
      hover-start-time="50"
      hover-stay-time="400">
  <view class="v2" 
        hoverClass="v2-hover"
        hoverStopPropagation="{{true}}" >view>
view>
1
2
3
4
5
6
7
8

案例：pages/view/view。测试view组件。

https://developers.weixin.qq.com/miniprogram/dev/component/view.html

Image组件

image组件用于描述图片，基本写法：

<image src="图片路径"
       mode="图像的裁切模式"
       lazy-load="是否采用图片懒加载{{true}}"
       show-menu-by-long-press="长按是否显示操作菜单">image>
1
2
3
4

案例：pages/image/image。

小程序中图片的适配

wxss中提供了一个新的单位：rpx（响应式像素）。它可以根据屏幕宽度的不同动态变化。在小尺寸屏幕下100rpx转换的物理像素值比较小，在大尺寸屏幕下100rpx转换的物理像素值比较大。这样就可以动态设置组件的大小。转换规则要保证如下原则：

无论任何屏幕，宽度永远都是750rpx。 （类似100vw）

https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxss.html

swiper组件

swiper组件用于显示轮播图，基本结构：

<swiper indicator-dots="{{true}}"
        indicator-active-color="#0f0c"
        autoplay
        current="2"
        interval="3000"
        duration="500"
        circular
        vertical
        easing-function="default"
        display-multiple-items="1">
	<swiper-item>
    	<image src="...">image>
    swiper-item>
    .....
swiper>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

navigator组件

navigator组件用于跳转页面。基本写法：

<navigator url="/pages/login/login"
           open-type="打开目标页面的方式">点我登录navigator>
1
2

open-type：

1. navigate 默认的跳转方式，保留跳转。这种跳转方式，将会保留当前页，新建目标页，跳转到目标页（非tabar页面）。
2. navigateBack 返回上一页（本质就是销毁当前页，上一页自然而然的就显示出来了）。还可以借助于delta属性，回到上n页。
3. redirect 意为：重定向。这种跳转方式将会销毁当前页，创建目标页，跳转到目标页（非tabbar页面）。
4. switchTab 意为：切换选项卡。这种跳转方式可以跳转到tabbar页面。 但是将会销毁所有非tabbar页面。
5. reLaunch 意为重新启动小程序。这种方式将会销毁所有页面。重新打开新页面。

案例：

pages/a/a

pages/b/b

pages/c/c

ScrollView组件

scrollView组件属于容器类组件，特点是该容器拥有滚动条，并且针对滚动相关行为设计了很多人性化的属性、事件。

<scroll-view scroll-x="{{true}}"
             scroll-y="{{true}}">
	内容...
    内容...
    内容...
    ....
scroll-view>
1
2
3
4
5
6
7

当容器装不下内容时，将会出现水平或垂直方向的滚动条。

案例：pages/scroll/scroll

input 组件

input用于描述文本输入框，属于表单相关组件。基本写法：

<input value="输入框的内容"     
       type="输入框类型：text | idcard | number | digit "
       password   是否为密码框
       placeholder="占位文本"
       disabled  是否禁用
       maxlength   最大长度
       confirm-type="提交类型，控制软键盘右下角按钮样式"/>
1
2
3
4
5
6
7

案例：pages/input/input