uni-app引入使用uView

yudao-ui-app/uni_modules/uview-ui/components/u-index-item/u-index-item.vue

@@ -0,0 +1,87 @@
+<template>
+	<!-- #ifdef APP-NVUE -->
+	<cell ref="u-index-item">
+		<!-- #endif -->
+		<view
+			class="u-index-item"
+			:id="`u-index-item-${id}`"
+			:class="[`u-index-item-${id}`]"
+		>
+			<slot />
+		</view>
+		<!-- #ifdef APP-NVUE -->
+	</cell>
+	<!-- #endif -->
+</template>
+
+<script>
+	import props from './props.js';
+	// #ifdef APP-NVUE
+	// 由于weex为阿里的KPI业绩考核的产物，所以不支持百分比单位，这里需要通过dom查询组件的宽度
+	const dom = uni.requireNativePlugin('dom')
+	// #endif
+	/**
+	 * IndexItem 
+	 * @description 
+	 * @tutorial https://uviewui.com/components/indexList.html
+	 * @property {String}
+	 * @event {Function}
+	 * @example
+	 */
+	export default {
+		name: 'u-index-item',
+		mixins: [uni.$u.mpMixin, uni.$u.mixin,props],
+		data() {
+			return {
+				// 本组件到滚动条顶部的距离
+				top: 0,
+				height: 0,
+				id: ''
+			}
+		},
+		created() {
+			// 子组件u-index-anchor的实例
+			this.anchor = {}
+		},
+		mounted() {
+			this.init()
+		},
+		methods: {
+			init() {
+				// 此处会活动父组件实例，并赋值给实例的parent属性
+				this.getParentData('u-index-list')
+				if (!this.parent) {
+					return uni.$u.error('u-index-item必须要搭配u-index-list组件使用')
+				}
+				uni.$u.sleep().then(() =>{
+					this.getIndexItemRect().then(size => {
+						// 由于对象的引用特性，此处会同时生效到父组件的children数组的本实例的top属性中，供父组件判断读取
+						this.top = Math.ceil(size.top)
+						this.height = Math.ceil(size.height)
+					})
+				})
+			},
+			getIndexItemRect() {
+				return new Promise(resolve => {
+					// #ifndef APP-NVUE
+					this.$uGetRect('.u-index-item').then(size => {
+						resolve(size)
+					})
+					// #endif
+
+					// #ifdef APP-NVUE
+					const ref = this.$refs['u-index-item']
+					dom.getComponentRect(ref, res => {
+						resolve(res.size)
+					})
+					// #endif
+				}) 
+			}
+		},
+	}
+</script>
+
+<style lang="scss" scoped>
+	@import "../../libs/css/components.scss";
+	
+</style>