feed 信息流

解释： 信息流组件，可配置下拉刷新、列表加载、上滑加载功能，适用于列表信息展示，并可放置在页面的任何部分；组件包含手势下拉以及api调用两种使用方式

属性说明

示例

在开发者工具中预览效果

扫码体验

图片示例

代码示例

  1. <!-- 手势下拉刷新 & 触底加载 --><smt-feed    class="smt-feed pull-down-refresh"    pull-to-refresh    bind:refresh="onRefresh"    bind:scrolltolower="scrollToLower"    text="{{PullText}}">    <list list="{{list}}"></list>    <smt-spin status="{{status}}" bind:tap="reload"></smt-spin></smt-feed>
  1. async onRefresh() {    const refresh = await selComponent(this, '.pull-down-refresh');    const {data: list} = await fetchData();    await syncSetData(this, {        status: 1,        count: 0,        list: list || this.data.list,        text: list ? `为你推荐${list.length}条更新` : '暂时没有更新，休息一下'    });    refresh.stopRefresh();},async scrollToLower() {    const {data: list} = await fetchData();    const fail = this.data.count === 3;    const end = this.data.count === 5;    if (fail || end) {        this.setData({            status: fail ? 3 : 2        });        return;    }    await syncSetData(this, {        list: list.concat(this.data.list || []),        count: ++this.data.count    });}
  1. .smt-feed {    display: block;    height: calc(100vh - 40px);}

Bug&Tip

  • -