# ScrollView 滚动列表

基本上每个项目都会遇到列表页面，通常需要搜索、下拉刷新和滚动分页加载等功能，

而这些代码可能比较繁琐，故我们可以基于项目深度封装一个组件。

下面是基于scroll-view封装的代码及思路：

# 基本使用

通过v-model绑定一个数组类型的响应式变量
确定要调用的接口API，该API函数在/common/request/api.js中声明，通过req属性传递给组件(req是request的缩写)
给组件取一个标识，例如ref="list"
调用组件实例方法load()加载数据，组件内部调用接口，并会把接口中数组类型的字段赋值给v-model绑定的变量
内置的scroll-view默认高度为500rpx，通常我们需要将可滚动部分填满整个页面，

则可以在com-scroll-view的父元素使用纵向的flex布局，并设置视口高度(100vh)。

组件内部已声明flex-grow:1，将填充页面剩余部分

<template>
    <view class="page">
        <!-- UserList为示例接口 -->
        <com-scroll-view ref="list" v-model="list" req="UserList">
            <!-- 列表渲染 -->
            <view class="pd-y-30 mg-x-20 border-bottom" v-for="(item, index) in list">
                {{ item.name }}
            </view>
        </com-scroll-view>
    </view>
</template>

<script>
	export default {
		data() {
			return {
				list: [],
			}
		},
		onLoad() {
			
		},
		methods: {

			getList(){
				this.$refs['list'].load()
			},
		}
	}
</script>

<style lang="scss" scoped>
.page{
	height: calc(100vh - var(--window-top));
    display: flex;
    flex-direction: column;
}
</style>

# 给接口传递参数

使用组件的param属性给接口传递参数

<template>
	<com-layout>
		<view class="page flex-col">
			
			<view class="pd-20">
				<com-input mode="search" v-model="param.name" placeholder="输入姓名进行搜索"
                 border clearable @confirm="getList"></com-input>
			</view>
			
			<com-scroll-view ref="list" v-model="list" req="UserList" :param="param">
				<view class="pd-y-30 mg-x-20 border-bottom" v-for="(item, index) in list">
					{{ item.name }}
				</view>
			</com-scroll-view>
			
		</view>
	</com-layout>
</template>

<script>
	export default {
		data() {
			return {
				list: [],
				param: {
					name: "",
				}
			}
		},
		onLoad() {
			this.getList()
		},
		methods: {
			getList(){
				setTimeout(()=>{
					this.$refs['list'].load()
				}, 300)
			},
			
		}
	}
</script>

# 对响应数据进行处理

有时候需要对接口返回数据进行处理，这时可以监听com-scroll-view的handle-data事件，拿到响应参数

第一个参数是数组类型的数据，第二个参数是接口响应的直接数据(data字段)

<com-scroll-view ref="list" v-model="list" req="UserList" :param="param" @handle-data="handleData">
    <view class="pd-y-30 mg-x-20 border-bottom" v-for="(item, index) in list">
        {{ item.name }}
    </view>
</com-scroll-view>

<script>
    export default {
        data(){
            return { 
                list: []
            }
        }
    },

    methods: {
			
        getList(){
            setTimeout(()=>{
                this.$refs['list'].load()
            }, 300)
        },
			
        handleData(list, data){
            console.log("参数一", list)
            console.log("参数二", data)
        },
			
	}
</script>

# API

# Props

属性名	说明	类型	必填	默认值
value	列表数据，使用v-model绑定	`Array`	`true`	[]
req	请求的接口函数名称对应/common/request/api中的函数名称	`Function` / `String`	`true`	-
height	滚动面板的高度组件内部已声明flex-grow: 1 可给组件父元素设置纵向的flex布局	`Number`	`false`	500
listKey	接口中数组类型的字段名称	`String`	`false`	list
page	初始页码值	`Number`	`false`	1
pageKey	接口中页码的字段名称	`String`	`false`	current
pageSizeKey	接口中每页条数的字段名称	`String`	`false`	size
pageSize	每页展示条数	`String` / `Number`	`false`	10
pageMode	分页模式 +1 表示下一页页码 +1 +size 表示下一页页码 +pageSize	`String`	`false`	+1
emptyText	列表为空时显示的文本	`String`	`false`	列表为空
param	请求参数	`Object`	`false`	{}
auto	是否在组件创建时自动加载数据	`Boolean`	`false`	true
min	列表项超过5个时显示加载更多	`Number`	`false`	5
line	是否显示顶部分割线	`Boolean`	`false`	true
scrollKey	滚动到指定位置需要给内容元素添加id属性	`String`	`false`	-
enablePageup	是否开启向上翻页	`Boolean`	`false`	false
enablePagedown	是否开启向下翻页	`Boolean`	`false`	true
showEmpty	是否显示空提示文字	`Boolean`	`false`	true
showLoading	是否显示默认加载中状态	`Boolean`	`false`	true
loadingText	加载中状态提示文字	`String`	`false`	正在加载
refresh	是否开启滚动面板下拉刷新（app默认开启，H5可触发页面级下拉刷新）	`Boolean`	`false`	true

# Events

事件	说明	回调参数
input	数据被改变时触发，组件内部使用	v-model绑定的值
handle-data	获取到接口时触发	第一个参数为需要展示的列表数据，即v-model绑定的值第二个为接口响应数据(包含列表字段和其他字段)
error	接口请求失败时触发	err 出错回调
finish	接口请求完成时触发(成功或失败都会触发)	-
loadmore	触底时触发	第一个参数为需要展示的列表数据，即v-model绑定的值第二个为接口响应数据(包含列表字段和其他字段)
pageup	翻页时触发	第一个参数为需要展示的列表数据，即v-model绑定的值第二个为接口响应数据(包含列表字段和其他字段)
scroll	滚动时触发	e 滚动事件回调参数

← Popup 弹窗 Select 选择器 →