<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>
|
