uniapp+nvue实现仿微信/得物相册插件(选择界面|uniapp+nvue实现仿微信/得物相册插件:选择界面 +自定义相册+图片视频过滤)
本篇文章基于uniapp 框架+ nvue,实现了uniapp仿微信/得物相册选择功能实例项目,该插件实例实现了以下功能:
1: 相册过滤
2: 图视频过滤
3: 界面UI定制化
4: 栅格列数定制化
效果图
文章图片
技术实现
开发环境:HbuilderX + nodejs
技术框架:uniapp + vue2.x
测试环境:App端(Android + IOS)
插件:Zhimi-Album-JustPicker
代码:开源
效果概览
在uniapp开发下,安卓和ios端表现效果高度一致,通过可控性的api配置使得相册实现高度可定制性,可以实现内置图片按钮,列数控制,多语言环境等功能。
文章图片
自由布局的控件
相对于传统的弹出式选择控件,固定不变的按钮,固定不变的布局与设计使得开发面对多种需求的场景显得尤其乏力,因此自由布局插件给予了一个更大,更自由地开发控件,仅仅引入相册显示本身,其余界面均开发者可定制化开发,开发者拥有了足够的控制权。
// 获取相册控件对象
let albumView = this.$refs.albumView
// 监听相册事件回调
albumView.setEventCallback(this.AlbumCallbackHanlder)
// 设置相册类型
albumView.albumType(0);
// 0 全部, 1 照片, 2 视频
// 获取系统相册列表
albumView.getAlbumTypeNames(albums => this.albums = albums)
// 设置每行显示数量
let spanCount = 4;
albumView.setSpanCount(spanCount)
// 设置最大选择数量
var maxCount = 9;
albumView.setMaxCount(maxCount)
开发者可以设置列数,最大选择数,甚至是相册类型,指定相册,awesome!
控制筛选,清空选择
相较于与传统的相册选择插件不同,插件提供方法控制过滤相册,清空选择等方法,方便结合各类场景,例如发送图视频、朋友圈上传图片、图文排版场景。
获取系统相册列表
albumView.getAlbumTypeNames(albums => this.albums = albums)
加载相册内容
albumView.loadAlbum(albumId) // 通过上述的获取相册列表获得
清空已选项目
albumView.clearCheckedImages()
获取已选项目
albumView.clearCheckedImages()
灵活的客制化UI
由于相册控件的组件化,使得界面的布局更加灵活,不论是配色,语言,界面布局都能自由搭配,仿微信相册,仿得物界面,均能掌握在手中。
文章图片
至此uniapp开发仿微信仿微信/得物相册选择界面的分享到此为止咯
对于这部分的代码使用到的原生插件,可以参考uniapp插件市场中的插件,在插件市场也有开源的代码工程哦。
自定义相册:https://ext.dcloud.net.cn/plu...
【uniapp+nvue实现仿微信/得物相册插件(选择界面|uniapp+nvue实现仿微信/得物相册插件:选择界面 +自定义相册+图片视频过滤)】通过插件市场对应的按钮可以直接导入开源代码,但是记得先安装HbuilderX哦
推荐阅读
- 关于QueryWrapper|关于QueryWrapper,实现MybatisPlus多表关联查询方式
- MybatisPlus使用queryWrapper如何实现复杂查询
- python学习之|python学习之 实现QQ自动发送消息
- 孩子不是实现父母欲望的工具——林哈夫
- opencv|opencv C++模板匹配的简单实现
- Node.js中readline模块实现终端输入
- java中如何实现重建二叉树
- 人脸识别|【人脸识别系列】| 实现自动化妆
- paddle|动手从头实现LSTM
- pytorch|使用pytorch从头实现多层LSTM