weex提供了一個refresh組件,用于下拉刷新,效果還是不錯的。
<refresh>
為 <scroller>
和 <list>
提供下拉加載功能。用法與特性與 <loading>
類似,<scroller>
和 <list>
的子組件,且只能在被 <scroller>
和 <list>
包含時才能被正確的渲染。
來看下使用效果
具體的使用,可以看看官方的文檔。點擊打開鏈接
<template> <div class="wrapper"> <navbar title="評論"></navbar> <div class="joke"> <text class="jokec">{{jokecontent}}</text> </div> <list> <refresh class="refresh-view" display="{{refresh_display}}" onrefresh="onrefresh"> <loading-indicator class="indicator" ></loading-indicator> <text class="refresh-arrow" style="text-align:center;color:rgb(238,162,54)" if="{{refresh_display==='hide'}}"> {{msg}} </text> </refresh> <cell> <scroller> <com-item repeat={{comments}}></com-item> </scroller> </cell> </list> <div class="input-wrapper"> <input type="text" maxlength="15" oninput="oninput" class="input" placeholder="{{hint}}"/> <div class="send-icon" onclick="sendcomment"> <text style="color:#FFFFFF">發送</text> </div> </div> </div></template>在<script></script>里面寫出刷新事件onresfresh function,來做數據獲取存儲和刷新管理。項目源碼:點擊打開鏈接
新聞熱點
疑難解答