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