微信小程序里的 listview,内置了上拉刷新下拉加载更多的功能,以及页面状态显示

适用于页面内有一个可上拉刷新下拉加载的 list 的情况

使用

1.拷贝 lib 文件夹到根目录

2.拷贝 utils 中的 lvUtil 和 netUtil 到你的 utils 文件夹

3.根据你的网络请求的字段特点修改 netUtil 和 app.js 中的相应字段.

4.页面的 js 引入:

var lvUtil=require("../../utils/lvUtil.js");

只需要在页面的 onLoad 方法中调用方法:lvUtil.initLv.

其他下拉刷新,上拉加载更多的方法都无需书写,在此方法内部已经实现.

 lvUtil.initLv(that,"lesson/search/v1.json",
        function(params){
          params.type = 2;
          params.sourceType = 0;
          params.labelId = 0;
          params.priceType = 2;
          params.categoryIds = "";
        },
        function (netData){

          return netData;
        },
        function(item){
         // utils.showAlbumItemPriceText(item);
        }
    )

5.wxml 中:

  <!--至少要绑定 onLoadMore 方法,因为原生 onReachBottom 方法经常不起作用-->
 <scroll-view  wx:if="{{!netStateBean.contentHidden}}"  scroll-y="true" style="height:1300rpx;position:relative; z-index:999;" lower-threshold="50" bindscrolltolower="onLoadMore" bindscrolltoupper="onRefesh" >

    <!--列表数据 list, 字段必须使用 infos-->
      <block wx:for="{{infos}}" wx:for-item="item" wx:for-index="index" wx:key="unique">
        <!--todo 这里写页面的具体内容 ,上方 style 也需自定义-->

        <navigator url="/pages/lession/detail?id={{item.id}}&title={{item.title}}" hover-class="" >

          <!--分隔线,可有可无-->
          <!--<view wx:if="{{infos.length-1 > index}}" class="lession-split-line"/>-->
        </navigator>

      </block>

<!--加载更多的状态显示,这里指定条目少于 8 条时不显示-->
    <view class="loadmore_view" wx:if="{{!netStateBean.loadmoreHidden && infos.length>8 }}" >
      {{netStateBean.loadmoreMsg}}
    </view>
  </scroll-view>


<!--页面状态,引用模板-->
<import src="../../lib/pageManager/pageManager.wxml"/>
<view class="pageStateWrapper" wx:if="{{netStateBean.contentHidden}}">
  <template is="pagestate" data="{{...netStateBean}}"/>
</view>

6.wxss 中:

@import "../../lib/pageManager/pageManager.wxss";