【经验分享】 自定义picker组件,拿走即用。

简介: 【经验分享】 自定义picker组件,拿走即用。

支付宝小程序的UI样式向原生靠齐,picker组件不满足设计小姐姐的要求,然后卑微的切图仔出来搞了个自定义的picker组件样式。

老规矩效果图:


实现方案:

组件抛出四个属性:

属性

默认值

描述

pickerIndex

[]

默认选中下标,即弹起时默认选中第几项

show

false

是否显示picker弹窗

list

[]

picker可选项列表

title

picker标题

组件JS, 接收父组件传递的值,以及抛出点击取消回调

Component({
  data: {},
  props: {
    pickerIndex: [], // 默认选中下标
    show: false, // 是否显示
    list: [], // 列表
    title: '' // 标题
  },
  methods: {
    // 取消按钮点击
    handlePickerCancle() {
      this.props.onCancle()
    },
    // 确定按钮点击
    handlePickerConfirm() {
      this.props.onConfirm({ key: this.data.pickerKey, value: this.data.pickerValue })
    },
    // picker切换
    handlePickerChange(e) {
      this.setData({
        pickerKey: e.detail.value[0],
        pickerValue: this.props.list[e.detail.value]
      })
    }
  }
})

页面引用方式:需注意默认选中第几项是个数组。

<qts-picker title="{{title}}" show="{{show}}" list="{{list}}" pickerIndex="{{index}}" onCancle="handleClick" onConfirm="handleConfirm" />
Page({
  data: {
    show: false, // 是否显示picker
    title: '薪资单位', // picker标题
    index: [2], // 默认选中第几项
    list: ['日','周','月','季','年'],
    key: '',
    value: ''
  },
  handleClick() {
    this.setData({
      show: !this.data.show
    })
  },
  handleConfirm(e) {
    console.log(e)
    this.setData({
      key: e.key,
      value: e.value
    })
    this.handleClick()
  }
})

完整代码片段如下:

https://pen.mini-code.com/s/dce92ada-f3c6-429a-8139-14ee583020bf

目录
相关文章
|
存储 小程序 JavaScript
【微信小程序】-- 表单组件 - picker 实现日期选择器(五十三)
【微信小程序】-- 表单组件 - picker 实现日期选择器(五十三)
|
小程序 前端开发
阻止小程序事件冒泡的三种方法
阻止小程序事件冒泡的三种方法
1434 0
|
小程序 API 索引
uniapp中uview组件库中丰富的Picker 选择器用法
uniapp中uview组件库中丰富的Picker 选择器用法
2222 0
|
JSON 小程序 JavaScript
|
测试技术
支付宝小程序自定义弹窗插件wcPop|模态弹窗model|弱提示Toast
支付宝小程序弹窗插件wcPop|小程序自定义弹窗组件|提示框alert、确认框confirm及prompt、toast提示 请原谅我在这里吐槽下,微信小程序、支付宝小程序官方提供的交互反馈弹窗  如:提示框alert、确认框confirm及prompt、toast弱提示等插件功能比较有限,很多想要的效果都达不到。
7071 0
|
12月前
|
JSON 小程序 JavaScript
uni-app开发微信小程序的报错[渲染层错误]排查及解决
uni-app开发微信小程序的报错[渲染层错误]排查及解决
2551 7
|
12月前
|
小程序 前端开发 JavaScript
微信小程序图表制作利器:ECharts组件的使用与技巧
微信小程序图表制作利器:ECharts组件的使用与技巧
1010 1
|
移动开发 JavaScript 前端开发
UniApp H5 跨域代理配置并使用(配置manifest.json、vue.config.js)
这篇文章介绍了在UniApp H5项目中处理跨域问题的两种方法:通过修改manifest.json文件配置h5设置,或在项目根目录创建vue.config.js文件进行代理配置,并提供了具体的配置代码示例。
UniApp H5 跨域代理配置并使用(配置manifest.json、vue.config.js)
|
12月前
|
小程序
uni-app开发微信小程序使用onPullDownRefresh(下拉刷新)总结
uni-app开发微信小程序使用onPullDownRefresh(下拉刷新)总结
1724 0
|
小程序
Taro@3.x+Vue@3.x+TS开发微信小程序,根据系统主题展示不同样式(darkMode)
本文介绍如何在Taro项目中配置深色模式。通过在`src/app.config.ts`设置`darkmode`选项和在`theme.json`中定义主题变量,可以实现跟随系统主题的界面风格切换。
374 0
Taro@3.x+Vue@3.x+TS开发微信小程序,根据系统主题展示不同样式(darkMode)