#小程序列表组件v1.0.8 #auth hws

该组件为应对微信小程序有头部和尾部的页面能进行下拉刷新的组件

微信小程序是有其下拉刷新api的，然而头部或者尾部有非滚动区域的情况下，是应对不了的

微信小程序自带的下拉刷新在安卓手机上会带动头部或尾部fixed元素一起下拉

针对这个问题，写了这个组件，以期达到在头部或者尾部有元素的情况下，让android和ios下拉效果保持一致

此外，上拉加载的功能也已经包含在该组件中

安装

npm i hws-scroll -S --production

小程序启用npm

参考小程序文档，这里不赘述

##参数：

| 参数 | 说明 | 必填项 | 类型 | 可选值 | 默认值 | | --- | --- | --- | --- | --- | --- | | id | 页面唯一字符串，用法参见代码示例 | 必填 | string | —— | —— | | pager | 页码和条数 | 必填，且key必须为pageIndex和pageSize | object | —— | { pageIndex: 0, pageSize: 10 }, | | getList | 请求数据的方法，参见代码示例 | 必填 | function | —— | —— | | initIndex | 起始页码 | 必填 | number | —— | 1 | | marginTop | 顶部非滚动区域高度rpx值 | 非必填 | number | —— | 0 | | tabBarHeight | 底部非滚动区域高度rpx值 | 非必填 | number | —— | 0 | | isTocuh | 是否开启上拉加载和下拉刷新 | 非必填 | boolean | —— | true | | backgroundColor | 页面背景颜色 | 非必填 | string | 颜色值 | #F5F5F5 | | notDataText | 加载至没有更多数据时显示的文字 | 非必填 | string | —— | 没有更多了 | | onReachBottom | 由父组件生命周期内触发的方法，写死即可，参见代码示例 | 必填 | 生命周期函数内调用组件该方法 | —— | —— | | no-data | 暂无数据的具名插槽 | 非必填 | —— | —— | —— | | successHandle | 请求成功的调用，参见代码示例 | 必填 | function(list) | —— | —— | | errorHandle | 请求失败的调用，参见代码示例 | 必填 | function([]) | —— | —— |

代码示例

wxml

<view class="page">
	<!-- 头部 -->
	<view class="header">周边地址</view>
	<!-- 底部 -->
	<view class="btn">添加</view>
	<scroll
		id="scroll"
		init-index="{{1}}"
		margin-top="{{80}}"
		tab-bar-height="{{88}}"
		background-color="#F5F5F5"
		pager="{{pager}}"
		not-data-text="我是有底线的"
		bind:getList="getData" >
		<view 
		  class="address__item-wrap"
		  wx:for="{{list}}" wx:key="index">
		  <view class="cell">
			<text class="customer__name">{{item.name}}</text>
		  </view>

		  <view class="cell cell__two">
			<text class="desc">{{item.address}}</text>
		  </view>
		</view>
		<view slot="no-data" wx:if="{{noDataShow}}">暂无数据</view>
  </scroll>
</view>

wxss 带*为需要注意事项

.header {
  *position: fixed;
  *#height: 80rpx;  
  *top: 0;         
  left: 0;
  z-index: 100;
  width: 100%;
  background-color: #046738;
  color: #fff;
  text-align: center;
  line-height: 80rpx;
}
.btn {
  *position: fixed; 
  *height: 88rpx;   
  *bottom: 0;        
  left: 0;
  z-index: 100;
  width: 100%;
  background-color: #046738;
  color: #fff;
  text-align: center;
  line-height: 88rpx;
}

js 带*的为必须要有的代码

Page({
	data: {
		*pager: {
		  *pageIndex: 0,
		  *pageSize: 10,
		*},
		*list: [], // 列表数据集合，名字可随便取
		noDataShow: false,
	},
	
	*onLoad() {
		*this.scroll = this.selectComponent('#scroll'); // 获取scroll 以便后面调用组件内方法
	*},
	
	// 这个生命周期放在这里写死就行，因为组件触发不了生命周期，所以要在页面触发调用组件里的方法
	*onReachBottom() {
		*this.scroll.onReachBottom();
	*},
	
	
	
	getData(params) {
		*this.setData({ ['pager.pageIndex']: params.detail }); // 请求数据之前，将页码改成组件传回来的页码
		
		qqmapsdk.search({
		  keyword: '点',
		  location: {
			latitude: 30,
			longitude: 120
		  },
		  page_size: this.data.pager.pageSize,
		  page_index: this.data.pager.pageIndex,
		  success: (res) => {
			if(res.status === 0) {
			  const list = res.data.map(item => { // 定义接收到的list
				return {
				  id: item.data,
				  name: item.title,
				  address: item.address,
				};
			  }); 
			  
			  *this.setData({ list: this.scroll.successHandle(list) });// 调用组件的成功方法，传入本次请求接收到的list，并设置列表数据
			  
			  this.setData({ noDataShow: !this.data.list.length ? true : false });
			} else {
			  this.setData({
				error: `请求错误，${res.message}`,  
				
				*list: this.scroll.errorHandle([]), // 调用组件的失败方法，传入空数组，并设置列表数据
			  })
			  
			  this.setData({ noDataShow: !this.data.list.length ? true : false });
			}
			
		  },
		  fail: (err) => {
			this.setData({
			  error: `请求错误，${err}`,
			  
			  *list: this.scroll.errorHandle([]), // 调用组件的失败方法，传入空数组，并设置列表数据
			})
			this.setData({ noDataShow: !this.data.list.length ? true : false });
		  }
		})
	},
})