uniapp

先看实现效果 其实封装这个组件的原因只是因为市面上的大多数UI库中的滑动选择器都无法完全自定义滑块以及进度条，如下图，都是只能简单调整 但是如果遇到自定义要求很高的情况就无法满足了，所以才会想着封装这

注意：封装的地图运动轨迹只测试了微信小程序，其他平台未测试 不过实现功能的核心API就是这几个：https://uniapp.dcloud.net.cn/api/location/location-c

注意这个List列表使用的布局是之前文章提到过的uniapp基本页面布局 https://juejin.cn/post/7288160332433391676

一个拥有自定义指示器的轮播图 当然了这个轮播图示例中的轮播图样式需要根据自己项目需求进行更换一个拥有自定义指示器的轮播图 当然了这个轮播图示例中的轮播图样式需要根据自己项目需求进行更换一个拥有自定义指

效果与功能 为什么不用uniapp扩展组件的uni-file-picker文件上传组件？ 因为uni-file-picker文件上传组件无法兼容多端的文件上传需要（小程序、H5、App） 组件参数 属

场景 我们在项目中会遇到从A页面跳转到B页面的操作 从A页面跳转B页面时需要携带一些B页面需要使用的参数 在B页面进行一些操作后需要返回到A页面，但是A页面又需要对从B页面返回回来后的行为进行一些操作

使用场景及功能 在项目中会出现需要在页面右下角或者其他地方放一个悬浮按钮的功能 比如：新增订单、联系客服等等 但是这个按钮可能会挡住页面的内容，所以就出现了封装这个组件的想法 功能： 实现多端（小程序

效果 注意事项 由于使用的是轮播图组件实现的，所以无法开放插槽给用户自定义卡片的内容，所以需要组件调用者根据项目需要手动更换卡片的内容和样式 更换方法：编译器页面搜索 card-item ，更换卡片内

封装理由 如上图，项目需要这样选择时间 但是uniapp没有满足需求的组件 而使用的UI组件库功能满足，但是元素的样式不满足。导致出现：样式不好看、某些机型无法选中最后一个元素，如下图：可以明显看出由

实现思路 其实就是参考各个UI组件库的tabs组件实现的，原理就是：显示条使用定位，每次选中的值发生变化后改变显示条的transform: translateX()的值 tabs组件代码 显示条的高度

场景 实现日历功能我们一般是直接使用UI库的日历组件就能满足需求，但是如果项目对UI有特殊要求：除了展示基本的日期天数，还需要在日历上展示其他东西，这种情况如果改UI库的日历组件就比较麻烦了，如下案例

参数 参数 说明 示例 position 弹出位置 字符串：'center' radius 圆角 字符串：'10' width 弹出层宽度（仅position为center、left、right时有效

封装理由 如下图所示，项目需要点击区域按钮出现一个弹出层，弹出层是在筛选条件下面显示的 大多数UI库的弹出层组件都是从顶部、底部、左侧、右侧、中间弹出，无法实现项目的需求（从指定的元素的位置弹出） 这

圆盘抽奖 效果 一个简单的圆盘抽奖代码，有可配置的参数 指定圆盘大小 抽奖可指定奖品的抽中概率 可指定抽奖时圆盘的旋转圈数 可指定抽奖时圆盘旋转的时间 代码

功能与场景 在项目中会有文章内容或其他什么东西是后台富文本编辑的，需要前端展示富文本内容 正常来说是没什么问题的，但是总有客户喜欢上传1k+ 甚至是2k+ 像素的图片或视频，这就导致在移动端中渲染时无

前端代码：WebSocket.js 可选参数 url (String) 必填项 WebSocket 服务器的完整地址 例如：'ws://example.com' 或 'wss://example.co

效果和场景 有一个项目是用户可以自定义衣服、手机壳、书包等等物品上的图案logo 例如下面这个小程序的设计功能 然后我也做了一个demo出来，效果如下图 基本的功能： 可以添加文本和图片素材 素材可以

uniapp 微信小程序 同声传译插件uniapp 微信小程序 同声传译插件uniapp 微信小程序 同声传译插件uniapp 微信小程序 同声传译插件uniapp 微信小程序 同声传译插件

场景与功能 开发的H5项目，用户访问过网站后浏览器会将网站的一些资源缓存起来 这时候就算我们更新了项目也可能会出现用户访问网站时还是使用旧资源的情况 功能： 一进入项目就自动刷新一次 代码 使用建议：

背景 项目是H5项目 使用JSAPI支付方式进行支付 如果是项目是H5项目并且使用的是微信的JSAPI支付，那么微信会在用户支付完成页面点击完成按钮后关闭原来的页面，这就会导致用户支付完成后点击完成直