快应用开发：emmmm

整体来说是：标准的html+css+script 利用flex布局的开发（有很大一部分的样式和属性是不能用的，详情都看看开发者文档）

快应用对于div的定位为单纯的布局容器，一切文本都由text负责。

list这个组件所解决的问题是 div循环渲染 因页面结构复杂出现的卡顿，

为了得到流畅的列表滚动体验，推荐开发者使用list组件替代div组件实现长列表布局，

<template>
  <!-- 列表实现 -->
  <list class="tutorial-page" onscrollbottom="loadMoreData">
    <!-- 商品列表 -->
    <block for="productList">
      <list-item type="product" class="content-item" onclick="route($item.url)">
        <image class="img" src="{{$item.img}}"></image>
        <div class="text-wrap">
          <div class="top-line">
            <text class="text-name">{{$item.name}}</text>
            <text class="text-price">{{$item.price}}</text>
          </div>
          <text class="bottom-line">{{$item.brief}}</text>
        </div>
      </list-item>
    </block>

    <!-- 加载更多，type属性自定义命名为loadMore -->
    <list-item type="loadMore" class="load-more">
      <progress type="circular"></progress>
      <text>加载更多</text>
    </list-item>
  </list>
</template>

这是官方提供的一段代码。

从代码中看出：组件有list这个容器，以及里面list-tiem的这个子容器组成

对于list来说 可以设置flex-direction 的样式改变其为横向或者竖向的list。

list-item是这个组件最核心的部分，对于他的注意事项也尤为重要

要实现DOM片段的复用，要求相同type属性的DOM结构完全相同。所以，设置相同type属性的list-item是优化列表滚动性能的关键

• list-item内不能再嵌套list
• list-item的type属性为必填属性、
• list-item内部需谨慎使用if指令或for指令，因为相同type属性的list-item的DOM结构必须完全相同，而使用if指令或for指令会造成DOM结构差异

list-item里面的dom结构可以说是非常重要了，不然渲染出来的东西就会出现很多的不同，导致很多的dom渲染不出来，所有建议使用show指令。然后对于真的需要if，可以在样式上进行判断，给一个display：none的，让两个dom节点都能渲染出来，为保持dom结构的准确性

案例如下

<div class="btn {{forIndex!=0&&forIndex+1!=allNum?'':'hide'}}" οnclick='goPrev'><text>上一题 </text></div>
<div class="btn {{forIndex+1==allNum?'':'hide'}}" οnclick='textResult'><text>提交</text></div>

还有其他提供的一些事件：

scrollbottom	-	列表滑动到底部
scrolltop	-	列表滑动到顶部

一些其他的吸顶、lazyload尚未使用到，还待试水

另外还有一个坑，就是页面名字不能为list，博主写了这样一个页面，导致里面的一加list组件，并且在list外部有一个层级，就会导致无限循环。折磨了一早上，想到该是什么冲突，然后换了个页面之后就没有产生这个问题了。