You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

88 lines
2.0 KiB

This file contains ambiguous Unicode characters!

This file contains ambiguous Unicode characters that may be confused with others in your current locale. If your use case is intentional and legitimate, you can safely ignore this warning. Use the Escape button to highlight these characters.

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