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.

92 lines
2.4 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 -->
<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>