sw-scroll v1.0.4

sw-scroll 上拉加载下拉刷新

v1.0 版

上传至npm包可安装下载并npm构建 修改参数配置使组件使用更便捷 增加加载插槽可以自定义加载更多样式

前言

基于小程序原生组件scroll-view的扩展与封装,实现简单的上拉加载下拉刷新

npm 安装 安装之后开发者工具点击npm构建

npm i sw-scroll 

引入

在app.json或index.json中引入组件

"usingComponents": {
  "sk-scroll": "sw-scroll/index",
}

更新日志

更新日志

基础用法代码演示

页面结构

<sw-scroll class="demo1"  scrollOption="{{scroll}}" bindrefresh="refresh" bindloadMore="loadMore" background="#fff">
			<view class="list-inner" slot="inner">
        <!-- 循环内容 -->
				<view class="item" wx:for="{{list}}" wx:key="unique">
					第{{index + 1}}条内容
				</view>
        <!-- 循环内容 -->
			</view>
</sw-scroll>

配置 详见api

// data 中配置
scroll: {
  //  设置分页信息
  pagination: {
    page: 1,
    totalPage: 10,
    limit: 10,
    length: 100
  },
  // 设置数据为空时的图片
  empty: {
    img: 'http://coolui.coolwl.cn/assets/mescroll-empty.png'
  },
  // 设置下拉刷新
  refresh: {
    type: 'default',
    style: 'black',
    background: "#000"
  },
  // 设置上拉加载
  loadmore: {
    type: 'default',
    icon: 'http://upload-images.jianshu.io/upload_images/5726812-95bd7570a25bd4ee.gif',
    background: '#f2f2f2', 
    // backgroundImage: 'http://coolui.coolwl.cn/assets/bg.jpg',
    title: {
      show: true,
      text: '加载中',
      color: "#999",
      shadow: 5
    }
  }
},

事件 详见api

// 加载数据
let that = this
getData:function (type) {
  // 可走后台接口
  if (type == 'refresh') {
    // 刷新时执行
    // 设置页数1
    let scroll = that.data.scroll
    scroll.pagination.page = 1
  }else{
    // 加载时执行
    // 设置页数+1
    let scroll = that.data.scroll
    scroll.pagination.page = scroll.pagination.page + 1

    // 数据加载完隐藏loadmore
    that.selectComponent(".demo1").loadEnd()
  }
},
// 下拉 刷新 页数设置1
refresh: function () {
  this.getData('refresh')
},
// 上拉 加载 页数设置+1
loadMore: function () {
  this.getData('loadMore')
},
// 自定义下拉刷新时执行 插槽下拉 返回的下拉进度p
refreshPulling: function (e) {
  p = e.detail.p
},

scrollOption 滚动设置

1. 分页设置 pagination

   参数	说明	类型	默认值	版本
   page	页码	Number	1	2.0.0
   totalPage	总页码数	Number	0	2.0.0
   limit	每页显示个数	Number	0	2.0.0
   length	总个数(个数为0是,页面显示空样式)	Number	0	2.0.0

2. 空设置 empty

   参数	说明	类型	默认值	版本
   img	数据为空时显示的图片	String	http://coolui.coolwl.cn/assets/mescroll-empty.png	2.0.0

3. 下拉刷新设置 refresh

   参数	说明	类型	默认值	版本
   type	下拉样式类型,小程序默认样式或自定义 支持 default | diy	String	default	2.0.0
   style	默认模式下样式有深色和浅色 支持 black | white	String	black	2.0.0
   diyLevel	自定义等级,简单设置：1,插槽自定义：2 支持 1 | 2	Number		2.0.0
   p	自定义等级2时,下拉的百分比方便自定义动画,设置0即可	Number	0	2.0.0
   refreshthreshold	自定义下拉高度	Number		2.0.0
   backgroundImage	自定义下拉背景图片	String		2.0.0
   title	自定义下拉文字 可设置 show: 是否显示, text: 文字内容, color: 文字颜色, shadow: 文字阴影范围(0时不显示)	Obj		2.0.0

4. 上拉加载设置 loadmore

   参数	说明	类型	默认值	版本
   type	上拉样式类型,默认样式或插槽自定义 支持 default | diy	String	default	2.0.0
   icon	默认样式时设置图标	String		2.0.0
   title	默认样式时设文字 可设置 show: 是否显示, text: 文字内容, color: 文字颜色, shadow: 文字阴影范围(0时不显示)	Obj		2.0.0

Slots

Events

Methods