前言推荐一个写博客的效率工具 CSDN AI数字营销会员核心功能✅ 多平台一键同步 → 一次发文同步6个平台✅ 全维度数据监测 → 所有平台数据一个面板看✅ 营销组件 → 文末合规放公众号/产品推广✅ GEO检测 → 看你文章在AI平台的曝光情况对我这种多平台发文的人来说光同步功能就值回票价了。写博客的朋友可以看看https://mp.csdn.net/vip?utm_sourcefx-blog-qq_45954390本篇就是告诉大家如何引入使用的。到 Uniapp 的插件市场搜索 una-picker快速通道https://ext.dcloud.net.cn/search?quna-picker文章目录前言一、 插件介绍1.✨ 特性2. Props 参数3.Events事件4. 插槽二、插件使用示例1. 下载路径2. 引入组件1方法一放入uni_modules2放入components3. 在微信小程序中的运行1单独的一列2展示两列3展示自定义样式三、其他插件文章1. 【Uniapp 插件 una-banner 】轮播图 / banner / swiper2. 【Uniapp 插件 una-bubble 】气泡 / 聊天框 / 对话框3.【Uniapp 插件 una-upload-resource 】上传资源组件 图片上传视频上传混传4.【Uniapp 插件 una-img-cropper 】 支持自定义裁剪比例、拖拽缩放调整画面可导出指定尺寸与画质的图片跨端兼容适用于头像上传、图片裁切等业务场景。5.【Uniapp 插件 una-picker 】自定义样式选择器插件6.【Uniapp 插件 una-app-skeleton】骨架屏 / Skeleton / 加载占位 / uni-app x一、 插件介绍1.✨ 特性支持单列数组、多列二维数组和树形联动数据支持v-model绑定选中值支持v-model:show控制弹层显示支持自定义字段名labelKey、valueKey、childrenKey支持自定义标题、按钮文字、占位文本、弹层高度和触发器样式支持trigger插槽自定义触发区域2. Props 参数参数说明类型默认值modelValue当前选中值单列为单个值多列/联动为数组String / Number / Arrayshow是否显示弹层支持v-model:showBooleanfalsecolumns选项数据支持一维数组、二维数组、树形数组Array[]title顶部标题String请选择placeholder未选择时的占位文本String请选择confirmText确认按钮文字String确定cancelText取消按钮文字String取消labelKey选项显示字段名StringlabelvalueKey选项取值字段名StringvaluechildrenKey联动子级字段名Stringchildrencascade是否启用联动模式Booleanfalseseparator多列显示文本分隔符String/height弹层高度String / Number520rpxitemHeight选项高度String / Number88rpxfieldHeight默认触发器高度String / Number88rpxfieldPadding默认触发器内边距String / Number0 28rpxbackgroundColor弹层背景色String#FFFFFFcolor未选中选项文字颜色String#323233selectedColor选中选项文字颜色String#323233cancelColor取消按钮文字颜色String#969799confirmColor确认按钮文字颜色String#2979ffborderRadius弹层圆角String / Number24rpx 24rpx 0 0disabled是否禁用BooleanfalsecloseOnClickOverlay点击遮罩是否关闭Booleantrue3.Events事件事件名说明回调参数change滚动选择时触发{ values, indexes, options }confirm点击确认时触发{ value, values, indexes, options }cancel点击取消或遮罩关闭时触发-open打开弹层时触发-close关闭弹层时触发-4. 插槽trigger自定义触发区域插槽参数为{ text, value }二、插件使用示例1. 下载路径https://ext.dcloud.net.cn/plugin?id28579这个广告30s相当于激励俺继续维护大部分插件都是这么设置了大家在观看的时候页面不要关闭看完在手机上关闭广告等待uni变更状态就行。手机端显示观看完毕后点击关闭等待状态文字变更再关闭这个uni的小程序。电脑端就会有个alert是否运行打开Hbuilderx点击允许就跳到HbuilderX中了。选择你要导入的项目tip 可以只打开一个窗口窗口内就一个项目这样识别会好一些。我再同一个窗口内多开了几个项目有几次没检测到我又重新看了广告。点击“确认”查看此时在哪个目录里。【注意】因为uniapp修改了传入的目录结构我的项目结构为 components/una-picker若有冲突保证自己的项目不被影响的前提下点击忽略冲突别替换了自己项目的文件2. 引入组件1方法一放入uni_modules在uni_modules中新建一个目录una-picker将下载的componets下的文件都放入这个目录中。2放入components可以删除无用的 文件如package.json、README.md。这里我留着是示例如果有同学需要看的话就放入这个文件夹里不然自己的其他组件多了之后不好管理文件。3. 在微信小程序中的运行1单独的一列代码实现templateviewclasspageuna-pickerv-modelcitytitle选择城市:columnscityColumnsconfirmhandleConfirm//view/templatescript setupimport{ref}fromvue;constcityref();constcityColumns[{label:杭州,value:hangzhou},{label:上海,value:shanghai},{label:深圳,value:shenzhen}];functionhandleConfirm(event){console.log(event.value,event.options);}/script2展示两列代码实现templateviewclasspageuna-pickerv-modelarea:cascadetruetitle选择地区:columnsareaColumns//view/templatescript setupimport{ref}fromvue;constarearef([]);constareaColumns[{label:浙江,value:zhejiang,children:[{label:杭州,value:hangzhou},{label:宁波,value:ningbo}]},{label:广东,value:guangdong,children:[{label:广州,value:guangzhou},{label:深圳,value:shenzhen}]}];functionhandleConfirm(event){console.log(event.value,event.options);}/script3展示自定义样式代码实现templateviewclasspageuna-pickerv-modelfruittitle选择水果placeholder请选择水果:columnsfruitColumnsbackgroundColor#FFF5F5borderRadius24rpx 24rpx 0 0color#7A1F24selectedColor#FF4D4FcancelColor#B25A5FconfirmColor#FF4D4F//view/templatescript setupimport{ref}fromvue;constfruitColumns[{label:苹果,value:apple},{label:草莓,value:strawberry},{label:樱桃,value:cherry}];functionhandleConfirm(event){console.log(event.value,event.options);}/script如果大家用着不错可以动动手指打赏俺有问题可以私信我需要qq群维护也请留言多的话我再建群哦三、其他插件文章1. 【Uniapp 插件 una-banner 】轮播图 / banner / swiper快速通道2. 【Uniapp 插件 una-bubble 】气泡 / 聊天框 / 对话框快速通道3.【Uniapp 插件 una-upload-resource 】上传资源组件 图片上传视频上传混传快速通道4.【Uniapp 插件 una-img-cropper 】 支持自定义裁剪比例、拖拽缩放调整画面可导出指定尺寸与画质的图片跨端兼容适用于头像上传、图片裁切等业务场景。快速通道5.【Uniapp 插件 una-picker 】自定义样式选择器插件快速通道6.【Uniapp 插件 una-app-skeleton】骨架屏 / Skeleton / 加载占位 / uni-app x快速通道