<template>
<view class="tm-quickIndex " :style="{
height: activeHeight_watch + 'px'
}">
<view :style="{
height: activeHeight_watch + 'px'
}">
<tm-loadding v-if="loadding" label="处理中..."></tm-loadding>
<scroll-view scroll-y :class="[black_tmeme?'grey-darken-4':'white']" :style="{
height: activeHeight_watch + 'px',
}" @scroll="scrollIn" :scroll-into-view="guid+'_'+(isScroll?'':active_value)">
<view v-for="(item,index) in dataList" :key="index" :id="guid+'_'+index" class="tm-quickIndex-item">
<view :class="[black_tmeme?'grey-darken-5':'grey-lighten-4 text']" class=" text-size-s text-weight-b px-32 py-12">{{item.title}}</view>
<view>
<view v-for="(item2,index2) in item.children" :key="index2">
<slot name="cell" :data="{prevent:index,children:index2,total:item.children.length,item:item2,title:item2[rangKey],color:color_tmeme,black:black_tmeme}">
<view :class="[index2!==item.children.length-1?'border-grey-lighten-4-b-1 ':'',black_tmeme?'bk':'']" class="mx-32 py-24 flex-start" @click="changeIndex(index,index2,item2)">
<view v-if="item2['icon']" style="width: 48rpx;height: 48rpx;" class="mr-24 rounded flex-center overflow">
<tm-icons :size="48" :name="item2['icon']"></tm-icons>
</view>
<view class="text-size-n">
{{item2[rangKey]}}
</view>
</view>
</slot>
</view>
</view>
</view>
</scroll-view>
</view>
<view class="tm-quickIndex-index flex-center flex-col pr-16" :style="{
height: activeHeight_watch + 'px'
}">
<view v-if="showtips"
:class="[`text-${color_tmeme}`,black_tmeme?'bk':'']"
class="tm-quickIndex-index-Tips absolute rounded shadow-10 flex-center white text-size-g text-weight-b">
{{ returnIndexStr(scrollIndx) }}
</view>
<!-- <view v-if="scrollInBarIndex"
:class="[`text-${color}`]"
class="tm-quickIndex-index-Tips absolute rounded shadow-10 flex-center white text-size-g text-weight-b">
{{returnIndexStr(scrollIndx)}} :class="[scrollIndx==index?`text-${color} text-weight-b`:'']"
</view> -->
<view v-if="activeHeight_watch>0" @touchend.stop.prevent="indexMove($event,'end')" @touchmove.stop.prevent="indexMove($event,'scroll')"
class="tm-quickIndex-index-Bk round-24 shadow-3 " :class="[black_tmeme?'grey-darken-5 bk':'white']">
<view @click.stop="acitveItemClick($event,index)"
class="tm-quickIndex-index-item text-size-xxs flex-center px-2"
v-for="(item,index) in dataList" :key="index">
{{
returnIndexStr(index)
}}
</view>
</view>
</view>
</view>
</template>
<script>
/**
* 快速索引
* @property {Array} list = [] 默认：[],列表数据，格式：[{title:"汽车品牌",children:[{title:"宝马"},{title:"奔驰"}]}]
* @property {String} rang-key = [] 默认：'title',列表对象key，
* @property {String | Number} height = [] 默认：0,高度，默认为0时，自动使用屏幕的高度。
* @property {Number} value = [] 默认：0,当前滚动的索引位置,推荐使用v-model或者value.sync
* @property {String} color = [] 默认：primary,主题色。
* @property {Function} change 点击列表项时产生的事件，返回参数：{prent:父Index,children:子index,data:项数据。}
* @example <tm-quickIndex :list='[{title:"汽车品牌",children:[{title:"宝马"},{title:"奔驰"}]}]'></tm-quickIndex>
* 如果 不提供index索引字符将截取title第一个字符作为索引。如果title第一个没有将使用自建的数字索引。
*/
import tmIcons from "@/tm-vuetify/components/tm-icons/tm-icons.vue"
import tmLoadding from "@/tm-vuetify/components/tm-loadding/tm-loadding.vue"
export default {
components:{tmIcons,tmLoadding},
name: 'tm-quickIndex',
model: {
prop: 'value',
event: 'input'
},
props: {
// 高度，默认为0时，自动使用屏幕的高度。
height: {
type: String | Number,
default: 0
},
// 当前滚动的位置。
value: {
type: Number,
default: 0
},
// 当前滚动的位置。
color: {
type: String,
default: "primary"
},
list: {
type: Array,
default: () => {
return [];
}
},
rangKey: {
type: String,
default: "title"
},
black: {
type: String|Boolean,
default: null
},
// 跟随主题色的改变而改变。
fllowTheme:{
type:Boolean|String,
default:true
}
},
watch: {
value: function() {
this.active = this.value;
this.isScroll=false;
this.scrollIndx = this.value;
},
list:{
deep:true,
handler(){
this.dataList = this.list;
}
}
},
computed: {
black_tmeme: function() {
if (this.black !== null) return this.black;
return this.$tm.vx.state().tmVuetify.black;
},
color_tmeme:function(){
if(this.$tm.vx.state().tmVuetify.color!==null&&this.$tm.vx.state().tmVuetify.color && this.fllowTheme){
return this.$tm.vx.state().tmVuetify.color;
}
return this.color;
},
active: {
get: function() {
return this.active_value;
},
set: async function(val) {
this.active_value = val;
this.$emit('input', val);
this.$emit('update:value', val);
let t = this;
this.showtips = true;
let idx = 5655555
clearTimeout(idx)
idx = setTimeout(function(){
t.showtips = false;
},500)
}
},
activeHeight_watch: {
get: function() {
return this.activeHeight;
},
set: function(val) {
this.activeHeight = val;
}
}
},
data() {
return {
minTop:0,
activeHeight: 0,
guid: "",
active_value: 0,
listBound: [],
nowIndex: 0,
showtips: false,
isScroll: true,
quinkBar: null,
scrollIndx: 0,
scrollInBarIndex: false,
dataList:[],
loadding:true
};
},
async mounted() {
this.guid = uni.$tm.guid();
let t = this;
this.activeHeight_watch = uni.upx2px(this.height);
this.loadding=true;
await uni.$tm.sleep(50)
this.dataList = [...this.list];
this.$nextTick(async function() {
if (!this.activeHeight_watch) {
let sysinfo = uni.getSystemInfoSync();
this.activeHeight_watch = sysinfo.windowHeight;
}
let df = await this.$Querey(".tm-quickIndex",this).catch(e=>{});
this.minTop = df[0].top;
let indexbar = await t.$Querey(".tm-quickIndex-index-Bk", t).catch(e => {})
t.quinkBar = indexbar[0]
await uni.$tm.sleep(100)
t.active = t.value;
uni.createSelectorQuery().in(t).selectAll('.tm-quickIndex-item')
.boundingClientRect(res => {
res.forEach(item => {
t.listBound.push(item.top)
})
t.loadding=false;
}).exec()
});
},
methods: {
returnIndexStr(index){
let item = this.list[index];
if(!item || typeof item === 'undefined') return;
if(item['index']&& typeof item['index'] !=='undefined'){
return item['index'];
}else{
if(item[this.rangKey][0]&& typeof item[this.rangKey][0] !=='undefined'){
return item[this.rangKey][0];
}
}
return index+1
},
scrollIn(e) {
let t = this;
let y = e.detail.scrollTop;
this.isScroll = true;
function chatIndex(min) {
let index = 0;
for (let i = 0; i < t.listBound.length; i++) {
if (t.listBound[i] >= min + t.minTop+1) {
index = i;
break;
}
}
return index;
}
this.nowIndex = chatIndex(y) - 1;
},
changeIndex(prentindex, childrenindex, item) {
this.$emit('change', {
prent: prentindex,
children: childrenindex,
data: item
})
},
async acitveItemClick(e, indx) {
this.isScroll = false;
if (this.list.length <= 0) return;
this.active = indx;
},
async indexMove(e, type) {
let t = this;
if (this.list.length <= 0) return;
if (e.changedTouches.length > 1) return;
let y = e.changedTouches[0].clientY;
let itemHeight = uni.upx2px(40);
let ClickTop = e.target.offsetTop;
let index = 0;
if (y <= this.quinkBar.top) {
index = 0;
} else if (y >= this.quinkBar.bottom) {
index = this.list.length - 1;
} else {
let xy = y - this.quinkBar.top
index = Math.floor(xy / itemHeight);
}
if(index>=this.list.length-1) index = this.list.length-1
if(index<=0) index = 0;
this.isScroll = false;
if(this.scrollIndx!==index){
this.scrollIndx = index
}
if(this.active!==index){
this.active = index;
}
if (type == 'end') {
t.scrollInBarIndex = false;
} else {
t.scrollInBarIndex = true;
}
}
},
};
</script>
<style lang="scss" scoped>
.tm-quickIndex {
position: relative;
.tm-quickIndex-index {
position: absolute;
right: 0upx;
top: 0;
.tm-quickIndex-index-item {
width: 40rpx;
height: 40rpx;
// background: rgba(255,255,255,0.1);
}
.tm-quickIndex-index-Tips {
right: 160rpx;
width: 100rpx;
height: 100rpx;
}
}
}
</style>