wx-scroll v1.1.6

wx-scroll v1.1 微信小程序上拉加载下拉刷新

v1.1 版

上传至npm包可安装下载并npm构建

前言

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

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

npm i wx-scroll --production

引入

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

"usingComponents": {
  "wxScroll": "wx-scroll/index"
}

页面结构

<wxScroll class="demo1" option="{{scroll}}" bindrefresh="refresh" bindloadMore="loadMore" bindrefreshPulling="refreshPulling">
  <view slot="refresh">
    <!-- slot 自定义刷新样式 -->
  </view>
  <view class="list-inner" slot="inner">
    <!-- 循环内容 -->
    <view class="item" wx:for="{{list}}" wx:key="unique">
      第{{index + 1}}条内容
    </view>
    <!-- 循环内容 -->
  </view>
  <view slot="loadmore">
    <!-- slot 自定义加载更多样式 -->
  </view>
</wxScroll>

配置 详见api

// data 中配置
scroll: {
  //  设置分页信息
  pagination: {
    current: 1,
    size: 10,
    total: 10
  },
  // 设置数据为空时的图片
  empty: {
    img: '',
    text:'Empty',
  },
  // 设置下拉刷新
  refresh: {
    type: 'default',
    style: 'black',
    background: "#000"
  },
  // 设置上拉加载
  loadmore: {
    type: 'default',
    icon: {
      img:'',//加载图标地址
    },
    background: '#f2f2f2', 
    backgroundImage: '',
    title: {
      show: true,
      text: '加载中',
      color: "#999",
      shadow: 5
    }
  }
},

事件 详见api

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

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

API

Props

scrollOption 配置详情api

1. 分页设置 pagination

   参数	说明	类型	默认值	版本
   current	页码	Number	1	v1.1
   total	总页码数	Number	0	v1.1
   size	每页显示个数	Number	0	v1.1

2. 空设置 empty

   参数	说明	类型	默认值	版本
   img	数据为空时显示的图片	String	| v1.1
   text	数据为空时显示的文字	String	暂无数据	v1.1

3. 下拉刷新设置 refresh

   参数	说明	类型	默认值	版本
   type	下拉样式类型,小程序默认样式或自定义 支持 default custom 定义custom注意在wxml写自定义slot样式,否则可能为空白	String	default	v1.1
   primordialLoading	导航栏是否显示加载状态 true false	Boolean	false	v1.1
   style	默认模式下样式有深色和浅色 支持 black white	String	black	v1.1
   background	下拉刷新区域背景色	String	#eeeeee	v1.1
   backgroundImage	自定义下拉背景图片	String		v1.1
   custom	是否为slot自定义，true,false	Boolean	false	v1.1
   p	自定义custom为true时,下拉的百分比方便自定义动画,设置0即可	Number	0	v1.1
   icon	刷新时设置图标地址	Object		v1.1
   refreshthreshold	自定义下拉高度	Number		v1.1
   title	自定义下拉文字 可设置 show: 是否显示, text: 文字内容, color: 文字颜色, shadow: 文字阴影范围(0时不显示)	Obj		v1.1

4. 上拉加载设置 loadmore

   参数	说明	类型	默认值	版本
   type	上拉样式类型,默认样式或插槽自定义 支持 default custom 定义custom注意在wxml写自定义slot样式,否则可能为空白	String	default	v1.1
   icon	加载时设置图标	Object	| v1.1
   background	上拉加载区域背景色	String	#eeeeee	v1.1
   backgroundImage	上拉加载区域背景图片	String		v1.1
   title	默认样式时设文字 可设置 show: 是否显示, text: 文字内容, color: 文字颜色, shadow: 文字阴影范围(0时不显示)	Obj		v1.1

5. 回到顶部 scrollTop

   参数	说明	类型	默认值	版本
   show	是否显示回到顶部按钮 true false	Boolean	false	v1.1
   width	按钮宽度	String	100rpx	v1.1
   height	按钮高度	String	100rpx	v1.1
   left	按钮距左边距离	String	auto	v1.1
   right	按钮距右边距离	String	80rpx	v1.1
   top	按钮距顶部距离	String	auto	v1.1
   bottom	按钮距底部距离	String	80rpx	v1.1
   backgroundColor	背景色	String	#2c76e4	v1.1
   color	按钮文字颜色	String	#ffffff	v1.1
   text	按钮文字	String	Top	v1.1

Slot

Events

Methods