因为现在在做的项目中含有大量的左右拖动长列表页面，如果用普通的H5页面的话，会存在很严重的性能问题，所以最后尝试了一下用 weex 来实现这些左右拖动长列表页面。

什么是 Weex

Weex 是一个可以使用现代化的 Web 技术开发高性能原生应用的框架。

官方文档：https://weex.apache.org/zh/guide/introduction.html#%E6%A6%82%E8%BF%B0

Weex 中的 <loading> 组件

<loading> 为容器提供上拉加载功能。

<loading> 是 <scroller>、<list>、<waterfall> 的子组件，只能在被它们包含时才能被正确渲染。

<loading>
 <text>Loading</text>
 <loading-indicator></loading-indicator>
</loading><scroller>
 <div v-for="num in lists">
 <text>{{num}}</text>
 </div>
 <loading>
 <text>Loading</text>
 </loading>
</scroller>

子组件

• 诸如 <text>、<image> 之类的任何组件，都可以放到 <loading> 进行渲染。
• 组件 <loading-indicator>: 作为 <refresh> 和 <loading> 的子组件使用，则拥有默认的动画效果实现。

<loading>
 <text>Loading</text>
 <loading-indicator></loading-indicator>
</loading>

ps: <loading-indicator>组件默认是没有宽高颜色的，设置样式即可看到一个红色的圆圈不断旋转。

<loading-indicator class="indicator" ></loading-indicator>

	.indicator {
	 height: 20px;
	 width: 20px;
	 color: red;
	}

属性

• display
  控制 <loading> 组件显示、隐藏。display 的设置必须成对出现，即设置 display="show",必须有对应的 display="hide"。可选值为 show / hide，默认值为 show。

PS：此处有个坑，我在实际开发中发现，通过修改 display 绑定的值，并不会同步到 view 层中；即我在通过下拉刷新获取到最新数据之后，将 display 绑定的值改为 hide时， loading 组件并没有隐藏，似乎是一种单向数据流特性。

解决方法：

在设置新值之前先设置为记录的当前值。

效果：