修改
This commit is contained in:
@@ -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 {
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user