上传代码

2025-08-18 09:57:10 +08:00
commit ff52db1edc
560 changed files with 102250 additions and 0 deletions
--- a/distribution/picker滚动选择器/plugin/IPickerColumn.vue
+++ b/distribution/picker滚动选择器/plugin/IPickerColumn.vue
@ -0,0 +1,158 @@
+<template>
+<view class="container" :style="containerStyle">
+  <section :class="indicatorClass?`selectBox ${indicatorClass}`:'selectBox'" :style="indicatorStyle?indicatorStyle:{height: `${config.rowHeight}${unit}`}">
+  </section>
+  <section class="columns" :style="columnsStyle" @touchstart="touchstart" @touchmove="touchmove" @touchend="touchend">
+    <section
+        :class="index===currentTarget?'row select-row':'row'"
+        v-for="(item,index) in list" :key="index" :style="selectRowStyle?{...selectRowStyle,...rowStyle}:rowStyle">
+      <slot :item="item">
+        <span>{{item}}</span>
+      </slot>
+    </section>
+  </section>
+</view>
+</template>
+
+<script setup lang="ts">
+import {computed, ref, watch} from "vue";
+const props=withDefaults(defineProps<{
+  list: Array<any>,
+  value?: number,
+  indicatorStyle?: object,
+  indicatorClass?: string,
+  selectRowStyle?: object,
+  height?: number,
+  rowHeight?: number,
+}>(),{
+  value: 0,
+  indicatorClass: "",
+  height: 40,
+  rowHeight: 6
+})
+
+const emits=defineEmits<{
+  (e: 'change',value: number):void,
+}>()
+
+// 单位
+const unit="vh";
+// 配置项
+const config=ref({
+  rowHeight: props.rowHeight,
+  containerHeight: props.height,
+  columnsPx: 0,
+})
+const containerStyle=computed(()=>({
+  height: `${config.value.containerHeight}${unit}`
+}))
+const columnsStyle=computed(()=>({
+  top: `${config.value.columnsPx}${unit}`
+}))
+const rowStyle=computed(()=>({
+  height: `${config.value.rowHeight}${unit}`
+}))
+// 列居中位置（容器高度/2）
+const pYCenter=computed(()=>config.value.containerHeight/2)
+// 行居中位置（行高度/2）
+const rowPYCenter=computed(()=>config.value.rowHeight/2)
+// 最大下滑位置
+const maxPosition=computed(()=>config.value.rowHeight*props.list.length-1);
+// 当前选中的列下标
+const currentTarget=ref(props.value);
+const computedCurrentTarget=()=>{
+  // 选中行的位置为：当前列下标*行高+列居中位置-行居中位置
+  config.value.columnsPx=-(currentTarget.value*config.value.rowHeight)+pYCenter.value-rowPYCenter.value;
+}
+watch(()=>currentTarget.value,value=>{
+  // 计算当前选中的下标
+  computedCurrentTarget();
+  emits('change',value);
+},{immediate: true})
+
+// 监听滑动事件
+let moveDistance=0;
+let originPosition=0;
+const moveSpeed=6;//滑动速度倍速
+const touchstart=(e:TouchEvent)=>{
+  const touch = e.touches[0];
+  moveDistance=touch.clientY/moveSpeed;
+  originPosition=config.value.columnsPx;
+}
+const touchmove=(e:TouchEvent)=>{
+  const touch = e.touches[0];
+  config.value.columnsPx=originPosition+(touch.clientY/moveSpeed)-moveDistance;
+}
+const touchend=(e:TouchEvent)=>{
+  originPosition=moveDistance=0;
+  const current=-(Math.round((config.value.columnsPx-pYCenter.value)/config.value.rowHeight)+1)
+  // 判断是否超过最大下滑位置或最大上滑位置
+  if(current<0){
+    currentTarget.value=0;
+  }else if(current>props.list.length-1){
+    currentTarget.value=props.list.length-1;
+  }else{
+    // 根据位置重新计算当前行下标
+    // 当前下标=四舍五入（当前位置/行高度）
+    currentTarget.value=current;
+  }
+  computedCurrentTarget();
+}
+</script>
+
+<style scoped lang="scss">
+.container{
+  position: relative;
+  box-sizing: border-box;
+  width: 100%;
+  height: 200px;
+  //padding: 10px ;
+  overflow: hidden;
+  &:after{
+    content: "";
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: linear-gradient(rgba(255,255,255,0.9) 0,transparent 50%,rgba(255,255,255,0.9) 100%);
+    pointer-events: none;
+    z-index: 99;
+  }
+  .selectBox{
+    box-sizing: border-box;
+    position: absolute;
+    top: 50%;
+    transform: translateY(-50%);
+    left: 0;
+    width: 100%;
+    background: rgba(0,0,0,0.03)
+  }
+  .columns{
+    position: absolute;
+    top: 0;
+    width: 100%;
+    height: 100%;
+    //background: red;
+    z-index: 10;
+    transition: 100ms;
+    .row{
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      box-sizing: border-box;
+      width: 100%;
+      height: 40px;
+      text-align: center;
+      font-size: 18px;
+      transition: 200ms;
+      //border: #000000 solid 1px;
+      //color: $font-color-secondary
+    }
+    .select-row{
+      color: #6DFFDFFF;
+      font-size: 28px;
+    }
+  }
+}
+</style>