mirror of
https://gitee.com/TSpecific/tuniao-ui.git
synced 2026-03-07 16:24:01 +08:00
71 lines
1.8 KiB
Vue
71 lines
1.8 KiB
Vue
<template>
|
|
|
|
<view class="components-index-list">
|
|
|
|
<!-- 顶部自定义导航 -->
|
|
<tn-nav-bar fixed>IndexList索引列表</tn-nav-bar>
|
|
|
|
<!-- 页面内容 -->
|
|
<view :style="{paddingTop: vuex_custom_bar_height + 'px'}">
|
|
|
|
<tn-index-list :scrollTop="scrollTop" :indexList="indexList" :customBarHeight="vuex_custom_bar_height" :stickyTop="vuex_custom_bar_height">
|
|
<view v-for="(item, index) in list" :key="index">
|
|
<tn-index-anchor :index="item.letter"></tn-index-anchor>
|
|
<view v-for="(data_item,data_index) in item.data" :key="data_index" class="index-list-item tn-border-solid-bottom">
|
|
<image class="index-list-item__image" src="/static/favicon.ico"></image>
|
|
<view class="index-list-item__name">{{ data_item.name }}</view>
|
|
</view>
|
|
</view>
|
|
</tn-index-list>
|
|
|
|
</view>
|
|
|
|
</view>
|
|
|
|
</template>
|
|
|
|
<script>
|
|
import indexList from '../../mock/index.list.js'
|
|
const letterArr = indexList.list.map(val => {
|
|
return val.letter
|
|
})
|
|
export default {
|
|
name: 'componentsIndexListAvatar',
|
|
data() {
|
|
return {
|
|
// 滚动的距离
|
|
scrollTop: 0,
|
|
// 索引列表
|
|
indexList: letterArr,
|
|
list: indexList.list
|
|
}
|
|
},
|
|
onPageScroll(e) {
|
|
this.scrollTop = e.scrollTop
|
|
},
|
|
methods: {
|
|
|
|
}
|
|
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.index-list-item {
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
justify-content: flex-start;
|
|
overflow: hidden;
|
|
color: $tn-font-color;
|
|
font-size: 28rpx;
|
|
|
|
&__image {
|
|
width: 100rpx;
|
|
height: 100rpx;
|
|
margin: 8rpx 8rpx;
|
|
margin-right: 10rpx;
|
|
}
|
|
}
|
|
</style>
|