From 2e50cedafd87bdb3ce80ebc8fecdd80c34dfa56a Mon Sep 17 00:00:00 2001
From: whycq <913841844@qq.com>
Date: 星期二, 15 八月 2023 22:26:36 +0800
Subject: [PATCH] #
---
uni_modules/uni-indexed-list/components/uni-indexed-list/uni-indexed-list.vue | 367 ++++++++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 367 insertions(+), 0 deletions(-)
diff --git a/uni_modules/uni-indexed-list/components/uni-indexed-list/uni-indexed-list.vue b/uni_modules/uni-indexed-list/components/uni-indexed-list/uni-indexed-list.vue
new file mode 100644
index 0000000..ee3a7ec
--- /dev/null
+++ b/uni_modules/uni-indexed-list/components/uni-indexed-list/uni-indexed-list.vue
@@ -0,0 +1,367 @@
+<template>
+ <view class="uni-indexed-list" ref="list" id="list">
+ <!-- #ifdef APP-NVUE -->
+ <list class="uni-indexed-list__scroll" scrollable="true" show-scrollbar="false">
+ <cell v-for="(list, idx) in lists" :key="idx" :ref="'uni-indexed-list-' + idx">
+ <!-- #endif -->
+ <!-- #ifndef APP-NVUE -->
+ <scroll-view :scroll-into-view="scrollViewId" class="uni-indexed-list__scroll" scroll-y>
+ <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>
+ <!-- #ifndef APP-NVUE -->
+ </view>
+ </scroll-view>
+ <!-- #endif -->
+ <!-- #ifdef APP-NVUE -->
+ </cell>
+ </list>
+ <!-- #endif -->
+ <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"
+ :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">
+ <text class="uni-indexed-list__alert">{{ lists[touchmoveIndex].key }}</text>
+ </view>
+ </view>
+</template>
+<script>
+ import indexedListItem from './uni-indexed-list-item.vue'
+ // #ifdef APP-NVUE
+ const dom = weex.requireModule('dom');
+ // #endif
+ // #ifdef APP-PLUS
+ function throttle(func, delay) {
+ var prev = Date.now();
+ return function() {
+ var context = this;
+ var args = arguments;
+ var now = Date.now();
+ if (now - prev >= delay) {
+ func.apply(context, args);
+ prev = Date.now();
+ }
+ }
+ }
+
+ function touchMove(e) {
+ let pageY = e.touches[0].pageY
+ let index = Math.floor((pageY - this.winOffsetY) / this.itemHeight)
+ if (this.touchmoveIndex === index) {
+ return false
+ }
+ let item = this.lists[index]
+ if (item) {
+ // #ifndef APP-NVUE
+ this.scrollViewId = 'uni-indexed-list-' + index
+ this.touchmoveIndex = index
+ // #endif
+ // #ifdef APP-NVUE
+ dom.scrollToElement(this.$refs['uni-indexed-list-' + index][0], {
+ animated: false
+ })
+ this.touchmoveIndex = index
+ // #endif
+ }
+ }
+ const throttleTouchMove = throttle(touchMove, 40)
+ // #endif
+
+ /**
+ * IndexedList 绱㈠紩鍒楄〃
+ * @description 鐢ㄤ簬灞曠ず绱㈠紩鍒楄〃
+ * @tutorial https://ext.dcloud.net.cn/plugin?id=375
+ * @property {Boolean} showSelect = [true|false] 灞曠ず妯″紡
+ * @value true 灞曠ず妯″紡
+ * @value false 閫夋嫨妯″紡
+ * @property {Object} options 绱㈠紩鍒楄〃闇�瑕佺殑鏁版嵁瀵硅薄
+ * @event {Function} click 鐐瑰嚮鍒楄〃浜嬩欢 锛岃繑鍥炲綋鍓嶉�夋嫨椤圭殑浜嬩欢瀵硅薄
+ * @example <uni-indexed-list options="" showSelect="false" @click=""></uni-indexed-list>
+ */
+ export default {
+ name: 'UniIndexedList',
+ components: {
+ indexedListItem
+ },
+ emits: ['click'],
+ props: {
+ options: {
+ type: Array,
+ default () {
+ return []
+ }
+ },
+ showSelect: {
+ type: Boolean,
+ default: false
+ }
+ },
+ data() {
+ return {
+ lists: [],
+ winHeight: 0,
+ itemHeight: 0,
+ winOffsetY: 0,
+ touchmove: false,
+ touchmoveIndex: -1,
+ scrollViewId: '',
+ touchmovable: true,
+ loaded: false,
+ isPC: false
+ }
+ },
+ watch: {
+ options: {
+ handler: function() {
+ this.setList()
+ },
+ deep: true
+ }
+ },
+ mounted() {
+ // #ifdef H5
+ this.isPC = this.IsPC()
+ // #endif
+ setTimeout(() => {
+ this.setList()
+ }, 50)
+ setTimeout(() => {
+ this.loaded = true
+ }, 300);
+ },
+ methods: {
+ setList() {
+ let index = 0;
+ this.lists = []
+ this.options.forEach((value, index) => {
+ if (value.data.length === 0) {
+ return
+ }
+ let indexBefore = index
+ let items = value.data.map(item => {
+ let obj = {}
+ obj['key'] = value.letter
+ obj['name'] = item
+ obj['itemIndex'] = index
+ index++
+ obj.checked = item.checked ? item.checked : false
+ return obj
+ })
+ this.lists.push({
+ title: value.letter,
+ key: value.letter,
+ items: items,
+ itemIndex: indexBefore
+ })
+ })
+ // #ifndef APP-NVUE
+ uni.createSelectorQuery()
+ .in(this)
+ .select('#list')
+ .boundingClientRect()
+ .exec(ret => {
+ this.winOffsetY = ret[0].top
+ this.winHeight = ret[0].height
+ this.itemHeight = this.winHeight / this.lists.length
+ })
+ // #endif
+ // #ifdef APP-NVUE
+ dom.getComponentRect(this.$refs['list'], (res) => {
+ this.winOffsetY = res.size.top
+ this.winHeight = res.size.height
+ this.itemHeight = this.winHeight / this.lists.length
+ })
+ // #endif
+ },
+ touchStart(e) {
+ this.touchmove = true
+ let pageY = this.isPC ? e.pageY : e.touches[0].pageY
+ let index = Math.floor((pageY - this.winOffsetY) / this.itemHeight)
+ let item = this.lists[index]
+ if (item) {
+ this.scrollViewId = 'uni-indexed-list-' + index
+ this.touchmoveIndex = index
+ // #ifdef APP-NVUE
+ dom.scrollToElement(this.$refs['uni-indexed-list-' + index][0], {
+ animated: false
+ })
+ // #endif
+ }
+ },
+ touchMove(e) {
+ // #ifndef APP-PLUS
+ let pageY = this.isPC ? e.pageY : e.touches[0].pageY
+ let index = Math.floor((pageY - this.winOffsetY) / this.itemHeight)
+ if (this.touchmoveIndex === index) {
+ return false
+ }
+ let item = this.lists[index]
+ if (item) {
+ this.scrollViewId = 'uni-indexed-list-' + index
+ this.touchmoveIndex = index
+ }
+ // #endif
+ // #ifdef APP-PLUS
+ throttleTouchMove.call(this, e)
+ // #endif
+ },
+ touchEnd() {
+ this.touchmove = false
+ // this.touchmoveIndex = -1
+ },
+
+ /**
+ * 鍏煎 PC @tian
+ */
+
+ mousedown(e) {
+ if (!this.isPC) return
+ this.touchStart(e)
+ },
+ mousemove(e) {
+ if (!this.isPC) return
+ this.touchMove(e)
+ },
+ mouseleave(e) {
+ if (!this.isPC) return
+ this.touchEnd(e)
+ },
+
+ // #ifdef H5
+ IsPC() {
+ var userAgentInfo = navigator.userAgent;
+ var Agents = ["Android", "iPhone", "SymbianOS", "Windows Phone", "iPad", "iPod"];
+ var flag = true;
+ for (let v = 0; v < Agents.length - 1; v++) {
+ if (userAgentInfo.indexOf(Agents[v]) > 0) {
+ flag = false;
+ break;
+ }
+ }
+ return flag;
+ },
+ // #endif
+
+
+ onClick(e) {
+ let {
+ idx,
+ index
+ } = e
+ let obj = {}
+ for (let key in this.lists[idx].items[index]) {
+ obj[key] = this.lists[idx].items[index][key]
+ }
+ let select = []
+ if (this.showSelect) {
+ this.lists[idx].items[index].checked = !this.lists[idx].items[index].checked
+ this.lists.forEach((value, idx) => {
+ value.items.forEach((item, index) => {
+ if (item.checked) {
+ let obj = {}
+ for (let key in this.lists[idx].items[index]) {
+ obj[key] = this.lists[idx].items[index][key]
+ }
+ select.push(obj)
+ }
+ })
+ })
+ }
+ this.$emit('click', {
+ item: obj,
+ select: select
+ })
+ }
+ }
+ }
+</script>
+<style lang="scss" scoped>
+ .uni-indexed-list {
+ position: absolute;
+ left: 0;
+ top: 0;
+ right: 0;
+ bottom: 0;
+ /* #ifndef APP-NVUE */
+ display: flex;
+ /* #endif */
+ flex-direction: row;
+ }
+
+ .uni-indexed-list__scroll {
+ flex: 1;
+ }
+
+ .uni-indexed-list__menu {
+ width: 24px;
+ /* #ifndef APP-NVUE */
+ display: flex;
+ /* #endif */
+ flex-direction: column;
+ }
+
+ .uni-indexed-list__menu-item {
+ /* #ifndef APP-NVUE */
+ display: flex;
+ /* #endif */
+ flex: 1;
+ align-items: center;
+ justify-content: center;
+ /* #ifdef H5 */
+ cursor: pointer;
+ /* #endif */
+ }
+
+ .uni-indexed-list__menu-text {
+ font-size: 12px;
+ text-align: center;
+ color: #aaa;
+ }
+
+ .uni-indexed-list__menu--active {
+ // background-color: rgb(200, 200, 200);
+ }
+
+ .uni-indexed-list__menu--active {}
+
+ .uni-indexed-list__menu-text--active {
+ border-radius: 16px;
+ width: 16px;
+ height: 16px;
+ line-height: 16px;
+ background-color: #007aff;
+ color: #fff;
+ }
+
+ .uni-indexed-list__alert-wrapper {
+ position: absolute;
+ left: 0;
+ top: 0;
+ right: 0;
+ bottom: 0;
+ /* #ifndef APP-NVUE */
+ display: flex;
+ /* #endif */
+ flex-direction: row;
+ align-items: center;
+ justify-content: center;
+ }
+
+ .uni-indexed-list__alert {
+ width: 80px;
+ height: 80px;
+ border-radius: 80px;
+ text-align: center;
+ line-height: 80px;
+ font-size: 35px;
+ color: #fff;
+ background-color: rgba(0, 0, 0, 0.5);
+ }
+</style>
--
Gitblit v1.9.1