【平头哥Sipeed LicheeRV 86 Panel测评】- 6 waft-ui 组件测试（3）

我爱下载

【平头哥Sipeed LicheeRV 86 Panel测评】- 6 waft-ui 组件测试（3） [复制链接]

 

Waft-UI组件学习（3）

接着之前waft-UI中组件的测试，本次继续测试timepicker，cell-group和cell。

1、timepicker组件的学习

Waft-UI中提供了timepicker组件，timepicker组件是为起止实现选择而设计的特定的组件。

1.1 组件的调用方法

      在index.json中增加button组件的引用，方法为：

{
  "usingComponents": {
       "x-time-picker": "waft-ui/assembly/time-picker/time-picker"
  }
}

1.2 timepicker的显示

在index.axml文件中，增加显示脚本。

  <view class="flex">
    <x-button text="显示时间选择器" onTap="clickTimeButton" type="secondary"></x-button>
  </view>
  <view class="flex">
     <x-time-picker
            show="{{ showTimePicker }}"
            onConfirm="onConfirm"
            onCancel="onCancel"
            onChange="handleChange"
        >
    </x-time-picker>
  </view>

实际显示效果

1.3 timepicker的事件响应

在index.ts中编写timepicker的事件响应函数，timepicker和picker相同，提供了三个事件响应，一个是change事件，一个确认，一个取消。

  onConfirm(e: Event): void {
    console.log("===test-picker的onConfirm事件===");
    this.setState(
      JSON.parseObject(`{"showTimePicker":false}`)
    );
  }

  onCancel(e: Event): void {
    console.log("===test-picker的onCancel事件===");
    this.setState(
      JSON.parseObject(`{"showTimePicker":false}`)
    );
  }

  handleChange(e: Event): void {
    console.log("===test-picker的handleChange事件===");
    console.log(e.toString());
  }

  clickTimeButton(e: Event): void {
    this.setState(
      JSON.parseObject(`{"showTimePicker":true}`)
    );
  }

事件的响应结果展示

滚动选项列表时的事件信息。

按下确定按键时的响应信息，信息中含有当前选中信息索引和值。

按下取消键时的响应信息，信息中也含有当前选中信息索引和值。这个需要通过程序去判断，是否取用当前的返回值。

2、cell-group和cell组件的学习

Waft-UI中提供了cell-group和cell组件，这个组件是一个表格组件，cell为单元格，cell-group中包含多条cell组件，构成一个表格性质展示关系。

2.1 组件的调用方法

      在index.json中增加card组件的引用，方法为：

{
  "usingComponents": {
         "x-cell-group": "waft-ui/assembly/cell-group/cell-group",
         "x-cell": "waft-ui/assembly/cell/cell",
  }
}

2.2 cell-group和cell组件的显示

在index.axml文件中添加card组件的显示部分，可以为card组件设置标题，调整宽度和长度，背景色，相当的灵活。

     

<view class="wrapper">
  <x-nav-bar showArrow="{{true}}" title="Cell-Group"></x-nav-bar>
  <view style="height: 30rpx"></view>
  <x-cell-group>
    <view>
      <x-cell title="登录账号" value="天猫精灵" size="small" align="left" labelWidth="160" border="{{false}}" titleColor="#7282A3"></x-cell>
      <x-cell title="绑定手机" value="138********" size="small" align="left" labelWidth="160" border="{{false}}" titleColor="#7282A3"></x-cell>
      <x-cell title="服务地址" value="浙江省杭州市xxxxxx" size="small" align="left" labelWidth="160" border="{{false}}" titleColor="#7282A3"></x-cell>
    </view>
  </x-cell-group>
</view>

 

实际显示效果

2.3 timepicker的事件响应

在index.ts中编写cell的事件响应函数，cell-group自身没有响应事件。   

this.addEventListener("cellclick", (event, target) => {
      console.log("===test-cell的onTap事件===");
    })

事件响应情况：

 

lugl4313820

这个跟微信小程里面的角本差不多呀。js的吗？