2025.2.12

澄江静如练_
115 阅读3分钟
  • rounded-[50rpx_50rpx_0_0]
  • !bg-transparent
  • const props = defineProps<{ min: number; max: number; inputMax: number; }>();
  • watchEffect(() => { if (realFee.value) { offerPrice.value = ''; offerValue.value = realFee.value; } else { offerValue.value = originFee.value!; } });
const enum CompanionTabs { Deliver, Retrieve, Proxy, }

 定义它是一个枚举（enum）

  • enum 是 TypeScript 中用于定义一组命名常量的结构。在这个示例中，CompanionTabs 是一个枚举，包含了三个状态或选项：Deliver、Retrieve 和 Proxy。

2. const 关键字

  • const 关键字指示这个枚举是一个常量枚举。常量枚举的特点是：

    • 在编译时会被替换为数字值。
    • 不会在编译后的 JavaScript 文件中生成额外的代码，只是在使用时直接得到它们的值。

3. 数值赋值

  • TypeScript 会自动将枚举成员赋予数值，从 0 开始递增。因此：

    • Deliver 的值为 0
    • Retrieve 的值为 1
    • Proxy 的值为 2

4. 使用常量枚举

在使用常量枚举时，您可以直接使用这些值而无需担心枚举的实例，以及可能引入的额外开销。

typescriptCopy code
const action = CompanionTabs.Deliver; // 这里 action 的值将直接被替换为 0

编译后的 JavaScript 代码大致如下（将会省略其他的进行枚举赋值的代码）：

javascriptCopy code
var action = 0; // 对应 Deliver

优点和应用场景

  • 性能优化: 由于编译器在编译时将 const enum 的引用替换为对应的数值，所以它可以减少运行时开销。
  • 代码可读性: 使用具有清晰含义的枚举名称可以使代码更具可读性，特别是在涉及多个选项或状态的情况下。
  • uni.on && uni.off
onUnload(() => {
  uni.$off('addressChange');
});
onLoad(() => {
  handleGetLocation();
  uni.$on('addressChange', () => {
    console.log('地址重定向');
    handleChangeAddress();
  });}

1. 订阅事件

javascriptCopy code
uni.$on('addressChange', () => {
  console.log('地址重定向');
  handleChangeAddress();
});

  • uni.$on(event, callback) : 这是一个事件监听的方法。这里的 'addressChange' 是事件的名称，而第二个参数是事件被触发时执行的回调函数。

  • 回调函数:

    • console.log('地址重定向');: 当 addressChange 事件被触发时，这行代码会在控制台输出 "地址重定向"。
    • handleChangeAddress();: 调用 handleChangeAddress 函数，以处理地址变化后的逻辑。

这种方式通常用于在应用程序的某个地方监听特定事件，以便对状态变化或用户交互做出反应。

2. 取消订阅事件

javascriptCopy code
uni.$off('addressChange');
  • uni.$off(event) : 这个方法用于移除之前添加的事件监听。传递事件名 'addressChange' 表明移除所有与该事件相关的回调函数。
background: url("https://test-1309061343.cos.ap-nanjing.myqcloud.com/temp/2024/12/27/4df0f982aa784899863e565b45a1b0e2.png")
    no-repeat center center / cover;
  • h-[calc(100%-130rpx)] 将当前元素的高度设置为其父元素高度的 100% 减去 130rpx。这在创建响应式布局时非常有用，因为它可以确保元素总是占据其父元素的高度，但又留出一定空间（例如，130rpx），可能是为了容纳某些固定高度的元素（比如导航栏、底部按钮等）。 calc() 函数非常灵活，除了可以混合使用百分比、像素和其他单位外，还可以与 vw（视口宽度）、vh（视口高度）等单位结合使用。（那我好奇父元素的100%包括tabbar的高度吗？）
<swiper class="h-100%" :current="tabValue" @animationfinish="onAnimationfinish">
          <swiper-item v-for="(item, index) in tabsList" :key="item.value">
            <view class="w-full bg-#F3F3F5">
              <view class="w-750rpx h-103rpx  p-x-20rpx pt-30rpx  box-border "
                :class="flag === -1 ? 'flex justify-between items-center pb-30rpx' : ' pb-100rpx '">
                <view class="h-42rpx whitespace-nowrap" @tap="changeSelectTime">
                  <text class="h-42rpx text-30rpx text-#222 font-bold leading-24rpx whitespace-nowrap">
                    {{ monthValue }}
                  </text>
                  <image class="w-24rpx h-24rpx ml-10rpx mb-5rpx"
                    src="https://test-1309061343.cos.ap-nanjing.myqcloud.com/temp/2025/01/23/2431ea239c8b441fab404b659377be22.png"
                    mode="scaleToFill" />
                </view>
                <view class="h-42rpx">
                  <text class="text-26rpx leading-24rpx h-42rpx text-#222 mt-5rpx whitespace-nowrap">
                    {{ total }}个订单,共计{{ amount }}元
                  </text>
                </view>
              </view>
            </view>
            <view :class="flag === -1 ? 'h-[calc(100%-130rpx)]' : 'h-[calc(100%-171rpx)]'">
              <orderPanel ref="listItem" :tabIndex="index" :currentIndex="current" :startTime="startTime"
                :endTime="endTime" :getTotal="getTotalNum" :getAmount="getTotalAmount" :status="status" />
            </view>
          </swiper-item>
        </swiper>
avatar
文章
阅读
粉丝