- 博客(16)
- 收藏
- 关注
RSS订阅原创 uniapp 封装一个导航栏，可切换tab也可滑动切换
本文介绍了一个通用的导航栏组件实现方案，支持点击切换和滑动切换功能。主要特点包括：1) 当前tab会自动居中显示；2) 支持上拉刷新和下拉加载；3) 采用Vue3+setup语法封装。组件分为顶部导航栏和内容区两部分，导航栏使用scroll-view实现横向滚动，内容区使用swiper实现滑动切换。组件通过计算tab位置实现居中效果，并提供了丰富的插槽和事件接口。示例代码展示了如何在订单管理页面中使用该组件，支持不同订单状态的切换和分页加载。该实现方案简洁高效，适合各类需要tab切换的场景。
2026-02-10 11:47:31
61
原创 封装一个常用的监听方法
在项目中，经常会遇到更新了一个数据，但是另一个页面为了减少请求资源，导致数据没有同步更新。所以封装了一个监听的方法，离开页面的时候再移除监听eventBus.off('监听事件（up:data）',‘方法（setData）’)进入页面的时候设置监听eventBus.on('监听事件（up:data）',‘方法（setData）’)，这样就可以很好的节省不必要的请求的，同时完成数据的同步。
2026-01-29 11:53:11
115
原创 uniapp的message封装
这里封装一个比较全面的message和loading，因为loading和message在uniapp中只能存在一个，所以导致经常会出现提示语一闪而过的情况，所以封装一个函数方法，解决问题，同时也让loading不会出现一闪而过的情况。
2026-01-29 11:46:58
187
原创 uniapp H5在钉钉端顶部原生导航栏标题内容错误
需要在钉钉中打开，测试小姐姐发现，页面在跳转的时候，页面title没有更新，一个title从头用到尾。大家也可以尝试在app.vue中监听路由变化，而调用这个方法去改变导航栏标题。，所以这个时候虽然页面跳转了，但是它不知道。在页面中引入上面的方法即可改变导航栏标题。使用钉钉自带的jsapi。
2025-06-04 13:53:58
300
原创 微信小程序抽屉组件代码，支持标题和底部按钮固定，内容区域可滚动，且宽度和高度自适应屏幕。
获取安全区域的底部内边距，并动态设置按钮区域的底部内边距，确保按钮与屏幕底部保持安全距离。底部按钮与屏幕底部保持安全距离，避免被系统导航栏遮挡。标题位于顶部，按钮位于底部，固定显示，不会滚动。动态获取屏幕宽度和高度，设置抽屉的最大宽高。抽屉组件包含标题和底部按钮，内容区域可滚动。：当内容超出最大高度时，内容区域可滚动。抽屉宽度为屏幕宽度，高度不超过屏幕高度。：宽度为屏幕宽度，高度不超过屏幕高度。标题和按钮固定显示，不会随内容滚动。，当内容超出最大高度时，可以滚动。：标题在顶部，按钮在底部。
2025-01-23 11:34:11
718
原创 vue3 封装涵盖移动端和PC端的消息提示框（Toast和Message）功能
涵盖移动端和PC端的消息提示框（Toast和Message）功能，包括动态调整显示位置、显示逻辑以及动画效果。
2025-01-23 10:19:06
874
原创 vue3比较全面的请求封装
vue3封装请求，包含请求拦截器：统一添加 Authorization 和时间戳。响应拦截器：统一处理成功和失败的响应，显示错误提示。取消重复请求：通过时间戳和请求方法判断重复请求并取消。Mock 数据支持：在开发环境中模拟 API 数据。请求重试机制：在请求失败时自动重试。日志记录：记录请求和响应的日志，方便调试。环境变量支持：从 VITE_API_BASE_URL 获取 baseURL。全局挂载：可以在任何地方通过 this.$http 使用请求方法.........
2025-01-22 11:45:00
1537
原创 微信小程序请求封装
以上封装方案结合了请求拦截、响应拦截、全局加载状态管理、错误处理和并发请求处理等多种优化思路，能够有效提升代码的复用性和可维护性，同时为用户提供更好的体验。
2025-01-21 14:48:43
622
原创 css 实现跑马灯效果 无限滚动 丝滑过渡
css 用animation和transform做滚动效果，每当第一个块移动出显示区域后，则重新开始滚动，做到无缝衔接过渡。写出html显示的内容。
2024-12-16 10:33:18
451
原创 uniapp 请求封装方案，结合全局和局部 loading 控制、请求拦截、错误处理、超时重试、日志记录、环境切换以及文件上传下载功能。
结合全局和局部 loading 控制、请求拦截、错误处理、超时重试、日志记录、环境切换以及文件上传下载功能。
2024-10-09 18:12:10
1065
3
原创 uniapp项目中使用uni-file-picker，实现限制用户上传文件大小和文件类型，并不回显（vue3+ts）
uni-file-picker中v-model绑定的fileList并不会回显失败的文件，导致我们获取的fileList不一致。无法准确控制文件上传数量limit。
2024-09-11 11:11:20
1079
原创 vue和app之间的通信，涵盖双向通信、异步回调、错误处理和日志记录等功能。
通过模块化设计和功能拆分，我们优化了 Vue.js 与原生 APP 的通信模块，使其具备以下特点：异步回调支持：支持原生调用 Vue 方法。错误处理与日志记录：便于调试和问题排查。灵活的双向通信：支持多种通信方式，包括消息传递、URL Scheme 和原生方法调用。易扩展性：模块化设计使得功能扩展更加方便。
2024-07-24 16:14:45
489
1
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人