-
CSS flex 布局子元素高度没有被撑开
示例代码 id=middle的子元素没有顶部对齐。 <div style="display: flex;align-items: center"> <div>123<br>123<br>12
2025-08-27, Views: 17 , Topics: CSS
-
CSS flex: 1 子元素占据父元素剩余空间
场景 row横向实现:左右两个图片,中间文字的布局。 column纵向实现:底部栏永远在屏最底下,即使高度不够时也在屏幕底部。(高度够时需滚动才展示) 代码 横向:中间文字使用flex: 1占据剩余
2025-08-26, Views: 25 , Topics: CSS
-
CSS 左右两边始终各占50%
场景 左右两边是两张产品图片,即使右边部分不可见,左边也只占屏幕宽度的50%,不铺满。 思路 右边加一个空的元素,包裹需要控制隐藏或显示的元素。 代码 主要代码:子元素设置flex: 1,且按需显示
2025-08-26, Views: 33 , Topics: CSS
-
CSS 实现部分图片在弹框外
需求 背景图片一半在弹框外。 实现 使用position: absolute绝对定位,设置top为负数即可。 .popup-content { display: flex; flex
2025-08-24, Views: 42 , Topics: CSS
-
CSS 设置背景透明色
半透明 使用rgba,设置alpha的值为0.5。 .bg { color: white; padding: 20px; background-color: rgba(0,
2025-08-24, Views: 52 , Topics: CSS
-
CSS 字体下划线 text-decoration 属性
代码 text-decoration设置为underline。 <div style="text-decoration: underline;">点击</div> text-underline
2025-08-23, Views: 63 , Topics: CSS
-
CSS box-sizing 属性
border-box 元素的width和height包含:内容区域、padding、border,但不包含margin。 给一个设置了width: 100px的元素加padding: 10px,元素
2025-08-21, Views: 68 , Topics: CSS
-
Vue TDesign Select 选择器自定义 Tag 标签
自定义 Tag 使用#valueDisplay="{ value }"这个slot插槽(valueDisplay的值固定为value)。 这样可以根据option中的item,自定义每一个Tag标签
-
抖音小程序 getUserProfile 和 getPhoneNumber 报错 api scope is not declared in the privacy agreement
错误信息 tt.getUserProfile failed getUserProfile:fail api scope is not declared in the privacy agreeme
2025-08-20, Views: 104 , Topics: 小程序
-
uni-app 避坑指南
注意点 编译到小程序平台时,如果有使用到Vue的directive指令会编译不通过。 获取用户信息时button不是同步执行,导致小程序报错:不是由用户手势发起的授权 uni-popup默认的
2025-08-19, Views: 67 , Topics: uni-app
-
uni-app 条件编译不同平台编写不同代码
条件编译 条件编译是用特殊的注释作为标记,在编译时根据这些特殊的注释,将注释里面的代码编译到不同平台。 使用方法 以#ifdef或#ifndef加%PLATFORM%开头,以#endif结尾。 #
2025-08-18, Views: 98 , Topics: uni-app
-
uni-app data-eventsync=true 属性
eventsync uni-app中为解决Vue3中部分小程序,button事件触发报错添加的属性。 示例代码 <view @click="getUserProfile" data-eventsyn
2025-08-17, Views: 87 , Topics: uni-app
-
uni-app getUserProfile 获取用户信息报错 must be invoked by user tap gesture
错误信息 getUserProfile:fail must be invoked by user tap gesture {"errMsg":"getUserProfile:fail must
2025-08-16, Views: 105 , Topics: uni-app
-
uni-app button 自定义样式
代码 <template> <button class="auth-btn" hover-class="none" type="default" open-type="getPhoneNum
-
uni-app popup 抖音小程序底部安全区留白问题
现象 uni-popup控件,底部弹出时出现了34px的空白。 safe-area属性默认为true,表示适配底部安全区,但不生效。 解决 显式指定safe-area为false。 同时为了兼容H5
2025-08-14, Views: 111 , Topics: uni-app
-
uni-app 全局 CSS 样式
App.vue <style> /*每个页面公共css */ page { min-height: calc(100vh - var(--status-bar-heigh
2025-08-13, Views: 100 , Topics: uni-app
-
uni-app 模态弹窗提示框
代码 uni.showModal({ title: '恭喜您', content: `获得奖品`, showCancel: false, confirmText: '
2025-08-12, Views: 107 , Topics: uni-app
-
uni-app popup 弹出时字体闪烁解决方法
现象 uni-popup弹出时,字体会闪烁一下,应该是多次绘制导致。 解决 禁用动画。 代码 :animation="false" <uni-popup ref="popup" :mask-clic
2025-08-11, Views: 108 , Topics: uni-app
-
uni-app image 元素在 flex column 布局下宽度为 0 的问题
现象 在flex column布局中,image元素指定了width: 100%,但实际渲染时宽度变为0了。 去掉width: 100%,图片就有实际宽度了。 原因 在flex-direction:
-
uni-app flex column 布局中图片高度被压缩
场景 需要给根元素设置背景,所以给根元素设置了height: 100vh以保证背景能覆盖整个屏幕。 但此时发现图片mode="widthFix"、style="width: 100%",高度被压缩了