quickapp_快应用_快应用组件

快应用组件

快应用不支持原生HTML(若是使用原生html直接不显示！)，开发快应用只能使用快应用组件和基于快应用组件封装的组件；

在开发快应用时只能使用快应用组件～比如div、text…

tips: 在使用快应用组件时需要关注组件支持的样式、事件以及是否能存放文本！

举例说明

接受子组件
接受的样式
是否支持存放文本
检查

当渲染结果和自己想象的不同时可以直接查看官网文档说明。

也可在控制台输出里面查看提示

常用的快应用组件

常用总结

[1] 文本必须包裹在span/a/text组件中，否则不显示
[2] span必须作为text/a/span组件的子组件，否则不显示；

web组件

list组件

tips: list-item组件的type属性必填且type相同的list-item组件的DOM结构需要完全一致，不然会出现问题(如list不滚动)

error-快应用预览版打不开

当前项目没有任何问题，点击在线更新可以打开快应用预览版进行查看。

此时我新建一个页面，在manifest.json中将该页面作为首页，在通过预览版查看时发现一只报错快应用预览版本屡次停止运行，如下
在这里插入图片描述
原因竟然是因为我在使用list组件时子组件没有使用list-item组件

<template>
  <list class='middle'>
    <div class='banner' type='banner'>
      <text>11111</text>
    </div>
  </list>
</template>

把div组件换成list-item之后就可以正常预览了！！！！

好坑～错误没有提示

refresh组件

很多时候需要下拉刷新页面，在快应用中进行下拉刷新的组件是refresh组件。

语法

<refresh offset="142px" refreshing="{
     
     {refreshLoad}}" onrefresh="refreshPage">
</refresh>

async refreshPage(){
    
    
   this.refreshLoad = true // 刷新loading
   await this.init() // init里面是刷新执行逻辑
   this.refreshLoad = false
}

error-使用refresh组件会改变页面高度！

现在页面DOM结构如下

<template>
  <div class='page'>
    <div class='top'></div>
    <div class='bottom'></div>
  </div>
</template>

<style lang='less'>
  .page{
      
      
    flex-direction: column;
    .top{
      
      
      width: 100%;
      height: 1000px;
      background-color: red;
    }
    .bottom{
      
      
      width: 100%;
      height: 2000px;
      background-color: #00ffff;
    }
  }
</style>

现在页面的整体高度为3000px(超过屏幕宽度)，此时屏幕可以滑动。

此时使用refresh组件包裹整个页面，但是样式不做任何变化

<template>
  <refresh class='page'>
    <div class='top'></div>
    <div class='bottom'></div>
  </refresh>
</template>

此时发现页面的高度变为手机屏幕的高度！此时页面不可以滑动，并且页面内容的高度等比例压缩。

那如果既想要下拉刷新又不想页面的内容被压缩应该怎么处理呢？

此时可以将refresh组件与list组件结合使用

refresh组件+list组件实现下拉刷新

<template>
<refresh class='page'>
  <list>
    <list-item class='top' type='top'></list-item>
    <list-item class='bottom' type='bottom'></list-item>
  </list>
</refresh>
</template>

refresh组件下拉刷新
list组件可以实现滚动

refresh组件 + list组件结合使用可以实现需求效果。

tab组件

tab组件中的数据不支持动态增加或减少！如果要减少页面，需要先销毁掉，重新用新的实例展示数据 ===> 快应用提供了if命令，if为false时，页面不显示，并且dom节点也会移除。

<tab if='bol'>
  <tab-bar></tab-bar>
  <tab-content></tab-content>
</tab>

使用示例-tab组件做tabbar

示例

父子组件传值

父子组件

第三方组件库

https://vivoquickapp.github.io/apex-ui-docs/
https://jdsecretfe.github.io/quist-ui/
https://quickappcn.github.io/qaui/