mirror of
				https://gitee.com/hhyykk/ipms-sjy.git
				synced 2025-10-31 10:18:42 +08:00 
			
		
		
		
	初始化管理后台的 uniapp 版本
This commit is contained in:
		| @@ -0,0 +1,108 @@ | ||||
| <template> | ||||
| 	<!-- #ifndef APP-NVUE --> | ||||
| 	<view class="uni-list uni-border-top-bottom"> | ||||
| 		<view v-if="border" class="uni-list--border-top"></view> | ||||
| 		<slot /> | ||||
| 		<view v-if="border" class="uni-list--border-bottom"></view> | ||||
| 	</view> | ||||
| 	<!-- #endif --> | ||||
| 	<!-- #ifdef APP-NVUE --> | ||||
| 	<list class="uni-list" :class="{ 'uni-list--border': border }" :enableBackToTop="enableBackToTop" loadmoreoffset="15"><slot /></list> | ||||
| 	<!-- #endif --> | ||||
| </template> | ||||
|  | ||||
| <script> | ||||
| /** | ||||
|  * List 列表 | ||||
|  * @description 列表组件 | ||||
|  * @tutorial https://ext.dcloud.net.cn/plugin?id=24 | ||||
|  * @property {String} 	border = [true|false] 		标题 | ||||
|  */ | ||||
| export default { | ||||
| 	name: 'uniList', | ||||
| 	'mp-weixin': { | ||||
| 		options: { | ||||
| 			multipleSlots: false | ||||
| 		} | ||||
| 	}, | ||||
| 	props: { | ||||
| 		enableBackToTop: { | ||||
| 			type: [Boolean, String], | ||||
| 			default: false | ||||
| 		}, | ||||
| 		scrollY: { | ||||
| 			type: [Boolean, String], | ||||
| 			default: false | ||||
| 		}, | ||||
| 		border: { | ||||
| 			type: Boolean, | ||||
| 			default: true | ||||
| 		} | ||||
| 	}, | ||||
| 	// provide() { | ||||
| 	// 	return { | ||||
| 	// 		list: this | ||||
| 	// 	}; | ||||
| 	// }, | ||||
| 	created() { | ||||
| 		this.firstChildAppend = false; | ||||
| 	}, | ||||
| 	methods: { | ||||
| 		loadMore(e) { | ||||
| 			this.$emit('scrolltolower'); | ||||
| 		} | ||||
| 	} | ||||
| }; | ||||
| </script> | ||||
| <style lang="scss" > | ||||
| $uni-bg-color:#ffffff; | ||||
| $uni-border-color:#e5e5e5; | ||||
| .uni-list { | ||||
| 	/* #ifndef APP-NVUE */ | ||||
| 	display: flex; | ||||
| 	/* #endif */ | ||||
| 	background-color: $uni-bg-color; | ||||
| 	position: relative; | ||||
| 	flex-direction: column; | ||||
| } | ||||
|  | ||||
| .uni-list--border { | ||||
| 	position: relative; | ||||
| 	/* #ifdef APP-NVUE */ | ||||
| 	border-top-color: $uni-border-color; | ||||
| 	border-top-style: solid; | ||||
| 	border-top-width: 0.5px; | ||||
| 	border-bottom-color: $uni-border-color; | ||||
| 	border-bottom-style: solid; | ||||
| 	border-bottom-width: 0.5px; | ||||
| 	/* #endif */ | ||||
| 	z-index: -1; | ||||
| } | ||||
|  | ||||
| /* #ifndef APP-NVUE */ | ||||
|  | ||||
| .uni-list--border-top { | ||||
| 	position: absolute; | ||||
| 	top: 0; | ||||
| 	right: 0; | ||||
| 	left: 0; | ||||
| 	height: 1px; | ||||
| 	-webkit-transform: scaleY(0.5); | ||||
| 	transform: scaleY(0.5); | ||||
| 	background-color: $uni-border-color; | ||||
| 	z-index: 1; | ||||
| } | ||||
|  | ||||
| .uni-list--border-bottom { | ||||
| 	position: absolute; | ||||
| 	bottom: 0; | ||||
| 	right: 0; | ||||
| 	left: 0; | ||||
| 	height: 1px; | ||||
| 	-webkit-transform: scaleY(0.5); | ||||
| 	transform: scaleY(0.5); | ||||
| 	background-color: $uni-border-color; | ||||
| } | ||||
|  | ||||
| /* #endif */ | ||||
| </style> | ||||
| @@ -0,0 +1,65 @@ | ||||
| <template> | ||||
|     <!-- #ifdef APP-NVUE --> | ||||
|     <refresh :display="display" @refresh="onrefresh" @pullingdown="onpullingdown"> | ||||
|         <slot /> | ||||
|     </refresh> | ||||
|     <!-- #endif --> | ||||
|     <!-- #ifndef APP-NVUE --> | ||||
|     <view ref="uni-refresh" class="uni-refresh" v-show="isShow"> | ||||
|         <slot /> | ||||
|     </view> | ||||
|     <!-- #endif --> | ||||
| </template> | ||||
|  | ||||
| <script> | ||||
|     export default { | ||||
|         name: 'UniRefresh', | ||||
|         props: { | ||||
|             display: { | ||||
|                 type: [String], | ||||
|                 default: "hide" | ||||
|             } | ||||
|         }, | ||||
|         data() { | ||||
|             return { | ||||
|                 pulling: false | ||||
|             } | ||||
|         }, | ||||
|         computed: { | ||||
|             isShow() { | ||||
|                 if (this.display === "show" || this.pulling === true) { | ||||
|                     return true; | ||||
|                 } | ||||
|                 return false; | ||||
|             } | ||||
|         }, | ||||
|         created() {}, | ||||
|         methods: { | ||||
|             onchange(value) { | ||||
|                 this.pulling = value; | ||||
|             }, | ||||
|             onrefresh(e) { | ||||
|                 this.$emit("refresh", e); | ||||
|             }, | ||||
|             onpullingdown(e) { | ||||
|                 // #ifdef APP-NVUE | ||||
|                 this.$emit("pullingdown", e); | ||||
|                 // #endif | ||||
|                 // #ifndef APP-NVUE | ||||
|                 var detail = { | ||||
|                     viewHeight: 90, | ||||
|                     pullingDistance: e.height | ||||
|                 } | ||||
|                 this.$emit("pullingdown", detail); | ||||
|                 // #endif | ||||
|             } | ||||
|         } | ||||
|     } | ||||
| </script> | ||||
|  | ||||
| <style> | ||||
|     .uni-refresh { | ||||
|         height: 0; | ||||
|         overflow: hidden; | ||||
|     } | ||||
| </style> | ||||
| @@ -0,0 +1,87 @@ | ||||
| var pullDown = { | ||||
|     threshold: 95, | ||||
|     maxHeight: 200, | ||||
|     callRefresh: 'onrefresh', | ||||
|     callPullingDown: 'onpullingdown', | ||||
|     refreshSelector: '.uni-refresh' | ||||
| }; | ||||
|  | ||||
| function ready(newValue, oldValue, ownerInstance, instance) { | ||||
|     var state = instance.getState() | ||||
|     state.canPullDown = newValue; | ||||
|     // console.log(newValue); | ||||
| } | ||||
|  | ||||
| function touchStart(e, instance) { | ||||
|     var state = instance.getState(); | ||||
|     state.refreshInstance = instance.selectComponent(pullDown.refreshSelector); | ||||
|     state.canPullDown = (state.refreshInstance != null && state.refreshInstance != undefined); | ||||
|     if (!state.canPullDown) { | ||||
|         return | ||||
|     } | ||||
|  | ||||
|     // console.log("touchStart"); | ||||
|  | ||||
|     state.height = 0; | ||||
|     state.touchStartY = e.touches[0].pageY || e.changedTouches[0].pageY; | ||||
|     state.refreshInstance.setStyle({ | ||||
|         'height': 0 | ||||
|     }); | ||||
|     state.refreshInstance.callMethod("onchange", true); | ||||
| } | ||||
|  | ||||
| function touchMove(e, ownerInstance) { | ||||
|     var instance = e.instance; | ||||
|     var state = instance.getState(); | ||||
|     if (!state.canPullDown) { | ||||
|         return | ||||
|     } | ||||
|  | ||||
|     var oldHeight = state.height; | ||||
|     var endY = e.touches[0].pageY || e.changedTouches[0].pageY; | ||||
|     var height = endY - state.touchStartY; | ||||
|     if (height > pullDown.maxHeight) { | ||||
|         return; | ||||
|     } | ||||
|  | ||||
|     var refreshInstance = state.refreshInstance; | ||||
|     refreshInstance.setStyle({ | ||||
|         'height': height + 'px' | ||||
|     }); | ||||
|  | ||||
|     height = height < pullDown.maxHeight ? height : pullDown.maxHeight; | ||||
|     state.height = height; | ||||
|     refreshInstance.callMethod(pullDown.callPullingDown, { | ||||
|         height: height | ||||
|     }); | ||||
| } | ||||
|  | ||||
| function touchEnd(e, ownerInstance) { | ||||
|     var state = e.instance.getState(); | ||||
|     if (!state.canPullDown) { | ||||
|         return | ||||
|     } | ||||
|  | ||||
|     state.refreshInstance.callMethod("onchange", false); | ||||
|  | ||||
|     var refreshInstance = state.refreshInstance; | ||||
|     if (state.height > pullDown.threshold) { | ||||
|         refreshInstance.callMethod(pullDown.callRefresh); | ||||
|         return; | ||||
|     } | ||||
|  | ||||
|     refreshInstance.setStyle({ | ||||
|         'height': 0 | ||||
|     }); | ||||
| } | ||||
|  | ||||
| function propObserver(newValue, oldValue, instance) { | ||||
|     pullDown = newValue; | ||||
| } | ||||
|  | ||||
| module.exports = { | ||||
|     touchmove: touchMove, | ||||
|     touchstart: touchStart, | ||||
|     touchend: touchEnd, | ||||
|     propObserver: propObserver | ||||
| } | ||||
		Reference in New Issue
	
	Block a user
	 YunaiV
					YunaiV