miniprogram-infinitescroll

小程序 mobx composition 下拉加载

Usage

TODO

Options

TODO

Development

LICENSE

MIT

<view style="margin-bottom: 50rpx;display: flex;">
  <!-- id名对应表单字段名 -->
  <input
    id="keywords"
    bindinput="change"
    value="{{values.keywords}}"
    style="border: solid 1px ;height:80rpx;flex: 6;"
  />
  <button bindtap="search" style="flex: 1;">搜索</button>
  <button bindtap="reset" style="flex:1;">重置</button>
</view>
<view wx:if="{{loading}}"> 载入中 </view>
<view wx:elif="{{error}}"> 载入出错 </view>
<view wx:else>
  <scroll-view
    bindscrolltolower="bindscrolltolower"
    style="max-height: 1000rpx;"
    lower-threshold="{{200}}"
    scroll-y
  >
    <view>
      <view style="margin-bottom: 50rpx;" wx:for="{{data.list}}">
        <view style="margin-bottom: 20rpx;">
          <text>{{item.name}}</text>
        </view>
      </view>
    </view>
  </scroll-view>
  <view wx:if="{{noMore}}">
    {{ data.list.length ? '共'+data.list.length+'条,没有更多了' :
    '没有相关数据'}}
  </view>
  <view wx:elif="{{errorMore}}"> 加载更多出错 </view>
  <view wx:elif="{{loadingMore}}"> 加载更多中 </view>
  <view style="float: right;">
    <button loading="{{loadMore}}" bindtap="loadMore">手动点击加载更多</button>
  </view>
</view>

//搜索下拉列表
import { useForm, useSearchInfiniteScroll } from 'miniprogram-infinitescroll';
import { compositionApi } from 'miniprogram-composition';

const getData = ({ current, pageSize }, formData) => {
  return new Promise((resolve, reject) => {
    wx.request({
      url: 'http://cloud-music.pl-fe.cn/search',
      data: {
        limit: pageSize,
        offset: (current - 1) * pageSize,
        ...formData,
      },
      success: (res) => resolve(res.data),
      fail: reject,
    });
  });
};

Component({
  behaviors: [compositionApi],
  setup() {
    const form = useForm({
      keywords: '红颜如霜',
    });
    const { values, change, setValues, reset: resetValues } = form;
    const {
      loadMore,
      loadMoreAsync, //返回promise的加载更多
      bindscrolltolower,
      data,
      loading,
      loadingMore,
      error,
      errorMore,
      noMore,
      search,
      searchAysnc, //返回promise的搜索
      reset,
    } = useSearchInfiniteScroll(
      async ({ current, pageSize }, formData) => {
        const res = await getData({ current, pageSize }, formData);
        return {
          list: res.result.songs,
          total: res.result.songCount,
        };
      },
      {
        form,
        defaultPageSize: 20,
      },
    );
    return {
      error, //出错
      errorMore, //加载更多出错
      values, //表单值
      change, //表单变化事件
      loadMore, //载入更多
      search, //搜索
      reset, //重置
      noMore, //是否没有更多数据了
      data, //列表数据
      loading, //加载中
      loadingMore, //加载更多中
      bindscrolltolower, //下拉事件
    };
  },
});