更新记录

1.0.2（2021-12-29）

更新程序，改用Wxs 进行高性能刷新。修改控制器部分导入以及使用方式，详情参考文档或者看源码

1.0.1（2021-12-09）

README.MD 完善。 插件使用示例工程，使用的是原生小程序项目。

1.0.0（2021-12-09）

初始上传文档

平台兼容性

小程序自定义组件的通用使用方式详见：uni-app中使用小程序自定义组件教程

滚动组件

ListView

说明

组件使用控制器作为核心，控制整个控制器（数据加载等）。
由Flutter得出想法。
目前项目使用原生小程序，Uni项目需要使用: [URL地址](https://ext.dcloud.net.cn/plugin?id=7068)

小程序组件

在App.json中导入组件后可全局使用

app.json

{
  "pages": [
    "pages/main/main"
  ],
  "usingComponents" : {
    "ListView": "/components/ListView/ListView"
  },
  "window": {
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "Scroll",
    "navigationBarTextStyle": "black"
  },
  "style": "v2",
  "sitemapLocation": "sitemap.json"
}

Wxml

<!--pages/main/main.wxml-->
<view class="el">
  <!-- 导入后使用组件 -->
  <ListView id="ListView">
    <!-- 组件吸顶方式，主要: style的sticky，需要浏览器或者手机支持。 -->
    <view class="view" style="position: sticky;top: 0;">
      <text>header</text>
    </view>
    <!-- 组件内容 -->
    <view class="item" wx:for="{{list}}" wx:key="index">
      <text>{{item}}</text>
    </view>
  </ListView>
</view>

Wxss

/* components/ListView/ListView.wxss */
.ListView,
.scroll-view {
  height: 100%;
  position: relative;
}

.ListViewHeaderBox {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 0;
  overflow: hidden;
  background: rgba(0, 0, 0, 0.2);
}

.ListViewScrollBox {
  min-height: 100%;
  height: 100%;
}

.items {
  min-height: 100%;
  position: relative;

}

.items.noneItems {
  display: flex;
  align-items: center;
  justify-content: center;
}

.items.noneItems .noneItem {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

.items.noneItems .noneItem .icon {
  width: 100rpx;
}

.text {
  font-size: 26rpx;
  line-height: unset;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: "JetBrains Mono", "Courier New", Courier, monospace;
  color: black;
}

.buttomState {
  height: 45px;
  display: flex;
  align-items: center;
  justify-content: center;
}

Json

{
  "usingComponents": {}
}

Js

// 导入控制器文件
import {
  ScrollController,
  PageController
} from "../../components/ListView/js/ScrollContoller.js";

// pages/main/main.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    // 滚动控制器
    controller: null,
    // 滚动控制器加载的列表，直接在页面展示
    list: []
  },
  // 模拟请求的延迟 以及请求错误
  get(num) {
    return new Promise((success, fail) => {
      setTimeout(res => {
        if (num > 3) {
          return fail();
        }
        success();
      }, 1000);
    });
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    // 初始化 滚动控制器
    var controller = new ScrollController();
    // 初始化 页面控制器(存在默认页面控制器)
    controller.pageController = new PageController();
    // 初始化 页面控制器的每页最大数量
    controller.pageController.pageSize = 20;
    // 初始化 滚动控制器的请求。 要求 必须是异步函数，
    // 此函数的参数pageController是页码控制器
    // 在函数内，请求成功后需要将最大页码赋值给pageController，使其pageController加载下一页条件生效
    // 返回的Array是请求的结果
    controller.promise = async (pageController) => {
      pageController.setTotalPage(5);
      console.log(pageController);
      var c = -1,
        arr = [];
      while (++c < pageController.pageSize) {
        arr.push(pageController.pageNum + "-" + c);
      }
      await this.get(pageController.pageNum);
      return arr;
    }

    // 开启自动加载
    controller.autoLoad = true;
    // 开启下拉刷新
    controller.refresherEnabled = true;
    // 是否开启上拉加载
    controller.loadMoreEnabled = true;

    // 数据监听器 获取请求后的数据的必要函数
    controller.addListener = async (list) => {
      this.list = list;
      await this.setData({
        list
      });
    }
    // 本地保存一份
    this.controller = controller;
    // 初始化 ListView 组件的滚动控制器
    var ListView = this.selectComponent("#ListView");
    ListView.initController(this.controller);
  },
})