- 博客(620)
- 问答 (7)
- 收藏
- 关注
RSS订阅原创 uni-app项目实战笔记24--uniapp实现图片保存到手机相册
uniapp提供了saveImageToPhotosAlbum API实现保存APP上的图片到本地相册。1、上面的代码使用了条件编译，如果是H5使用弹窗告知用户下载图片的方法；其中filePath参数为必填参数，需要填入图片文件路径，组合式API实现将APP上的图片下载到本地。从上表src参数可知 ，2、除H5以外，使用。
2025-06-24 22:21:48
84
原创 uni-app项目实战笔记23--解决首次加载额外图片带来的网络消耗问题
方法二：声明一个变量，存储当前用户预览过的图片，和前后各一张图片，当预览到第1张继续左滑时，切换为最后一张，当用户预览到最后一张继续右滑时切换为第一张。前面实现了图片的预览和切换，不过存在一个问题，当我们点击某张图片进行预览时，会把列表中其他图片一并进行请求，带来额外的网络开销。点击上面图片列表中的第一张图片，观察浏览器控制台，发现一次性额外加载了多张其他图片，带来额外性能和网络开销。1、往数组添加3张图片，从左到右分别是前一张，当前张，后一张；3、如果当前是最后一张，则下一张为图片数组的第一张。
2025-06-22 18:55:25
219
原创 uni-app项目实战笔记22--图片预览和切换
在swiper中当前图片所在的索引即为上面JS获得的currentIndex，当滑动图片时，通过change事件来改变当前索引。在模板层使用上面代码获取到的索引，由于索引从0开始，当前查看是第几张图片则需要索引加1，预览总数为分类列表数组的长度。1、图片预览时，通常需要知道，当前预览的是第几张，总共有多少张图片；2、当用户左右滑动切换预览图片时，当前预览索引需要随着进行切换。1、在图片列表页点击预览图片时，把图片Id作为参数传递过去。最后再来实现图片切换时，索引页的切换。
2025-06-22 17:21:46
105
原创 uni-app项目实战笔记21--uniapp缓存的写入和读取
通过 uni-app 的 API uni.getStorageSync 从本地缓存中读取键为 "storageClassList" 的数据。是 uni-app 特有的 API，在非 uni-app 项目中需替换为其他存储方案（如。数据兼容性处理：确保即使缓存无数据，程序也能安全运行（|| [] 的兜底逻辑）。从缓存加载分类数据：在页面初始化时，优先使用本地缓存数据（提升加载速度）。图片格式统一处理：将缩略图路径转换为高清图路径（可能用于详情页展示）。二、缓存的读取，如果缓存不存在，则返回空数组。
2025-06-22 16:00:03
225
原创 uni-app项目实战笔记20--触底加载更多样式的实现
触底加载更多的实现有多种，这里简单记录下2种： 1、使用骨架屏，需要到uniapp插件市场下载安装再使用：DCloud 插件市场2、使用uniapp扩展组件：uni-app官网第1种方式：访问DCloud 插件市场，在搜索栏中输入需要的组件，并可以采取条件过滤筛选符合条件的组件： 插件市场上有拥有众多丰富精美的组件，可以根据实际需要按需选择，如下图是部分加载中的插件：本文重点介绍uniapp扩展组件使用uni-load-more实现加载更多的样式。在页面顶部和底部添加一个加载更多的组件：上面的代码中添
2025-06-22 15:04:31
652
原创 uni-app项目实战笔记19--触底加载更多和阻止无效请求
1.引入uniapp函数onReachBottom，在onReachBottom将页码数进行累加 ，querParams.pageNum++，并再次调用加载数据的方法，没有数据进返回：if(noData.value) return，不再往下执行；3.判断是否还有下一页，如果没有，则不发送请求：res.data.length<querParams.pageSize。1.当下拉到底部时，重新向后台发送请求，并将新获取的数据与上一个请求获取到的数据进行叠加；
2025-06-22 13:42:13
176
原创 uni-app项目实战笔记18--使用onLoad从请求地址中获取参数
从代码可知，请求地址后面拼接了2个参数，一个是classid,另一个是name。注意事项：由于onLoad生命周期晚于setup，如果在onLoad函数外调用getClassList方法会导致拿不到请求参数queryParams。因此需要在onLoad函数里调用getClassList方法。其参数为上个页面传递的数据，参数类型为 Object。
2025-06-22 11:55:04
109
原创 uni-app项目实战笔记17--获取系统信息getSystemInfo状态栏和胶囊按钮
因此需要获取状态栏的高度以便状态栏和导航栏错开不重叠在一起。同时头部导航栏通过与右侧的胶囊按钮在同一水平线上，因此也需要获取胶囊按钮的高度来控制显示。：胶囊按钮顶部到状态栏底部的距离，乘以 2 表示上下对称留白（保证标题文字垂直居中）。下面我们通过代码，实现在微信小程序中将头部导航栏与刘海屏，状态栏拉开距离。获取小程序胶囊按钮的位置信息（如微信小程序右上角的菜单按钮）。动态绑定到顶部占位视图（避免内容被状态栏遮挡）。（高度），结合状态栏高度，计算出标题栏的实际高度。（状态栏高度，通常包含时间、电池栏等）。
2025-06-20 22:18:30
329
原创 uni-app项目实战笔记16--实现头部导航栏效果
导航栏会显示在普通元素（z-index 默认是 auto 或 0）的上方，确保它不会被其他内容遮挡，同时可以覆盖下方的滚动内容。导航栏会固定在浏览器窗口的最顶部（top: 0），并且从最左侧开始布局（left: 0）。导航栏会脱离文档流，始终固定在浏览器窗口的指定位置，不随页面滚动而移动。常见于移动端或单页应用（SPA），确保导航始终可见，方便用户操作。要求：顶部导航栏要始终固定在上方，不随页面上下拖动而消失。适用于网页的顶部导航栏（如菜单栏、搜索栏、标题栏等）。2.标题栏：实现搜索框，标题的效果。
2025-06-19 22:16:52
230
原创 uni-app项目实战笔记15--使用uni-popup实现弹出层和uni-rate实现评分效果
1.控制弹出方向：<uni-popup ref="infoPopup" type="bottom"> type指定弹出的类型,bottom从底部弹出，不带type即为中间层弹出；2.评分组件：<uni-rate v-model="userScore" allowHalf />设置圆角(左上、右上、右下和左下) 示例:"10px 10px 10px 10px"is-mask-click [1.7.4新增]allowHalf允许小数点半分，比如半颗星。使用ref为弹出层指定一个名称，蒙版点击是否关闭弹窗。
2025-06-19 21:21:01
301
原创 uni-app项目实战笔记14--给全屏页面添加遮罩层
1.引入uniapp时间格式化组件，对时间和日期进行格式化显示：‘2.定maskChange点击事件控制遮罩层的显示与隐藏。使用.mask > view{}来声明通用样式。：所有mask的直接子 view 元素（单独覆盖了部分样式（如颜色、定位）。2.下层胶囊层显示信息，评分和下载。1.上层显示计数，时间和日期；）共用绝对定位和居中逻辑，
2025-06-14 19:43:07
344
2
原创 uni-app项目实战笔记13--全屏页面的absolute定位布局和fit-content自适应内容宽度
本篇主要实现全屏页面的布局，其中还涉及内容自适应宽度。距顶部10vh高度；
2025-06-14 17:54:40
219
原创 uni-app项目实战笔记12--创建分类列表完成页面跳转
可以看到页面主体部分到顶部有一块空白区域，影响观感，下面实现通屏效果：在pages.json的pages各菜单中添加"navigationStyle": "custom"示例代码：重新运行效果：1、在pages目录下创建classlist.vue页面，写入下面的代码：2、在theme-item.vue公共组件navigator中指定要跳转到的详情页面：“更多”页面的跳转：注意：跳转到底部导航菜单时，需指定open-type="reLaunch"，否则无法跳转。“我的”里边“我的下载”
2025-06-14 16:54:56
264
原创 uni-app项目实战笔记11--定义scss颜色变量方便页面引用
前面的@/不可少，要以英文分号结尾。如果页面中引入了自定义的样式，uni.scss也正确引入了，需要把HBuilder X项目重新启动才会生效，要不然会报错。如果像上面替换了不起作用，有可能是行内样式，被覆盖了(调试时会发现样式代码被横线划掉)，可以使用!在 Vue 3 的 <style scoped> 或 微信小程序自定义组件的样式隔离 环境下，默认无法直接修改子组件的样式。则不能直接使用$brand-theme-color来引用，需要在<style>中定义样式才能使用颜色变量，:deep() 的作用。
2025-06-14 15:51:12
191
原创 uni-app项目实战笔记10--设置页面全局渐变线性渐变背景色
linear-gradient用于定义渐变色，to bottom，to right颜色渐变方向，backgroud可设置多个渐变色，优先级从上到下递减。我的页面在row部分添加一个核心模块的背景色：视觉效果更自然美观。本篇来设置页面的全局背景色，使用线性渐变背景色。
2025-06-14 14:55:37
251
原创 uni-app项目实战笔记8--个人中心页面搭建
→ 每行底部有一条浅灰色 (#eee) 的 1px 细线。→ 启用 Flex 布局，子元素默认横向排列（flex-direction: row）。→ 子元素会 均匀分布，第一个元素靠左，最后一个元素靠右，中间元素等间距分布。→ 子元素在 垂直方向 上居中对齐。→ 左右内边距 30rpx，上下无内边距。→ 每行高度固定为 100rpx。→ 最后一行 移除底部边框（避免多余的分割线）。→ 阴影边缘的模糊半径较大（约等于屏幕宽度的。），即阴影均匀环绕在元素四周。
2025-06-14 11:59:36
327
原创 uni-app项目实战笔记7--创建分类页面和底部导航栏
引入前面定义的公共组件theme-item，使用grid进行网格化布局。selectedColor：选中时的字体颜色；color：字体颜色；
2025-06-14 09:24:21
211
原创 uni-app项目实战笔记6--同一组件使用Props传递不同的值
本篇实现最后一张“更多”图的效果，前8张图点击跳转到查看详情页面，而点击“更多”则跳转到分类页面，因此在跳转处理上需要区别对待。视觉展示上也要营造出不同的效果。时，它的子元素会 垂直排列（从上到下），而不是默认的水平排列（从左到右）。是 CSS Flexbox 布局的一个属性，它决定了 flex 容器（父元素）中子元素的排列方向。通过子组件传入true，让组件显示为“更多”：最后一张图显示为更多的效果。1.class="box more"：使该部分继承(拥有)前面定义的box样式，同时又拥有自己的特性；
2025-06-14 08:45:05
231
原创 uni-app项目实战笔记5--使用grid进行定位布局
效果图中呈三行排版，前2行每行3张图片，最后一行2张图片。每张图片顶部和底部都有一些文字，文字又有磨砂效果的背景样式。白色文字，字体加粗 (font-weight: 600)，字号 30rpx。右下角圆角 (border-radius: 0 0 20rpx 0)列定义 grid-template-columns: repeat(3, 1fr)橙红色半透明背景 (rgba(250,129,90,0.7))半透明黑色背景 (rgba(0,0,0,0.2))（比传统的 grid-gap 更简洁的写法）
2025-06-13 23:04:13
649
原创 uni-app项目实战笔记4--使用组件具名插槽slot定义公共标题模块
先来看效果：如图，“每日推荐”，“专题精选”这些公共标题有相同的地方，也有自己的独特的地方，像这类有共性又有个性的可考虑使用slot插槽来实现。实现步骤：有共性的地方--标题，我们使用name插槽，个性化的地方使用custom插槽。
2025-06-13 21:44:57
422
原创 uni-app项目实战笔记3--使用scroll-view实现每日推荐左右滑动效果
1.在项目根目录下创建公共组件的目录components，在里边创建一个common-title组件，里边暂时先输入“每日推荐”4个字。在index.vue引入该组件；：为整个选择器区域添加顶部间距，避免内容紧贴页面顶部。2.在推荐的内容区使用scroll-view实现。保持间距，最后一个卡片右侧间距为。使用（HTML 中需显式声明）。（可能用于对齐其他元素）。图片完全填充卡片，并带有。，内部包含一张图片。
2025-06-12 23:13:32
279
原创 uni-app项目实战笔记2--使用swiper实现纵向轮播图
1.上面type="sound-filled"实现小喇叭的效果，type=“right”实现右箭头的效果；1.左边：小喇叭和公告，我们可以使用uniapp官方文档的扩展组件中的图标来实现；右侧是一个固定宽度的区域，通常放置图标（如“更多”箭头或关闭按钮）。3.右箭头，使用uniapp官方文档的扩展组件中的图标来实现。滑动动画的时长为 300毫秒（影响切换的流畅度，值越小越快）。轮播方向为 垂直滚动（从上到下或从下到上），默认是水平方向。的横向容器，宽度占屏，高度固定，内部元素水平排列。
2025-06-12 22:48:54
402
原创 uni-app学习笔记三十六--分段式选项卡组件的使用
(2)values :values="values"，需要在JS中定义 values值，用于选项卡显示的文字内容，最好声明为数组形式，方便调用；(2)声明一个key-value的数组，其中value为选项卡显示的文字，使用computed计算属性将数组中的value提取出来。上图有3个选项卡（PS:uniapp官方称之为分段器，我还是习惯叫选项卡），需要实现点击不同的选项卡时下方切换显示对应的数据。上面的代码中先将获取的旧数据清空，拿到当前选项卡的索引，最后调getPets()方法获取当前选项卡的数据。
2025-06-11 20:41:25
616
原创 uni-app学习笔记三十五--扩展组件的安装和使用
由于内置组件不能满足日常开发需要，uniapp官方也提供了众多的扩展组件供我们使用。由于不是内置组件，需要安装才能使用。
2025-06-09 22:46:13
579
原创 uni-app学习笔记三十四--刷新和回到顶部的实现
在移动端开发中，刷新和回到顶部也是很常见的使用场景。下面说下实现方式：刷新：scrollTop:0回到页面最顶部duration:100多久从当前区域回到顶部，值越小，返回到顶部就越快，设为100是个比较合理的值。
2025-06-09 21:35:55
542
原创 uni-app学习笔记三十三--触底加载更多和下拉刷新的实现
触底加载更多在APP和小程序中使用中是很常见的场景，当用户划到底部时需要追加数据加以显示，当用户往下拉时需要实现有新的数据时将新数据放到顶部。下面来说下这2种功能的实现方式。
2025-06-08 23:13:47
451
原创 uni-app学习笔记三十二--对回调结果进行处理
上面的代码实现当后台返回的响应状态为0时，即正常返回时才进行赋值，同时使用catch将一些异常情况展示出来，方便用户识别,最后使用finally进行兜底处理，无论请求成功还是失败，都要执行的操作。在进行网络请求时，除了正常能接收到响应时，也会存在一些特殊情况和异常情形。此时就需要对网络请求进行严格和兜底处理，避免给用户造成不好的体验。
2025-06-08 18:58:38
114
原创 uni-app学习笔记三十一--previewImage图片预览和懒加载
current 为当前显示图片的链接/索引值，不填或填写的值无效则为 urls 的第一张。1.9.5+ 支持传图片在 urls 中的索引值。，其中 B1 与 B2 的图片链接是一样的。需要预览的图片链接列表。
2025-06-08 18:25:02
427
原创 uni-app萌宠案例学习笔记--页面布局和CSS样式设置
2.box-shadow: 0 10rpx 40rpx rgba(0,0,0,0.08)，用于设置阴影效果，rgba设置阴影为半透明色；4.每个box由2种元素组成，图片和文字，图片mode使用widthFix随宽度进行自适应调节，防止图片被挤压变形。1.padding:设置页面元素内边距为50rpx,实现页面元素居中，到四周的内边距相等；5.image{width:100%}用于将图片宽度占满，防止左右出现空白；2.次外层：使用layout控制页面的整体布局样式；4.overflow：设置溢出处理策略；
2025-06-08 17:00:17
431
转载 vue开发中await / async的使用
这个函数必须有async命令，在调用函数的部分，前面都加了一个await，这个命令的意思就是等这一行的异步方法执行成功后，将返回的值赋值给res变量，然后才能再走下一行代码，这就是将原来的异步编程改为了同步编程，也就是常说的异步处理同步化。是成对出现的，如果使用await没有在函数中使用async命令，那就会报错，如果直接使用async没有使用await不会报错，只是返回的函数是个promise，可以，但是没有意义，所以这两个一起使用才会发挥出它们本身重要的作用。本方仅作笔记使用方便自己后续查阅。
2025-06-08 15:40:53
122
原创 uni-app学习笔记二十九--使用request发起网络请求并获取回调结果
本笔记主要记录uni-app,使用request发起网络请求，并获取响应结果的3种方式。方式三，使用async,await异步同步化处理(推荐)
2025-06-08 15:26:56
120
原创 uni-app学习笔记二十九--数据缓存
将 data 存储在本地缓存中指定的 key 中，如果有多个key相同，下面的会覆盖掉原上面的该 key 对应的内容，这是一个同步接口。数据可以是字符串，可以是数组。微信开发者平台查看本地缓存。//根据key清除缓存。
2025-06-08 14:29:54
387
原创 uni-app学习笔记二十八--页面路由跳转
页面路由更多信息详见uni官网：uni.navigateTo(OBJECT) | uni-app官网保留当前页面，跳转到应用内的某个页面，使用可以返回到原页面。关闭当前页面，跳转到应用内的某个页面。关闭所有页面，打开到应用内的某个页面。可以使用这个方法跳转到tabBar菜单页面，navigateTo跳转不到tabBar菜单页面。跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面。关闭当前页面，返回上一页面或多级页面。可通过 获取当前的页面栈，决定需要返回几层。delta参数说明 如果要实现标
2025-06-08 13:43:56
379
原创 uni-app学习笔记二十七--设置底部菜单TabBar的样式
在 js 中定义 onPullDownRefresh 处理函数（和onLoad等生命周期函数同级），监听该页面用户下拉刷新事件。动态设置 tabBar 某一项的内容，通常写在项目的App.vue的onLaunch方法中，用于项目启动时立即执行。开始下拉刷新，调用后触发下拉刷新动画，效果与用户手动下拉刷新一致。2.当用户点击跳转到相应菜单页面时，小红点和右上角角标消失。显示 tabBar 某一项的右上角的红点。隐藏 tabBar 某一项的右上角的红点。移除 tabBar 某一项右上角的文本。
2025-06-08 11:48:20
1277
原创 uni-app学习笔记二十六--设置导航条setNavigationBarTitle等的用法
仅微信小程序京东小程序支持该属性配置。在当前页面隐藏导航条加载动画。在当前页面显示导航条加载动画。动态设置当前页面的标题。
2025-06-08 10:25:32
169
原创 uni-app学习笔记二十五--showActionSheet的用法
res只会打印出索引，如果想获取索引对应的值，须将数组，列表放到方法外，然后通过attrs[res.tapIndex]获取。用于从底部向上弹出操作菜单。
2025-06-08 09:36:11
345
空空如也
$.messager.alert(）中文显示成？？？
2017-08-24
在前端页面格式化显示日期
2017-08-22
多文件上传文件数组不为空的判断
2017-08-19
恢复linux系统里的/bin/sh文件
2017-07-08
使用canvas绘制心电图
2017-05-06
内网怎样使用Maven管理JAVA WEB项目
2017-03-24
怎样将一个新的Web项目绑定到已备案的域名
2017-03-24
TA创建的收藏夹 TA关注的收藏夹
TA关注的人