更新组件演示页面,方便用户直接使用组件,去除tn-button的默认背景色,tn-avatar修改参数默认值,修复tn-avatar-group最开始头像进行了偏移、修复无法使用标签的bug,tn-badge修改参数默认值,tn-collapse-item修复背景颜色失效问题,滚动通知移除默认背景颜色和字体大小,tn-count-down修复时间单位不正确问题,列表组件修复背景颜色问题,tn-nav-bar返回按钮修改为可进行修改的图标,tn-step添加点击步骤进行跳转,tn-loading修复默认激活颜色出错问题,tn-tag移除默认背景颜色,优化阴影大小css

This commit is contained in:
JaylenTech
2022-02-08 19:55:15 +08:00
parent 043ee3f585
commit 946bb52c03
94 changed files with 6296 additions and 4727 deletions

View File

@@ -0,0 +1,70 @@
<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>