无限滚动

特点

下拉刷新

特点

快速开始

一 原生JS

1.1 安装

1.1.1 NodeJS

npm i mtfscrolllist -D

importMtfScrollListfrom'mtfscrolllist'constmtfScrollList=newMtfScrollList()

1.1.2 浏览器

<scriptsrc="https://cdn.jsdelivr.net/npm/mtfscrolllist@1.0.5/dist/mtfscrolllist.min.js"></script>

1.2 使用

<style>.scrolllist {height:360px;overflow: auto;}</style><divid="scrolllist"class="scrolllist"></div><script>constdata=[{id:1,text:'a'},{id:2,img:'2.jpg'}]constmtfScrollList=newMtfScrollList()mtfScrollList.init({ele:document.getElementById('scrolllist'),// 容器data:data,// 初始数据，默认为空startIndex:6,// 起始索引，默认是 初始数据的长度。如果容器初始HTML不为空，推荐指定起始索引perPage:6,// 每页条数，默认是 5。如果容器初始HTML不为空，推荐指定每页条数render({ data, index}){// 渲染列表的每一项constd=document.createElement('div')d.setAttribute('index',index)d.id='id'+indexd.innerHTML=data.textreturnd},onTop({ cb, page}){// 上拉到顶，加载更多：回调函数，当前页数setTimeout(()=>{cb(data)},1500)// 模拟获取数据},onBottom({ cb, page}){// 下拉到底，加载更多：回调函数，当前页数setTimeout(()=>{cb(data)},0)},onPullDownStart({ startY}){// 下拉刷新：刚开始下拉。可获得起始Y坐标letd=document.getElementById('tip')removeChild(d)d=document.createElement('div')d.className='tip'd.innerHTML='下拉刷新'd.id='tip'document.body.appendChild(d)},onPullDownMove({ paddingTop}){// 下拉刷新：拖动下拉。可获得下拉距离constd=document.getElementById('tip')if(paddingTop<50)d.innerHTML='您已下拉'+paddingTopelseif(paddingTop>100)returntrue// 返回true，阻止继续下拉elsed.innerHTML='松开刷新'd.style.marginTop=(paddingTop>>1)+'px'},onPullDownEnd({ paddingTop, cb}){// 下拉刷新：结束下拉。可获得下拉距离，将数据传入回调函数constd=document.getElementById('tip')if(paddingTop>=50){// 到达指定下拉距离，开始获取数据d.innerHTML='开始为您刷新'setTimeout(()=>{removeChild(d)cb(data)},1500)}else{// 没有到到指定下拉距离，自动回弹removeChild(d)}}})</script>

二 React

安装

npm i mtfscrolllist -Dnpm i react-mtfscrolllist -D

引入

importReactMtfScrollListfrom'react-mtfscrolllist'

使用

.scrolllist {height:360px;overflow: auto;}

<ReactMtfScrollListclassName="scrolllist"data={this.state.data||[]}// 可绑定props或stateperPage={6}render={({data, index})=><divkey={index}/>{data}</div>}/>// 渲染列表每一项，支持传入React组件onTop={cb=>{}}onBottom={cb=>{}}onPullDownStart={startY=>{}}onPullDownMove={paddingTop=>{}}onPullDownEnd={(paddingTop,cb)=>{}}></ReactMtfScrollList>

示例

原生JS

React