88 lines
2.0 KiB
Vue
88 lines
2.0 KiB
Vue
<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>
|