标签：default color type list value item tab uniap border

效果如下

 

 

 

 

 

 

		<uni-popup ref="bankListAll" type="dialog">
			<ty-mutiple-select
				:multiple="false"
				v-model="selectedBank"
				:selectData="bankListAll" 
				:duration="2000" 
				:before-close="true" 
				@change="mutiple_select_change"
				@close="close_bank_list"
				@confirm="selectedBankConfirm"
				title="请选择题库"
				 type="input"
				 mode="input" >
			</ty-mutiple-select>
		</uni-popup>

　　

			<listBar :list="bankList" :select_item="selectedBank" @click_item="click_bar" :is_more="isBankListMore" />

　　

			click_bar(item) {
				if(item === 'more') {
					uni.showLoading({  
						title:'正在加载...'  
					});  
					getBankList({type: 'all'})
					.then(({data}) => {
						this.$refs.bankListAll.open()
						this.bankListAll = []
						data.map(item => {
							this.bankListAll.push({
								value: item.id,
								label: item.name
							})
						})
					})
					.finally(() => {  
						uni.hideLoading();  
					});
				}else{
					this.selectedBank = item	
				}
			},
			mutiple_select_change: function({detail}) {
				this.selectedBank = detail.data
			},

　　

 

//组件一

<template>
	<view class="list-container">
		<view class="list-bar">
			<text v-for="(item, index) in list" :key="index" class="item" :class="{active: select_item.value === item.value}" @click="click_item(item)">{{item.label}}</text>
			<text v-if="is_more" @click="click_item('more')" class="item" style="text-decoration: underline;">更多</text>
		</view>
	</view>
</template>

