@gyenno/nutui-taro
Version:
京东风格的轻量级移动端 Vue2、Vue3 组件库（支持小程序开发）
276 lines (275 loc) • 9.33 kB
JavaScript
import { ref, reactive, computed, watch, toRefs, nextTick, openBlock, createElementBlock, normalizeClass, createElementVNode, normalizeStyle, withDirectives, toDisplayString, createCommentVNode, vShow, createTextVNode, Fragment, renderList, renderSlot, withModifiers } from "vue";
import { c as createComponent } from "./component-25dcca32.js";
import { u as useExpose } from "./index-79c5dc33.js";
import Taro from "@tarojs/taro";
import { _ as _export_sfc } from "./_plugin-vue_export-helper-cc2b3d55.js";
import "../locale/lang";
const { componentName, create } = createComponent("elevator");
const _sfc_main = create({
props: {
height: {
type: [Number, String],
default: "200px"
},
acceptKey: {
type: [String],
default: "title"
},
indexList: {
type: Array,
default: () => {
return [];
}
},
isSticky: {
type: [Boolean],
default: false
},
spaceHeight: {
type: [Number],
default: 23
},
titleHeight: {
type: [Number],
default: 35
}
},
emits: ["click-item", "click-index", "change"],
setup(props, context) {
const spaceHeight = 23;
const listview = ref();
const state = reactive({
anchorIndex: 0,
codeIndex: 0,
listHeight: [],
listGroup: [],
touchState: {
y1: 0,
y2: 0
},
scrollStart: false,
currentIndex: 0,
query: Taro.createSelectorQuery(),
scrollTop: 0,
currentData: {},
currentKey: "",
scrollY: 0
});
const classes = computed(() => {
const prefixCls = componentName;
return {
[prefixCls]: true
};
});
const clientHeight = computed(() => {
return listview.value.clientHeight;
});
const fixedStyle = computed(() => {
return {
height: `${state.listHeight[state.listGroup.length - 1]}px`
};
});
const getData = (el) => {
if (!el.dataset.index) {
return "0";
}
return el.dataset.index;
};
const setListGroup = (el) => {
nextTick(() => {
if (!state.listGroup.includes(el) && el != null) {
state.listGroup.push(el);
}
});
};
const calculateHeight = () => {
state.listHeight = [];
let height = 0;
state.listHeight.push(height);
for (let i = 0; i < state.listGroup.length; i++) {
state.query.selectAll(`.elevator__item__${i}`).boundingClientRect();
state.query.exec((res) => {
height += Math.floor(res[i][0].height);
state.listHeight.push(height);
});
}
};
const scrollTo = (index) => {
if (!index && index !== 0) {
return;
}
if (index < 0)
index = 0;
if (index > state.listHeight.length - 2)
index = state.listHeight.length - 2;
state.codeIndex = index;
state.scrollTop = state.listHeight[index];
};
const touchStart = (e) => {
state.scrollStart = true;
let index = getData(e.target);
let firstTouch = e.touches[0];
state.touchState.y1 = firstTouch.pageY;
state.anchorIndex = +index;
state.codeIndex = +index;
scrollTo(+index);
};
const touchMove = (e) => {
let firstTouch = e.touches[0];
state.touchState.y2 = firstTouch.pageY;
let delta = (state.touchState.y2 - state.touchState.y1) / spaceHeight | 0;
state.codeIndex = state.anchorIndex + delta;
scrollTo(state.currentIndex);
};
const touchEnd = () => {
state.scrollStart = false;
};
const handleClickItem = (key, item) => {
context.emit("click-item", key, item);
state.currentData = item;
state.currentKey = key;
};
const handleClickIndex = (key) => {
context.emit("click-index", key);
};
const listViewScroll = (e) => {
let target = e.target;
let scrollTop = target.scrollTop;
const listHeight = state.listHeight;
state.scrollY = Math.floor(scrollTop);
for (let i = 0; i < listHeight.length - 1; i++) {
let height1 = listHeight[i];
let height2 = listHeight[i + 1];
if (state.scrollY >= height1 && state.scrollY < height2) {
state.currentIndex = i;
return;
}
}
};
useExpose({
scrollTo
});
watch(
() => state.listGroup.length,
() => {
Taro.nextTick(calculateHeight);
}
);
watch(
() => state.currentIndex,
(newVal) => {
context.emit("change", newVal);
}
);
return {
classes,
...toRefs(state),
clientHeight,
fixedStyle,
setListGroup,
listview,
touchStart,
touchMove,
touchEnd,
handleClickItem,
handleClickIndex,
listViewScroll
};
}
});
const _hoisted_1 = ["scroll-top"];
const _hoisted_2 = {
key: 0,
class: "nut-elevator__list__fixed nut-elevator__list__fixed--mini"
};
const _hoisted_3 = { class: "nut-elevator__fixed-title" };
const _hoisted_4 = { class: "nut-elevator__list__item__code" };
const _hoisted_5 = ["onClick"];
const _hoisted_6 = ["innerHTML"];
const _hoisted_7 = { class: "nut-elevator__bars__inner" };
const _hoisted_8 = ["data-index", "onClick"];
function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
return openBlock(), createElementBlock("view", {
class: normalizeClass(_ctx.classes)
}, [
createElementVNode("scroll-view", {
class: "nut-elevator__list nut-elevator__list--mini",
"scroll-top": _ctx.scrollTop,
"scroll-y": true,
"scroll-with-animation": true,
"scroll-anchoring": true,
ref: "listview",
style: normalizeStyle({ height: isNaN(+_ctx.height) ? _ctx.height : `${_ctx.height}px` }),
onScroll: _cache[0] || (_cache[0] = (...args) => _ctx.listViewScroll && _ctx.listViewScroll(...args))
}, [
withDirectives(createElementVNode("view", {
style: normalizeStyle(_ctx.fixedStyle),
class: "nut-elevator__list__fixed__wrapper"
}, [
_ctx.isSticky ? (openBlock(), createElementBlock("view", _hoisted_2, [
createElementVNode("span", _hoisted_3, toDisplayString(_ctx.indexList[_ctx.currentIndex][_ctx.acceptKey]), 1)
])) : createCommentVNode("", true)
], 4), [
[vShow, _ctx.scrollY > 0]
]),
createTextVNode(),
(openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.indexList, (item, index) => {
return openBlock(), createElementBlock("view", {
class: normalizeClass(["nut-elevator__list__item", `elevator__item__${index}`]),
key: item[_ctx.acceptKey],
ref_for: true,
ref: _ctx.setListGroup
}, [
createElementVNode("view", _hoisted_4, toDisplayString(item[_ctx.acceptKey]), 1),
createTextVNode(),
(openBlock(true), createElementBlock(Fragment, null, renderList(item.list, (subitem) => {
return openBlock(), createElementBlock("view", {
class: normalizeClass(["nut-elevator__list__item__name", {
"nut-elevator__list__item__name--highcolor": _ctx.currentData.id === subitem.id && _ctx.currentKey === item[_ctx.acceptKey]
}]),
key: subitem["id"],
onClick: ($event) => _ctx.handleClickItem(item[_ctx.acceptKey], subitem)
}, [
!_ctx.$slots.default ? (openBlock(), createElementBlock("span", {
key: 0,
innerHTML: subitem.name
}, null, 8, _hoisted_6)) : renderSlot(_ctx.$slots, "default", {
key: 1,
item: subitem
})
], 10, _hoisted_5);
}), 128))
], 2);
}), 128))
], 44, _hoisted_1),
createTextVNode(),
_ctx.indexList.length > 0 ? withDirectives((openBlock(), createElementBlock("view", {
key: 0,
class: "nut-elevator__code--current"
}, toDisplayString(_ctx.indexList[_ctx.codeIndex][_ctx.acceptKey]), 513)), [
[vShow, _ctx.scrollStart]
]) : createCommentVNode("", true),
createTextVNode(),
createElementVNode("view", {
class: "nut-elevator__bars",
onTouchstart: _cache[1] || (_cache[1] = (...args) => _ctx.touchStart && _ctx.touchStart(...args)),
onTouchmove: _cache[2] || (_cache[2] = withModifiers((...args) => _ctx.touchMove && _ctx.touchMove(...args), ["stop", "prevent"])),
onTouchend: _cache[3] || (_cache[3] = (...args) => _ctx.touchEnd && _ctx.touchEnd(...args))
}, [
createElementVNode("view", _hoisted_7, [
(openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.indexList, (item, index) => {
return openBlock(), createElementBlock("view", {
class: normalizeClass(["nut-elevator__bars__inner__item", { active: item[_ctx.acceptKey] === _ctx.indexList[_ctx.currentIndex][_ctx.acceptKey] }]),
"data-index": index,
key: item[_ctx.acceptKey],
onClick: ($event) => _ctx.handleClickIndex(item[_ctx.acceptKey])
}, toDisplayString(item[_ctx.acceptKey]), 11, _hoisted_8);
}), 128))
])
], 32)
], 2);
}
const Elevator = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
export {
Elevator as default
};