uniapp 一些组件的使用

picker

<picker
  mode="date"
  :value="selectedDate"
  @change="handleDateChange"
  :start="minDate"
  :end="maxDate"
>

1. mode="date"

• 作用：指定 picker 的模式为日期选择器
• 可选值 ：
  • "selector" - 普通选择器
  • "multiSelector" - 多列选择器
  • "time" - 时间选择器
  • "date" - 日期选择器
  • "region" - 省市区选择器

2.:value="selectedDate"

• 作用：绑定当前选中的日期值
• 类型 ：字符串，格式为 YYYY-MM-DD
• 说明：显示在选择器上的默认日期，也是用户选择后保存的值
• 示例 ："2023-12-01"

3.@change="handleDateChange"

• 作用：绑定日期改变事件的处理函数

• 触发时机：用户选择新日期并确认后触发

• 事件对象 ：e.detail = { value: "YYYY-MM-DD" }

• 处理函数 ：

  const handleDateChange = (e: any) => {
    selectedDate.value = e.detail.value;  // 获取新选择的日期
    handleSearch(); // 日期变化后重新搜索
  };

4.:start="minDate"

• 作用：设置可选择的最小日期

• 类型 ：字符串，格式为 YYYY-MM-DD

• 示例 ："2023-11-16"（如果是当前日期前15天）

• 影响 ：用户无法选择早于这个日期的时间

  :end="maxDate"

• 作用：设置可选择的最大日期

• 类型 ：字符串，格式为 YYYY-MM-DD

• 示例 ："2023-12-01"（通常是当前日期）

• 影响：用户无法选择晚于这个日期的时间

uni.navigateTo - 页面跳转API

• 作用：保留当前页面，跳转到应用内的某个页面

• 参数 ：
  • url: 跳转页面的路径
  • events: 页面间通信接口
  • success: 接口调用成功的回调函数
  • fail: 接口调用失败的回调函数
  • complete: 接口调用结束的回调函数

uni.showToast - 消息提示框

• 作用：显示消息提示框，用于向用户展示短暂的操作反馈信息
• 用法：用于各种操作结果的提示
• 参数详解 ：
  • title: 提示内容
  • icon: 图标类型（"success"/"error"/"loading"/"none"）
  • duration: 提示持续时间（毫秒）
  • mask: 是否显示透明蒙层

uni.makePhoneCall - 拨打电话

• 作用：调用设备拨号功能发起电话呼叫
• 用法：用于联系商家等场景
• 参数 ：
  • phoneNumber: 电话号码

uni.navigateToMiniProgram - 跳转到其他小程序

• 作用：跳转到其他小程序
• 用法：用于集成第三方小程序功能
• 参数 ：
  • appId: 要跳转的小程序appid
  • path: 打开的页面路径
  • envVersion: 要打开的小程序版本
  • success: 成功回调
  • fail: 失败回调

uni.showLoading - 加载提示框

• 作用：显示加载提示框，告知用户有操作正在进行
• 用法：用于数据加载等场景
• 参数 ：
  • title: 提示内容
  • mask: 是否显示透明蒙层

uni.hideLoading - 隐藏加载提示框

• 作用：隐藏加载提示框
• 用法：配合uni.showLoading使用

uni.stopPullDownRefresh - 停止下拉刷新

• 作用：停止当前页面的下拉刷新
• 用法：在下拉刷新完成后调用

uni.showModal - 模态对话框

• 作用：显示模态弹窗，让用户做出选择
• 用法：用于重要操作前的确认
• 参数 ：
  • title: 标题
  • content: 内容
  • confirmText: 确认按钮文字
  • cancelText: 取消按钮文字
  • success: 成功回调

uni.onAppShow - 监听小程序回到前台

• 作用：监听小程序从后台进入前台事件
• 用法：用于处理小程序回到前台的业务逻辑

uni.setStorageSync - 同步存储数据

• 作用：将数据存储在本地缓存中指定的 key 中
• 用法：用于持久化存储数据

uni-nav-bar - 导航栏组件

• 作用：提供统一的导航栏界面
• 属性 ：
  • dark: 暗色模式
  • fixed: 是否固定顶部
  • shadow: 是否显示阴影
  • background-color: 背景色
  • status-bar: 是否包含状态栏
  • title: 标题

uni-icons - 图标组件

• 作用：提供常用的图标
• 属性 ：
  • type: 图标类型
  • color: 图标颜色
  • size: 图标大小