ycwh/miniapp/pages/components/list.vue

<template>
<view>
	<u-empty v-if="!list || list.length == 0" marginTop="100"/>
	<block v-else>
		<u-swipe-action v-if="edit || del" ref="swipes">
			<u-swipe-action-item v-for="(item,i) in list" :key="item.id" :options="swipes" @click="clickSwipe($event,item,i)">
				<view :class="border ? 'border-b-i-m' + (i==0?' border-t-i-m':'') : ''">
					<slot :item="item"/>
				</view>
			</u-swipe-action-item>
		</u-swipe-action>
		<view v-else v-for="(item,i) in list" :key="i" :class="border ? 'border-b-i-m' + (i==0?' border-t-i-m':'') : ''">
			<slot :item="item"/>
		</view>
		<view class="p-10"><u-loadmore :status="page.status" line/></view>
		<u-back-top :scroll-top="scrollTop" bottom="30" duration="300"/>
	</block>
</view>
</template>

<script>
import {bizConst} from '@/api/biz/biz.js'

export default {
	props: {
		func: String,
		params: {
			type: Object,
			default() {
				return {}
			},
		},
		pageSize: {
			type: Number,
			default: bizConst.pageSize,
		},
		border: {//是否显示中间的分隔线
			type: Boolean,
			default: false,
		},
		edit: {//是否可以划出编辑按钮
			type: Boolean,
			default: false,
		},
		del: {//是否可以划出删除按钮
			type: Boolean,
			default: false,
		},
	},
	computed: {
		swipes() {
			let swipes = []
			if (this.edit) {
				swipes.push({
					text:'编辑', 
					style: {
						backgroundColor:'#4F8477',
					},
				})
			}
			if (this.del) {
				swipes.push({
					text:'删除', 
					style: {
						backgroundColor:'#DC545A',
					},
				})
			}
			console.log(swipes)
			return swipes
		},
	},
	watch: {
		params: {
			handler: function(newValue) {
				console.log('watch:params=' + newValue)
				this.refresh()
			},
			deep: true,
		},
	},
	data() {
		return {
			list: [],
			page: {
				current: 0,
				status: 'loadmore',//loading,nomore
			},
			scrollTop: 0, // 滚动条位置，距顶为0
		}
	},
	methods: {
		refresh(params) {//刷新
			this.getDatas(false, params)
		},
		getDatas(isNextPage, params) {//翻页
			if (this.page.status == 'loading') {//如果在加载过程中再次请求，那么不处理
				return
			}
			if (!isNextPage) {//重新刷新
				this.list = []
				this.page.current = 0
			} else if (this.page.status == 'nomore') {//请求下一页时，如果没数据了，直接退出
				return
			}
			this.params = params || this.params
			this.page.status = 'loading'
			this.$u.api[this.func].call(this, this.page.current + 1, this.pageSize, this.params).then(res => {
				this.list = this.list.concat(res.data.records)
				this.page.current++ //加一页
				this.page.status = this.page.current < res.data.pages ? 'loadmore' : 'nomore'
				console.log('加载完第' + this.page.current + '页')
			})
		},
		clickSwipe(e, item, index) {
			if (e.index == 0) {//编辑
				this.$emit("toEdit", item, index)
			} else{//删除
				this.$emit("toDel", item, index)
			}
			this.$refs.swipes.closeOther()//直接调组件的未公布的方法
		},
		delOne(index) {//删除前端数据
			this.list.splice(index, 1)
		},
		scroll(scrollTop) {
			this.scrollTop = scrollTop
		},
		reachBottom() {
			this.getDatas(true)
		},
	},
}
</script>

<style>
</style>