更新记录

1.0.15(2024-09-04) 下载此版本

更新样式

1.0.14(2024-08-29) 下载此版本

修改样式

1.0.13(2024-08-19) 下载此版本

更新文档

查看更多

平台兼容性

Vue2 Vue3
App 快应用 微信小程序 支付宝小程序 百度小程序 字节小程序 QQ小程序
HBuilderX 3.7.6 app-vue app-nvue ×
钉钉小程序 快手小程序 飞书小程序 京东小程序
H5-Safari Android Browser 微信浏览器(Android) QQ浏览器(Android) Chrome IE Edge Firefox PC-Safari

dw-picker-1

搜索“大王模板”查看全部页面模板 每天一款新模板,有需求请留言,优先安排需求较多的模板

使用说明

可以直接下载示例代码,里面有完整的示例

  1. pages.json 中配置 easycom

    {
    "easycom": {
    "^dw-(.*)": "dw-$1/components/dw-$1/dw-$1.vue",
    "^u-(.*)": "uview-plus/components/u-$1/u-$1.vue"
    }
    }
  2. 页面中引用

    // template
    <view>
    <dw-picker-1 :keywords="keywords" :data="pickerOptions" @on-select="actionSelect"></dw-picker-1>
    </view>
  3. 注意事项(非常重要)

    • 父元素必须设置 height 和 position: relative, 原因是右侧的导航按钮是绝对定位,会根据父元素的位置居中展示
    • 该组件可以在页面中使用,也可以放到组件中使用如下
<u-popup>
  <dw-picker-1 :keywords="keywords" :data="pickerOptions" @on-select="actionSelect"></dw-picker-1>
</u-popup>

字段说明

字段 释义
keywords 筛选 label 等于 keywords 的所有数据,并且 keywords 高亮
data picker选项,示例值参考下面的代码块
pickerOptions = {
  dataList: [
    {
      "label": "北京市",
      "value": "beijing",
      "initial": "B"
    },
    {
      "label": "上海市",
      "value": "shanghai",
      "initial": "S"
    },
    {
      "label": "广州市",
      "value": "guangzhou",
      "initial": "G"
    },
    {
      "label": "深圳市",
      "value": "shenzhen",
      "initial": "S"
    }
  ]
}

事件说明

字段 释义
on-select 选中选项时出发

隐私、权限声明

1. 本插件需要申请的系统权限列表:

2. 本插件采集的数据、发送的服务器地址、以及数据用途说明:

3. 本插件是否包含广告,如包含需详细说明广告表达方式、展示频率:

许可协议

MIT协议

使用中有什么不明白的地方,就向插件作者提问吧~ 我要提问