|
|
<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>
|