This commit is contained in:
2024-06-26 16:19:21 +08:00
parent 6d0addb743
commit 1bd13fdbd8
12 changed files with 5747 additions and 5171 deletions

View File

@@ -1,19 +1,24 @@
<template>
<view>
<view v-if="loaded || list.itemIndex < 15" class="uni-indexed-list__title-wrapper">
<text v-if="list.items && list.items.length > 0" class="uni-indexed-list__title">{{ list.key }}</text>
<view @click="handleClick(list.key)" v-if="loaded || list.itemIndex < 15" class="uni-indexed-list__title-wrapper">
<slot v-if="list.items && list.items.length > 0" name="titleSlot" :row="list.key" :rowIndex="idx"></slot>
<!-- <text class="uni-indexed-list__title">{{ list.key }}</text> -->
</view>
<view v-if="(loaded || list.itemIndex < 15) && list.items && list.items.length > 0" class="uni-indexed-list__list">
<view v-for="(item, index) in list.items" :key="index" class="uni-indexed-list__item" hover-class="uni-indexed-list__item--hover">
<slot name="labelSlot" :row="list.items.map(e=>{return e.name})"></slot>
<!-- <view v-for="(item, index) in list.items" :key="index" class="uni-indexed-list__item" hover-class="uni-indexed-list__item--hover">
<view class="uni-indexed-list__item-container" @click="onClick(idx, index)">
<view class="uni-indexed-list__item-border" :class="{'uni-indexed-list__item-border--last':index===list.items.length-1}">
<view v-if="showSelect" style="margin-right: 20rpx;">
<uni-icons :type="item.checked ? 'checkbox-filled' : 'circle'" :color="item.checked ? '#007aff' : '#C0C0C0'" size="24" />
</view>
<text class="uni-indexed-list__item-content">{{ item.name }}</text>
</view>
</view>
</view>
</view> -->
</view>
</view>
</template>
@@ -43,6 +48,10 @@
}
},
methods: {
handleClick(data){
console.log('data at line 51:', data)
this.$emit("itemKeyClick", data)
},
onClick(idx, index) {
this.$emit("itemClick", {
idx,
@@ -55,12 +64,13 @@
<style lang="scss" scoped>
.uni-indexed-list__list {
margin-top: 30px;
background-color: $uni-bg-color;
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
flex-direction: column;
border-top-style: solid;
// border-top-style: solid;
border-top-width: 1px;
border-top-color: #DEDEDE;
}
@@ -132,7 +142,7 @@
display: flex;
width: 100%;
/* #endif */
background-color: #f7f7f7;
// background-color: #f7f7f7;
}
.uni-indexed-list__title {

View File

@@ -9,7 +9,17 @@
<view v-for="(list, idx) in lists" :key="idx" :id="'uni-indexed-list-' + idx">
<!-- #endif -->
<indexed-list-item :list="list" :loaded="loaded" :idx="idx" :showSelect="showSelect"
@itemClick="onClick"></indexed-list-item>
@itemClick="onClick" >
<template slot="labelSlot" slot-scope="slotProps">
<slot name="labelSlot" :row="slotProps.row"></slot>
</template>
<template slot="titleSlot" slot-scope="slotProps">
<slot name="titleSlot" :row="slotProps.row" :rowIndex="slotProps.rowIndex"></slot>
</template>
</indexed-list-item>
<!-- #ifndef APP-NVUE -->
</view>
</scroll-view>
@@ -21,15 +31,15 @@
<view class="uni-indexed-list__menu" @touchstart="touchStart" @touchmove.stop.prevent="touchMove"
@touchend="touchEnd" @mousedown.stop="mousedown" @mousemove.stop.prevent="mousemove"
@mouseleave.stop="mouseleave">
<view v-for="(list, key) in lists" :key="key" class="uni-indexed-list__menu-item"
<view @click="itemKeyClick(list.key)" v-for="(list, key) in lists" :key="key" class="uni-indexed-list__menu-item"
:class="touchmoveIndex == key ? 'uni-indexed-list__menu--active' : ''">
<text class="uni-indexed-list__menu-text"
:class="touchmoveIndex == key ? 'uni-indexed-list__menu-text--active' : ''">{{ list.key }}</text>
</view>
</view>
<view v-if="touchmove" class="uni-indexed-list__alert-wrapper">
<!-- <view v-if="touchmove" class="uni-indexed-list__alert-wrapper">
<text class="uni-indexed-list__alert">{{ lists[touchmoveIndex].key }}</text>
</view>
</view> -->
</view>
</template>
<script>
@@ -110,7 +120,7 @@
itemHeight: 0,
winOffsetY: 0,
touchmove: false,
touchmoveIndex: -1,
touchmoveIndex:0,
scrollViewId: '',
touchmovable: true,
loaded: false,
@@ -181,6 +191,8 @@
// #endif
},
touchStart(e) {
console.log('e at line 193:', e)
this.touchmove = true
let pageY = this.isPC ? e.pageY : e.touches[0].pageY
let index = Math.floor((pageY - this.winOffsetY) / this.itemHeight)
@@ -251,6 +263,7 @@
onClick(e) {
console.log('e at line 263:', e)
let {
idx,
index
@@ -278,11 +291,16 @@
item: obj,
select: select
})
}
},
itemKeyClick(data){
this.$emit('itemKeyClick', this.touchmoveIndex)
},
}
}
</script>
<style lang="scss" scoped>
@import "@/style/mixin.scss";
.uni-indexed-list {
position: absolute;
left: 0;
@@ -300,7 +318,8 @@
}
.uni-indexed-list__menu {
width: 24px;
width: 20px;
font-size: 20px;
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
@@ -320,9 +339,10 @@
}
.uni-indexed-list__menu-text {
font-size: 12px;
font-size: 16px;
text-align: center;
color: #aaa;
padding: 20px 0;
}
.uni-indexed-list__menu--active {
@@ -332,11 +352,11 @@
.uni-indexed-list__menu--active {}
.uni-indexed-list__menu-text--active {
border-radius: 16px;
width: 16px;
height: 16px;
line-height: 16px;
background-color: #007aff;
// border-radius: 16px;
// width: 16px;
// height: 16px;
// line-height: 16px;
background-color: $themeColor;
color: #fff;
}