<script>
	export default {
		name: 'listBar',
		props: {
			list: {
				type: Array,
				default: []
			},
			select_item: {
				type: Object,
				default: {}
			},
			is_more: {
				type: Boolean,
				default: false
			}
		},
		methods: {
			click_item(item) {
				this.$emit('click_item', item)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.list-container {
		width: 100%;
		height: 100rpx;
		overflow-x: scroll;
		&::-webkit-scrollbar {
			/*隐藏滚轮*/
			display: none;
		}
		&::scrollbar {
			/*隐藏滚轮*/
			display: none;
		}	
		.list-bar{
			display: block;
			width: auto;
			white-space: nowrap;
			vertical-align: middle;
			line-height: 100rpx;
			padding: 0 10rpx;
			.item {
				height: 32rpx;
				font-size: 32rpx;
				font-weight: 400;
				color: #666666;
				line-height: 32rpx;
				white-space: nowrap;
				display: inline-block;
				margin: 30rpx 20rpx;
			}
			.active{		
				color: #4A80FF;
				font-weight: 600;
			}
			
		}

	}
</style>
 

　　

 

//组件二

<template>
	<view class="uni-popup-dialog">
		<view class="uni-dialog-title">
			<text class="uni-dialog-title-text" :class="['uni-popup__'+dialogType]">{{title}}</text>
		</view>
		<view class="uni-dialog-content">
			
			<checkbox-group  v-if="multiple" class="checklist-group" :class="{'is-list': true,'is-wrap':true}" @change="chagne">
				<label class="checklist-box" :class="item.labelClass" :style="[item.styleBackgroud]" v-for="(item,index) in dataList"
				 :key="index">
					<checkbox class="hidden" hidden :value="item.value+''" :checked="item.selected" />
					
					<view class="checkbox__inner"
					 :class="item.checkboxBgClass" :style="[item.styleIcon]">
						<view class="checkbox__inner-icon" :class="item.checkboxClass"></view>
					</view>
					
					<view class="checklist-content list-content">
						<text class="checklist-text" :class="item.textClass" :style="[item.styleIconText]">{{item.label}}</text>
						<view v-if="icon === 'right'" class="checkobx__list" :class="item.listClass" :style="[item.styleBackgroud]"></view>
					</view>
				</label>
			</checkbox-group>
			
			<radio-group v-else class="checklist-group is-list is-wrap" @change="chagne">
				<label v-for="(item,index) in dataList" :key="index" class="checklist-box" :class="item.labelClass" :style="[item.styleBackgroud]">
					
					<radio hidden :disabled="item.disabled" :value="item.value+''" :checked="item.selected" />
					
					<view v-if="(mode !=='tag' && mode !== 'list') || ( mode === 'list' && icon === 'left')" class="radio__inner"
					 :class="item.checkboxBgClass" :style="[item.styleBackgroud]">
						<view class="radio__inner-icon" :class="item.checkboxClass" :style="[item.styleIcon]"></view>
					</view>
					<view class="checklist-content" :class="{'list-content':mode === 'list' && icon ==='left'}">
						<text class="checklist-text" :class="item.textClass" :style="[item.styleIconText]">{{item.label}}</text>
						<view v-if="mode === 'list' && icon === 'right'" class="checkobx__list" :class="item.listClass" :style="[item.styleRightIcon]"></view>
					</view>
					
				</label>
			</radio-group>
			
			
		</view>
		
		<view class="uni-dialog-button-group">
			<view class="uni-dialog-button" @click="close">
				<text class="uni-dialog-button-text">取消</text>
			</view>
			<view class="uni-dialog-button uni-border-left" @click="onOk">
				<text class="uni-dialog-button-text uni-button-color">确定</text>
			</view>
		</view>
	</view>
</template>

<script>
	/**
	 * PopUp 弹出层-对话框样式
	 * @description 弹出层-对话框样式
	 * @tutorial https://ext.dcloud.net.cn/plugin?id=329
	 * @property {String} value input 模式下的默认值
	 * @property {String} placeholder input 模式下输入提示
	 * @property {String} type = [success|warning|info|error] 主题样式
	 *  @value success 成功
	 * 	@value warning 提示
	 * 	@value info 消息
	 * 	@value error 错误
	 * @property {String} mode = [base|input] 模式、
	 * 	@value base 基础对话框
	 * 	@value input 可输入对话框
	 * @property {String} content 对话框内容
	 * @property {Boolean} beforeClose 是否拦截取消事件
	 * @event {Function} confirm 点击确认按钮触发
	 * @event {Function} close 点击取消按钮触发
	 */
	import clientdb from './clientdb.js'
	export default {
		name: "uniPopupDialog",
		props: {
			selectData: {
				type: Array,
				default () {
					return []
				}
			},
			placeholder: {
				type: [String, Number],
				default: '请输入内容'
			},
			/**
			 * 对话框主题 success/warning/info/error	  默认 success
			 */
			type: {
				type: String,
				default: 'error'
			},
			/**
			 * 对话框模式 base/input
			 */
			mode: {
				type: String,
				default: 'base'
			},
			/**
			 * 对话框标题
			 */
			title: {
				type: String,
				default: '提示'
			},
			/**
			 * 对话框内容
			 */
			content: {
				type: String,
				default: ''
			},
			/**
			 * 拦截取消事件 ，如果拦截取消事件，必须监听close事件，执行 done()
			 */
			beforeClose: {
				type: Boolean,
				default: false
			},
			//select
            multiple: {
            	type: Boolean,
            	default: false
            },
			value: {
				type: [Object,Array, String, Number],
				default () {
					return ''
				}
			},
			
			min: {
				type: [Number, String],
				default: ''
			},
			max: {
				type: [Number, String],
				default: ''
			},
			wrap: {
				type: Boolean,
				default: false
			},
			icon: {
				type: String,
				default: 'left'
			},
			selectedColor:{
				type: String,
				default: ''
			},
			selectedTextColor:{
				type: String,
				default: ''
			},
			// clientDB 相关
			options: {
				type: [Object, Array],
				default () {
					return {}
				}
			},
			collection: {
				type: String,
				default: ''
			},
			action: {
				type: String,
				default: ''
			},
			field: {
				type: String,
				default: ''
			},
			pageData: {
				type: String,
				default: 'add'
			},
			pageCurrent: {
				type: Number,
				default: 1
			},
			pageSize: {
				type: Number,
				default: 20
			},
			getcount: {
				type: [Boolean, String],
				default: false
			},
			orderby: {
				type: String,
				default: ''
			},
			where: {
				type: [String, Object],
				default: ''
			},
			getone: {
				type: [Boolean, String],
				default: false
			},
			manual: {
				type: Boolean,
				default: false
			}
		},
		data() {
			return {
				dialogType: 'error',
				focus: false,
				val: "",
				//select
				dataList: [],
				range: [],
				contentText: {
					contentdown: '查看更多',
					contentrefresh: '加载中',
					contentnomore: '没有更多'
				},
				styles: {
					selectedColor: '#007aff',
					selectedTextColor: '#333',
				}
			}
		},
		inject: ['popup'],
		watch: {
			type(val) {
				this.dialogType = val
			},
			mode(val) {
				if (val === 'input') {
					this.dialogType = 'info'
				}
			},
			value(val) {
				this.val = val
			},
			selectData: {
				handler(newVal) {
					this.range = newVal
					this.dataList = this.getDataList(this.getSelectedValue(newVal))
				},
				deep: true
			},
			
			listData(newVal) {
				this.range = newVal
				this.dataList = this.getDataList(this.getSelectedValue(newVal))
			}
		},
		created() {
			// 对话框遮罩不可点击
			this.popup.mkclick = false
			if (this.mode === 'input') {
				this.dialogType = 'info'
				this.val = this.value
			} else {
				this.dialogType = this.type
			}
			
			//select
			this.form = this.getForm('uniForms')
			this.formItem = this.getForm('uniFormsItem')
			this.formItem && this.formItem.setValue(this.value)
			this.styles = {
				selectedColor: this.selectedColor,
				selectedTextColor: this.selectedTextColor
			}
			
			if (this.formItem) {
				if (this.formitem.label) {
					this.rename = this.formitem.label
					this.form.inputChildrens.push(this)
				}
			}
			
			if (this.selectData && this.selectData.length !== 0) {
				this.range = this.selectData
				this.dataList = this.getDataList(this.getSelectedValue(this.range))
			} else {
				if (this.collection) {
					this.loadData()
				}
			}
		},
		mounted() {
			this.focus = true
		},
		methods: {
			/**
			 * 点击确认按钮
			 */
			onOk() {
				this.$emit('confirm', () => {
					this.popup.close()
				}, this.val)
			},
			/**
			 * 点击取消按钮
			 */
			close() {
				if (this.beforeClose) {
					this.$emit('close', () => {
						this.popup.close()
					})
					return
				}
				this.popup.close()
			},
			
			
			//select`````````
			init(range) {},
				/**
				 * 获取父元素实例
				 */
				getForm(name = 'uniForms') {
					let parent = this.$parent;
					let parentName = parent.$options.name;
					while (parentName !== name) {
						parent = parent.$parent;
						if (!parent) return false
						parentName = parent.$options.name;
					}
					return parent;
				},
				chagne(e) {
					const values = e.detail.value
					let detail = {
						value: [],
						data: []
					}
					if (this.multiple) {
						this.range.forEach(item => {
							if (values.includes(item.value + '')) {
								detail.value.push(item.value)
								detail.data.push(item)
							}
						})
					} else {
						const range = this.range.find(item => item.value == values)
						if (range) {
							detail = {
								value: range.value,
								data: range
							}
						}
					}
					this.formItem && this.formItem.setValue(detail.value)
					this.$emit('input', detail.value)

					this.$emit('change', {
						detail
					})
					if (this.multiple) {
						// 如果 v-model 没有绑定 ，则走内部逻辑
						// if (this.value.length === 0) {
						this.dataList = this.getDataList(detail.value, true)
						// }
					} else {
						this.dataList = this.getDataList(detail.data)
					}
				},
				getLabelClass(item, index) {
					let classes = []
					if (this.multiple) {
						classes.push('is-list-multiple-box')
					} else {
						classes.push('is-list-box')
					}
					item.disabled && classes.push('is-list-disabled')
					index !== 0 && classes.push('is-list-border')
					
					classes = classes.join(' ')
					return classes
				},
				getCheckboxClass(item, type = '') {
					let classes = []
					if (this.multiple) {
						classes.push(...this.getClasses(item, 'default-multiple', type))
					} else {
						classes.push(...this.getClasses(item, 'default', type))
					}
					classes = classes.join(' ')
					return classes
				},
				getTextClass(item) {
					let classes = []
					classes.push(...this.getClasses(item, 'list'))
					classes = classes.join(' ')
					return classes
				},
			
				/**
				 * 获取渲染的新数组
				 * @param {Object} value 选中内容
				 */
				getDataList(value) {
					// 解除引用关系，破坏原引用关系，避免污染源数据
					let dataList = JSON.parse(JSON.stringify(this.range))
					let list = []
					if (this.multiple) {
						if (!Array.isArray(value)) {
							value = []
							// console.error('props 类型错误');
						}
					}
					dataList.forEach((item, index) => {
						item.disabled = item.disable || item.disabled || false
						if (this.multiple) {
							if (value.length > 0) {
								let have = value.find(val => val === item.value)
								item.selected = have !== undefined
							} else {
								item.selected = false
							}
						} else {
							item.selected = value.value === item.value
						}
			
						list.push(item)
					})
					return this.setRange(list)
				},
				/**
				 * 处理最大最小值
				 * @param {Object} list
				 */
				setRange(list) {
					let selectList = list.filter(item => item.selected)
					let min = Number(this.min) || 0
					let max = Number(this.max) || ''
					list.forEach((item, index) => {
						if (this.multiple) {
							if (selectList.length <= min) {
								let have = selectList.find(val => val.value === item.value)
								if (have !== undefined) {
									item.disabled = true
								}
							}
			
							if (selectList.length >= max && max !== '') {
								let have = selectList.find(val => val.value === item.value)
								if (have === undefined) {
									item.disabled = true
								}
							}
						}
						this.setClass(item, index)
						list[index] = item
					})
					return list
				},
				/**
				 * 设置 class
				 * @param {Object} item
				 * @param {Object} index
				 */
				setClass(item, index) {
					// 设置 label 的 class
					item.labelClass = this.getLabelClass(item, index)
					// 设置 checkbox外层样式
					item.checkboxBgClass = this.getCheckboxClass(item, '-bg')
					// 设置 checkbox 内层样式
					item.checkboxClass = this.getCheckboxClass(item)
					// 设置文本样式
					item.textClass = this.getTextClass(item)
					// 设置 list 对勾右侧样式
					item.listClass = this.getCheckboxClass(item, '-list')
			
					//  设置自定义样式
					item.styleBackgroud = this.setStyleBackgroud(item)
					item.styleIcon = this.setStyleIcon(item)
					item.styleIconText = this.setStyleIconText(item)
					item.styleRightIcon = this.setStyleRightIcon(item)
				},
				/**
				 * 获取 class
				 */
				getClasses(item, name, type = '') {
					let classes = []
					item.disabled && classes.push('is-' + name + '-disabled' + type)
					item.selected && classes.push('is-' + name + '-checked' + type)
			
					if (this.mode !== 'button' || name === 'button') {
						item.selected && item.disabled && classes.push('is-' + name + '-disabled-checked' + type)
					}
			
					return classes
				},
				/**
				 * 获取选中值
				 * @param {Object} range
				 */
				getSelectedValue(range) {
					if (!this.multiple) return this.value
					let selectedArr = []
					range.forEach((item) => {
						if (item.selected) {
							selectedArr.push(item.value)
						}
					})
					return this.value.length > 0 ? this.value : selectedArr
				},
			
				/**
				 * 设置背景样式
				 */
				setStyleBackgroud(item) {
					let styles = {}
			
					if (item.selected) {
						styles.borderColor = this.styles.selectedColor
					}
					return styles
				},
				setStyleIcon(item) {
					let styles = {}
			
					if (item.selected) {
						styles.backgroundColor = this.styles.selectedColor
						styles.borderColor = this.styles.selectedColor
					}
					return styles
				},
				setStyleIconText(item) {
					let styles = {}
					if (item.selected) {
						if (this.styles.selectedTextColor) {
							styles.color = this.styles.selectedTextColor
						} else {
							if(this.mode === 'tag'){
								styles.color = '#fff'
							}else{
								styles.color = this.styles.selectedColor
							}
						}
					}
					return styles
				},
				setStyleRightIcon(item){
					let styles = {}
					if (item.selected) {
						styles.borderColor = this.styles.selectedColor
					}
			
					return styles
				}
		}
	}
</script>

<style lang="scss" scoped>
	.uni-popup-dialog {
		width: 300px;
		border-radius: 15px;
		background-color: #fff;
	}

	.uni-dialog-title {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		justify-content: center;
		padding-top: 15px;
		padding-bottom: 5px;
	}

	.uni-dialog-title-text {
		font-size: 16px;
		font-weight: 500;
	}

	.uni-dialog-content {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		justify-content: center;
		align-items: center;
		padding: 5px 15px 15px 15px;
	}

	.uni-dialog-content-text {
		font-size: 14px;
		color: #6e6e6e;
	}

	.uni-dialog-button-group {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		border-top-color: #f5f5f5;
		border-top-style: solid;
		border-top-width: 1px;
	}

	.uni-dialog-button {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */

		flex: 1;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		height: 45px;
	}

	.uni-border-left {
		border-left-color: #f0f0f0;
		border-left-style: solid;
		border-left-width: 1px;
	}

	.uni-dialog-button-text {
		font-size: 14px;
	}

	.uni-button-color {
		color: $uni-color-primary;
	}

	.uni-dialog-input {
		flex: 1;
		font-size: 14px;
	}

	.uni-popup__success {
		color: $uni-color-success;
	}

	.uni-popup__warn {
		color: $uni-color-warning;
	}

	.uni-popup__error {
		color: $uni-color-error;
	}

	.uni-popup__info {
		color: #909399;
	}
	
	.uni-data-checklist {
		position: relative;
		z-index: 0;
		/* min-height: 36px; */
	}

	.uni-data-loading {
		display: flex;
		align-items: center;
		/* justify-content: center; */
		height: 36px;
		padding-left: 10px;
	}

	.checklist-group {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		flex-wrap: wrap;
	}

	.checklist-box {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		align-items: center;
		margin: 5px 0;
		margin-right: 25px;
	}

	.checklist-text {
		font-size: 14px;
		color: #333;
		margin-left: 5px;
		transition: color 0.2s;
	}

	.is-button {
		margin-right: 10px;
		padding: 3px 15px;
		border: 1px #DCDFE6 solid;
		border-radius: 3px;
		transition: border-color 0.2s;
	}

	.is-list {
		flex-direction: column;
	}

	.is-list-box {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		padding: 10px 15px;
		padding-left: 0;
		margin: 0;
	}

	.checklist-content {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex: 1;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
	}

	.list-content {
		margin-left: 5px;
	}

	.is-list-multiple-box {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		padding: 10px 15px;
		padding-left: 0;
		margin: 0;
	}

	.is-list-border {
		border-top: 1px #eee solid;
	}

	.is-tag {
		margin-right: 10px;
		padding: 3px 10px;
		border: 1px #eee solid;
		border-radius: 3px;
		background-color: #f5f5f5;
		/* transition: border-color 0.1s; */
	}

	.is-tag-text {
		margin: 0;
		color: #666;
	}

	.checkbox__inner {
		flex-shrink: 0;
		position: relative;
		border: 1px solid #DCDFE6;
		border-radius: 2px;
		box-sizing: border-box;
		width: 16px;
		height: 16px;
		background-color: #fff;
		z-index: 1;
		transition: border-color 0.1s;
	}

	.checkbox__inner-icon {
		border: 1px solid #fff;
		border-left: 0;
		border-top: 0;
		height: 8px;
		left: 5px;
		position: absolute;
		top: 1px;
		width: 3px;
		opacity: 0;
		transition: transform .2s;
		transform-origin: center;
		transform: rotate(40deg) scaleY(0.4);
	}

	.radio__inner {
		flex-shrink: 0;
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		justify-content: center;
		align-items: center;
		position: relative;
		border: 1px solid #DCDFE6;
		border-radius: 2px;
		box-sizing: border-box;
		width: 16px;
		height: 16px;
		border-radius: 16px;
		background-color: #fff;
		z-index: 1;
		transition: border-color .3s;
	}

	.radio__inner-icon {
		width: 8px;
		height: 8px;
		border-radius: 10px;
		opacity: 0;
		transition: transform .3s;
	}

	.checkobx__list {
		border: 1px solid #fff;
		border-left: 0;
		border-top: 0;
		height: 12px;
		width: 6px;
		transform-origin: center;
		opacity: 0;
		transition: all 0.3s;
		transform: rotate(45deg);
	}


	/* 禁用样式 */
	.is-default-disabled-bg {
		background-color: #F2F6FC;
		border-color: #DCDFE6;
		/* #ifdef H5 */
		cursor: not-allowed;
		/* #endif */
	}

	.is-default-multiple-disabled-bg {
		background-color: #F2F6FC;
		border-color: #DCDFE6;
		/* #ifdef H5 */
		cursor: not-allowed;
		/* #endif */
	}

	.is-default-disabled {
		border-color: #F2F6FC;
	}

	.is-default-multiple-disabled {
		border-color: #F2F6FC;
	}

	.is-list-disabled {
		/* #ifdef H5 */
		cursor: not-allowed;
		/* #endif */
		color: #999;
	}

	.is-list-disabled-checked {
		color: #a1dcc1;
	}


	.is-button-disabled {
		/* #ifdef H5 */
		cursor: not-allowed;
		/* #endif */
		border-color: #EBEEF5;
	}

	.is-button-text-disabled {
		color: #C0C4CC;
	}

	.is-button-disabled-checked {
		border-color: #a1dcc1;
	}

	.is-tag-disabled {
		/* #ifdef H5 */
		cursor: not-allowed;
		/* #endif */
		border-color: #e9e9eb;
		background-color: #f4f4f5;
	}

	.is-tag-text-disabled {
		color: #bcbec2;
	}

	/* 选中样式 */
	.is-default-checked-bg {
		border-color: #007aff;
	}

	.is-default-multiple-checked-bg {
		border-color: #007aff;
		background-color: #007aff;
	}

	.is-default-checked {
		opacity: 1;
		background-color: #007aff;
		transform: rotate(45deg) scaleY(1);
	}

	.is-default-multiple-checked {
		opacity: 1;
		transform: rotate(45deg) scaleY(1);
	}

	.is-default-disabled-checked-bg {
		opacity: 0.4;
	}

	.is-default-multiple-disabled-checked-bg {
		opacity: 0.4;
	}


	.is-default-checked-list {
		border-color: #007aff;
		opacity: 1;
		transform: rotate(45deg) scaleY(1);
	}

	.is-default-multiple-checked-list {
		border-color: #007aff;
		opacity: 1;
		transform: rotate(45deg) scaleY(1);
	}

	.is-list-disabled-checked {
		opacity: 0.4;
	}

	.is-default-disabled-checked-list {
		opacity: 0.4;
	}

	.is-default-multiple-disabled-checked-list {
		opacity: 0.4;
	}

	.is-button-checked {
		border-color: #007aff;
	}

	.is-button-disabled-checked {
		opacity: 0.4;
	}

	.is-list-checked {
		color: #007aff;
	}

	.is-tag-checked {
		border-color: #007aff;
		background-color: #007aff;
	}

	.is-tag-text-checked {
		color: #fff;
	}

	.is-tag-disabled-checked {
		opacity: 0.4;
	}


	.disabled-cursor {
		/* #ifdef H5 */
		cursor: not-allowed;
		/* #endif */
	}

	.is-wrap {
		flex-direction: column;
	}
	
	.hidden {
		 /* #ifdef MP-ALIPAY */
		 display: none;
		 /* #endif */
	}


</style>

　　

//cilentDb

const events = {
	load: 'load',
	error: 'error'
}
const pageMode = {
	add: 'add',
	replace: 'replace'
}

const attrs = [
	'pageCurrent',
	'pageSize',
	'collection',
	'action',
	'field',
	'getcount',
	'orderby',
	'where'
]

export default {
	data() {
		return {
			loading: false,
			listData: this.getone ? {} : [],
			paginationInternal: {
				current: this.pageCurrent,
				size: this.pageSize,
				count: 0
			},
			errorMessage: ''
		}
	},
	created() {
		let db = null;
		let dbCmd = null;

		if(this.collection){
			this.db = uniCloud.database();
			this.dbCmd = this.db.command;
		}

		this._isEnded = false

		this.$watch(() => {
			var al = []
			attrs.forEach(key => {
				al.push(this[key])
			})
			return al
		}, (newValue, oldValue) => {
			this.paginationInternal.pageSize = this.pageSize

			let needReset = false
			for (let i = 2; i < newValue.length; i++) {
				if (newValue[i] != oldValue[i]) {
					needReset = true
					break
				}
			}
			if (needReset) {
				this.clear()
				this.reset()
			}
			if (newValue[0] != oldValue[0]) {
				this.paginationInternal.current = this.pageCurrent
			}

			this._execLoadData()
		})

		// #ifdef H5
		if (process.env.NODE_ENV === 'development') {
			this._debugDataList = []
			if (!window.unidev) {
				window.unidev = {
					clientDB: {
						data: []
					}
				}
			}
			unidev.clientDB.data.push(this._debugDataList)
		}
		// #endif

		// #ifdef MP-TOUTIAO
		let changeName
		let events = this.$scope.dataset.eventOpts
		for (var i = 0; i < events.length; i++) {
			let event = events[i]
			if (event[0].includes('^load')) {
				changeName = event[1][0][0]
			}
		}
		if (changeName) {
			let parent = this.$parent
			let maxDepth = 16
			this._changeDataFunction = null
			while (parent && maxDepth > 0) {
				let fun = parent[changeName]
				if (fun && typeof fun === 'function') {
					this._changeDataFunction = fun
					maxDepth = 0
					break
				}
				parent = parent.$parent
				maxDepth--;
			}
		}
		// #endif

		// if (!this.manual) {
		// 	this.loadData()
		// }
	},
	// #ifdef H5
	beforeDestroy() {
		if (process.env.NODE_ENV === 'development' && window.unidev) {
			var cd = this._debugDataList
			var dl = unidev.clientDB.data
			for (var i = dl.length - 1; i >= 0; i--) {
				if (dl[i] === cd) {
					dl.splice(i, 1)
					break
				}
			}
		}
	},
	// #endif
	methods: {
		loadData(args1, args2) {
			let callback = null
			if (typeof args1 === 'object') {
				if (args1.clear) {
					this.clear()
					this.reset()
				}
				if (args1.current !== undefined) {
					this.paginationInternal.current = args1.current
				}
				if (typeof args2 === 'function') {
					callback = args2
				}
			} else if (typeof args1 === 'function') {
				callback = args1
			}

			this._execLoadData(callback)
		},
		loadMore() {
			if (this._isEnded) {
				return
			}
			this._execLoadData()
		},
		refresh() {
			this.clear()
			this._execLoadData()
		},
		clear() {
			this._isEnded = false
			this.listData = []
		},
		reset() {
			this.paginationInternal.current = 1
		},
		remove(id, {
			action,
			callback,
			confirmTitle,
			confirmContent
		} = {}) {
			if (!id || !id.length) {
				return
			}
			uni.showModal({
				title: confirmTitle || '提示',
				content: confirmContent || '是否删除该数据',
				showCancel: true,
				success: (res) => {
					if (!res.confirm) {
						return
					}
					this._execRemove(id, action, callback)
				}
			})
		},
		_execLoadData(callback) {
			if (this.loading) {
				return
			}
			this.loading = true
			this.errorMessage = ''

			this._getExec().then((res) => {
				this.loading = false
				const {
					data,
					count
				} = res.result
				this._isEnded = data.length < this.pageSize

				callback && callback(data, this._isEnded)
				this._dispatchEvent(events.load, data)

				if (this.getone) {
					this.listData = data.length ? data[0] : undefined
				} else if (this.pageData === pageMode.add) {
					this.listData.push(...data)
					if (this.listData.length) {
						this.paginationInternal.current++
					}
				} else if (this.pageData === pageMode.replace) {
					this.listData = data
					this.paginationInternal.count = count
				}

				// #ifdef H5
				if (process.env.NODE_ENV === 'development') {
					this._debugDataList.length = 0
					this._debugDataList.push(...JSON.parse(JSON.stringify(this.listData)))
				}
				// #endif
			}).catch((err) => {
				this.loading = false
				this.errorMessage = err
				callback && callback()
				this.$emit(events.error, err)
			})
		},
		_getExec() {
			let exec = this.db
			if (this.action) {
				exec = exec.action(this.action)
			}

			exec = exec.collection(this.collection)

			if (!(!this.where || !Object.keys(this.where).length)) {
				exec = exec.where(this.where)
			}
			if (this.field) {
				exec = exec.field(this.field)
			}
			if (this.orderby) {
				exec = exec.orderBy(this.orderby)
			}

			const {
				current,
				size
			} = this.paginationInternal
			exec = exec.skip(size * (current - 1)).limit(size).get({
				getCount: this.getcount
			})

			return exec
		},
		_execRemove(id, action, callback) {
			if (!this.collection || !id) {
				return
			}

			const ids = Array.isArray(id) ? id : [id]
			if (!ids.length) {
				return
			}

			uni.showLoading({
				mask: true
			})

			let exec = this.db
			if (action) {
				exec = exec.action(action)
			}

			exec.collection(this.collection).where({
				_id: dbCmd.in(ids)
			}).remove().then((res) => {
				callback && callback(res.result)
				if (this.pageData === pageMode.replace) {
					this.refresh()
				} else {
					this.removeData(ids)
				}
			}).catch((err) => {
				uni.showModal({
					content: err.message,
					showCancel: false
				})
			}).finally(() => {
				uni.hideLoading()
			})
		},
		removeData(ids) {
			let il = ids.slice(0)
			let dl = this.listData
			for (let i = dl.length - 1; i >= 0; i--) {
				let index = il.indexOf(dl[i]._id)
				if (index >= 0) {
					dl.splice(i, 1)
					il.splice(index, 1)
				}
			}
		},
		_dispatchEvent(type, data) {
			if (this._changeDataFunction) {
				this._changeDataFunction(data, this._isEnded)
			} else {
				this.$emit(type, data, this._isEnded)
			}
		}
	}
}

　　

 

标签：default,color,type,list,value,item,tab,uniap,border
来源： https://www.cnblogs.com/guiyishanren/p/14172375.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。