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.
91 lines
2.4 KiB
91 lines
2.4 KiB
<template> |
|
<!-- #ifdef APP-NVUE --> |
|
<header> |
|
<!-- #endif --> |
|
<view |
|
class="u-index-anchor u-border-bottom" |
|
:ref="`u-index-anchor-${text}`" |
|
:style="{ |
|
height: $u.addUnit(height), |
|
backgroundColor: bgColor |
|
}" |
|
> |
|
<text |
|
class="u-index-anchor__text" |
|
:style="{ |
|
fontSize: $u.addUnit(size), |
|
color: color |
|
}" |
|
>{{ text }}</text> |
|
</view> |
|
<!-- #ifdef APP-NVUE --> |
|
</header> |
|
<!-- #endif --> |
|
</template> |
|
|
|
<script> |
|
import props from './props.js'; |
|
// #ifdef APP-NVUE |
|
const dom = uni.requireNativePlugin('dom') |
|
// #endif |
|
/** |
|
* IndexAnchor 列表锚点 |
|
* @description |
|
* @tutorial https://uviewui.com/components/indexList.html |
|
* @property {String | Number} text 列表锚点文本内容 |
|
* @property {String} color 列表锚点文字颜色 ( 默认 '#606266' ) |
|
* @property {String | Number} size 列表锚点文字大小，单位默认px ( 默认 14 ) |
|
* @property {String} bgColor 列表锚点背景颜色 ( 默认 '#dedede' ) |
|
* @property {String | Number} height 列表锚点高度，单位默认px ( 默认 32 ) |
|
* @example <u-index-anchor :text="indexList[index]"></u-index-anchor> |
|
*/ |
|
export default { |
|
name: 'u-index-anchor', |
|
mixins: [uni.$u.mpMixin, uni.$u.mixin,props], |
|
data() { |
|
return { |
|
} |
|
}, |
|
mounted() { |
|
this.init() |
|
}, |
|
methods: { |
|
init() { |
|
// 此处会活动父组件实例，并赋值给实例的parent属性 |
|
const indexList = uni.$u.$parent.call(this, 'u-index-list') |
|
if (!indexList) { |
|
return uni.$u.error('u-index-anchor必须要搭配u-index-list组件使用') |
|
} |
|
// 将当前实例放入到u-index-list中 |
|
indexList.anchors.push(this) |
|
const indexListItem = uni.$u.$parent.call(this, 'u-index-item') |
|
// #ifndef APP-NVUE |
|
// 只有在非nvue下，u-index-anchor才是嵌套在u-index-item中的 |
|
if (!indexListItem) { |
|
return uni.$u.error('u-index-anchor必须要搭配u-index-item组件使用') |
|
} |
|
// 设置u-index-item的id为anchor的text标识符，因为非nvue下滚动列表需要依赖scroll-view滚动到元素的特性 |
|
indexListItem.id = this.text.charCodeAt(0) |
|
// #endif |
|
} |
|
}, |
|
} |
|
</script> |
|
|
|
<style lang="scss" scoped> |
|
@import "../../libs/css/components.scss"; |
|
|
|
.u-index-anchor { |
|
position: sticky; |
|
top: 0; |
|
@include flex; |
|
align-items: center; |
|
padding-left: 15px; |
|
z-index: 1; |
|
|
|
&__text { |
|
@include flex; |
|
align-items: center; |
|
} |
|
} |
|
</style>
|
|
|