hws-scroll v1.0.8

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

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

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

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

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

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

安装

npm i hws-scroll -S --production

小程序启用npm

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

##参数：

代码示例

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 });
		  }
		})
	},
})