记录微信小程序遇到的坑(border-radius导致 overflow:hidden失效)

微信小程序禁止页面滑动的三种方案:从原理到实战避坑指南 在移动端开发中,手势事件管理与滚动控制是提升交互体验的核心技术。其原理在于通过捕获和判断触摸事件,决定是否将滚动行为传递给页面容器。这项技术对于实现流畅、无干扰的界面至关重要,尤其在构建全屏弹窗、轮播图或沉浸式游戏页面时,能有效防止背景内容意外滚动,保障操作的可控性。从技术价值看,它直接关系到应用的专业度和用户满意度。常见的应用场景包括模态对话框、横向滑动组件以及静态单页。本文将聚焦微信小程序生态,深入解析如何利用 `catchtouchmove` 事件拦截和 `disableScroll` 配置等方案,精 阅读详情

记录微信小程序遇到的坑(border-radius导致 overflow:hidden失效)

使用Uniapp框架开发微信小程序

在这里插入图片描述
swiper中轮播图需要增加圆角美化,编译器显示是有圆角的,但是手机预览中圆角失效,查看css样式都是存在的。

	网上查找是因为父级设置了border-radius同时还设置了overflow:hidden,想要隐藏超出的子元素边角依然会显示出来,overflow:hidden无效了。

解决办法:
方法1、

position: relative; z-index:1;

放法2、

transform: rotate(0deg);
微信小程序图片自适应占满容器:4种CSS+JS方案详解 在前端开发中,图片自适应布局是响应式设计的核心挑战之一,尤其在移动端场景下。其原理在于通过CSS盒模型、定位机制与图片自身的宽高比特性,实现容器与内容的动态适配。这项技术的核心价值在于提升用户体验,确保图片在不同屏幕尺寸下都能完美展示,避免拉伸变形或布局错乱。在微信小程序开发中,由于渲染机制与Web的差异,图片自适应问题尤为突出。本文聚焦于解决小程序中图片“占满高度”这一高频痛点,深入剖析了包括利用`aspect-ratio`属性、经典的`padding-top`百分比技巧、结合JavaScript的动态计 阅读详情

相关推荐

uni-app微信小程序登录页UI设计:从渐变背景到交互优化的全流程实践

在移动应用开发中,前端UI设计与用户体验优化是提升产品竞争力的关键环节。其核心原理在于通过合理的视觉层次、流畅的交互反馈与稳定的性能表现,构建直观高效的用户界面。对于跨平台开发场景,uni-app框架凭借其“一套代码多端运行”的能力,成为高效开发的重要技术选择。结合微信小程序平台特性,开发者需在遵循其设计规范的同时,解决键盘适配、表单验证、多登录方式集成等具体工程问题。本文聚焦于登录页这一高频场景,详细阐述了如何运用CSS3渐变、毛玻璃效果、动态样式绑定等前端技术,打造一个兼具美观与实用性的登录界面,并深入

weixin_30600197的博客 635

uni-app的swiper组件设置overflow: hidden不生效

问题:在小程序里使用swiper组件制作轮播图,给父元素设置了固定宽高,样式圆角border-radius,定位position: relative,超出隐藏overflow: hidden,在安卓机正常显示,但是在ios上圆角不能显示,原因是这个超出隐藏没有生效,所以需要在父元素在添加这四行代码。 backface-visibility: hidden; transform: translate3d(0, 0, 0); -webkit-backface-visibility: hidden; -

dghgjuyhuoyho的博客 1630

微信小程序Canvas层级问题终极解决方案:覆盖交互与性能优化

在移动端开发中,Canvas作为强大的图形绘制组件,广泛应用于图表、签名、游戏动画等场景。其底层实现原理基于原生渲染,与WebView组件分层,这导致了其层级(z-index)在真机上始终最高的经典问题。这一技术特性虽然保障了绘制性能,却使得上层交互控件被遮挡,影响了用户体验和功能实现。从工程实践角度,开发者需要掌握核心的架构设计思路,例如利用cover-view组件进行有限覆盖,或采用非覆盖式的交互设计,如侧边栏操作、分离预览等模式。针对canvas的渲染性能优化,可采用离屏绘制、图层化等技巧减少重绘开销

weixin_34302561的博客 390

uniapp H5页面嵌入微信小程序 ios 下 video组件 播放视频 设置 border-radius overflow:hidden 不生效

在ios 系统中, 设置border-radius 可能会不生效(安卓有效),直接给要设置的元素设置 border-radius属性,再添加下面的代码即可实现功能: -webkit-backface-visibility: hidden; -webkit-transform: translate3d(0, 0, 0); 下面贴上自己项目中这一部分代码: ...

凉城玖的博客 2334

Vue+UniApp实战:1:1高还原支付宝模拟器全模块自定义开发指南

组件化与状态管理是现代前端开发的核心概念,通过将复杂界面拆分为可复用的组件,并借助集中式状态管理实现数据共享,能显著提升开发效率与可维护性。在跨端开发场景下,UniApp 结合 Vue 的组件化能力,可一套代码编译到 H5、小程序和 App,同时利用配置驱动和动态路由实现模块的灵活扩展与自定义。这些技术广泛应用于高还原度界面模拟、企业级中后台系统以及多端一致性的移动应用开发中。本文以支付宝模拟器为例,深入探讨如何基于 Vue 与 UniApp 实现 1:1 界面还原与全模块自定义架构,涵盖组件拆分、样式还原

weixin_34161064的博客 400

微信小程序集成百度AI图像识别实战:人脸颜值+植物识别双通道

图像识别是人工智能落地移动端的核心能力之一,其本质是通过深度学习模型对输入图像进行特征提取与分类判别。在微信小程序生态中,受限于网络策略与安全规范,直接调用第三方AI接口不可行,必须借助云函数实现鉴权中转与token自动管理。该方案兼顾技术安全性(client_secret不暴露)、工程稳定性(access_token缓存续期)和用户体验(图片压缩+缩略图自适应),广泛适用于校园科普、美颜社交、本地生活等场景。本文聚焦微信小程序与百度AI平台的深度适配,详解人脸颜值分析与植物识别双通道选型逻辑及端云协同实现

weixin_34294649的博客 500

在移动端设置overflow:hidden,无效?

哈?出现这个问题就是编码姿势不对啦。。。因为移动端是基于touch事件的,你若是将overflow:hidden用在了body上body{ overflow: hidden; }是不管用的。解决办法: 在需要隐藏滚动的内容上包裹一层div,然后给这个div设置overflow:hidden,就可以了,如下//HTML <body> <div class="hidDiv">

JillYu的博客 1423

微信小程序布局实战:rpx换算、flex分配与适配避坑指南

微信小程序开发中,页面布局的稳定性和适配性常常决定用户体验的成败。rpx单位将屏幕宽度固定为750份,让尺寸换算在不同机型间保持一致;flex布局通过主轴与交叉轴的对齐规则,高效处理导航栏、卡片列表等常见结构。理解这些基础概念与原理,能显著降低开发中的样式返工率。在实际工程中,布局还要应对安全区适配、键盘弹起、滚动容器边界等边界问题,以及fixed定位被transform破坏等高频陷阱。合理运用rpx、flex、scroll-view和真机调试工具,可以让页面在多种设备上呈现统一效果,并将隐藏问题在发布前提

weixin_35414260的博客 205

微信小程序--标签展开收起动画

微信小程序标签展开收起动画,使用css3的transition当高度变化时触发过渡效果,此方法需要固定高度,如果高度不固定,需要手动获取高度。 <view class="children flex flex-warp" style="height: {{item.childrenHeight}}px;" > children中初始化高度为0,通过点击事件修改height的高度,触发transtion过渡效果。 .children { height: 0; padding: 0;

chen_x_w的博客 3010

vivado2025安装教程:手把手带你完成环境配置

详细讲解vivado2025的安装步骤与环境配置技巧,帮助开发者快速搭建FPGA开发平台。涵盖常见问题解决方案,确保vivado2025稳定运行,提升开发效率。

weixin_42588672的博客 3019

Linux中Hadoop 集群搭建

零、下载Hadoop: http://archive.cloudera.com/cdh5/cdh/5/?tdsourcetag=s_pctim_aiomsg 一、集群规划: 搭建的 hadoop 集群由 3 台服务器组成,分别叫做 master,salve1 和 slave2。其中 master 作为主节点,slave1 和 slave2 作为从节点。 二、网络配置: 1.查看 3 个节点的主机名...

白墨的小白博客 3992

小程序uniapp 圆角css设置

小程序uniapp 圆角css设置

qq_36712111的博客 2403

使用PlotNeuralNet绘制深度学习网络图的基本操作

使用PlotNeuralNet绘制深度学习网络图的基本操作

weixin_46877907的博客 2110

uni-app微信小程序Canvas电子签名与3D翻转动画实现指南

在前端开发中,Canvas绘图和CSS 3D变换是构建丰富交互体验的核心技术。Canvas通过JavaScript API提供强大的2D图形绘制能力,常用于签名、图表等场景;CSS 3D变换则通过transform属性实现元素在三维空间中的旋转、缩放等效果,能创建流畅的视觉动画。这两项技术的结合,在移动端应用中能显著提升用户体验,尤其适用于电子签名、证件照、产品展示等需要正反面查看功能的业务场景。本文聚焦于uni-app微信小程序环境,针对电子签名功能,深入探讨如何利用Canvas采集用户笔迹,并通过CSS

weixin_34195364的博客 396

SNAP实战:Sentinel-1 GRD数据从预处理到后向散射系数生成全流程解析

本文详细解析了Sentinel-1 GRD数据从预处理到后向散射系数生成的全流程,包括辐射定标、噪声处理、地形校正等关键步骤。通过SNAP软件实战操作,帮助用户掌握SAR影像处理技巧,提升数据质量与分析效率,适用于地表变化监测、灾害评估等应用场景。

weixin_29239661的博客 536

Win10+Anaconda环境下PaddleOCR保姆级安装指南(附常见报错解决方案)

本文提供Win10+Anaconda环境下PaddleOCR的保姆级安装指南,涵盖从环境配置到模型部署的全流程,特别针对常见报错提供解决方案。通过详细的步骤说明和实用技巧,帮助开发者快速完成PaddleOCR安装与测试,避免常见陷阱,提升OCR开发效率。

weixin_29096377的博客 375

微信小程序自定义导航栏全攻略:从原理到实战适配

在移动应用开发中,UI组件定制化是提升用户体验和品牌辨识度的关键环节。微信小程序的原生导航栏虽然开箱即用,但在面对沉浸式背景、复杂交互控件等个性化设计需求时,其灵活性就显得不足。自定义导航栏的核心原理在于通过配置`navigationStyle: custom`关闭原生组件,并利用`wx.getMenuButtonBoundingClientRect()`API精确获取系统胶囊按钮的几何信息,从而为自定义布局提供精准的坐标基准。这项技术的核心价值在于突破了原生UI的限制,允许开发者完全掌控顶部区域的视觉表现

weixin_30463341的博客 293

TypeError: XGBClassifier.fit() got an unexpected keyword argument ‘early_stopping_rounds‘ 解决方案

本文主要介绍了TypeError: XGBClassifier.fit() got an unexpected keyword argument 'early_stopping_rounds’解决方案,希望能对使用XGBoost的同学们有所帮助。 文章目录 1. 问题描述 2. 解决方案

weixin_43178406的博客 1万+

Overleaf 协作功能:评论、批注、版本对比,到底怎么用?

用过 Overleaf 一起写论文,却搞不清 Overleaf 评论多久同步、Overleaf 批注落在哪、Overleaf 版本对比怎么打开?这篇从真实协作场景出发,把评论、批注、版本对比一次讲透,并附权限速查表与上手 Checklist。 ## 一次"翻车":50 条批注,找不到"第 3 稿"改了哪行 凌晨 2 点,导师发邮件:"第三稿再改一版。" 打开 Overleaf,左边 50 条

gitblog_00019的博客 417

杰理AC695N系列芯片 LED7数码管使用教程

杰理AC695N数码管使用摘要 本教程介绍了杰理AC695N芯片驱动LED7数码管的实现方法: 硬件配置:支持7/12/13脚三种数码管类型,详细说明了7脚数码管的标准段码定义和GPIO接线方式。 软件设置: 通过修改配置文件启用LED7功能 配置GPIO引脚映射(PORTC/PORTA组) 选择与硬件匹配的真值表 层次架构:包含硬件层、驱动层、UI层和应用层的完整设计,支持数字、字符和图标显示功能。 实现要点包括正确配置引脚类型、选择真值表,并通过UI风格设置为LED7模式。

qq_42014563的博客 1346

《Python星球日记》 第72天:问答系统与信息检索

《Python星球日记》 第72天:问答系统与信息检索,在前面的日子里,我们学习了自然语言处理的基础知识,包括文本预处理、词向量、Transformer架构和各种预训练模型。今天,我们将探索问答系统这一NLP的重要应用,以及如何结合信息检索技术构建智能问答系统。

Code_流苏:在代码中寻诗意,在实践中觅真知 1075

微信小程序原生定位三分钟实战:wx.getLocation+reverseGeocoder+map组件闭环

地图定位是移动应用最基础且高频的技术能力,其核心在于获取坐标、解析地址、可视化呈现三个环节。微信小程序通过原生API体系,将传统依赖高德/腾讯SDK的复杂链路大幅简化:wx.getLocation直接返回与<map>组件100%兼容的GCJ-02坐标,避免WGS84与火星坐标系转换陷阱;reverseGeocoder作为腾讯地图官方HTTP接口,配合access_token调用即可实现经纬度到结构化地址(如‘北京市朝阳区建国路88号’)的精准逆地理编码。该方案零第三方SDK、无需后端Key配置、不增加包体积

weixin_34293141的博客 394

大中型超市收银系统(可直接运行)

光步前台收银系统系统功能:商品销售、商品退货、挂单、收银员权限、会员销售、单品取消、整单取消、商品查询、脱机销售、脱机数据上传,基本资料下载,开钱箱、小票打印、收款结算,支持多币种付款方式(现金、储值卡、礼券、微信等),支持多种促销。运行环境:.net 4.0登陆信息用户名:1001 密码:123456内置商品信息,商品编码可输入00001000 - 00010000,测试效果相关功能键F5 结算 F9挂单 F11商品查询 F8退货 Insert单品取消 Del整单取消 F12开钱箱F2 会员 Ctrl+Z退出系统 Home 锁屏 相关源码待公开

微信小程序签字板:高可靠电子签名技术实现与司法存证方案

电子签名是数字身份确认与法律效力锚定的核心技术,其本质是具备可验证性、不可篡改性和可追溯性的数字行为凭证。在微信小程序生态中,签字板并非简单涂鸦功能,而是需满足《电子签名法》第十三条‘可靠电子签名’要求的交互终端。其实现依赖Canvas/WebGL双模渲染、像素级水印注入、DPR自适应适配、PNG Chunk元数据封装等关键技术,支撑银行开户、政务签约、医疗知情同意等高合规场景。本文聚焦微信小程序环境下的签字板工程化落地,详解从指尖轨迹采集到司法级验签的全链路设计。

weixin_34161032的博客 304

efm32 入门.pdf

本PDF共计22页,介绍的是操作驱动API,下载与否自己斟酌。

霍尼韦尔SoftMaster使用说明

霍尼韦尔SoftMaster使用说明

美妆护肤品小程序商城从零搭建:零基础两种路线全攻略

微信小程序商城是一种无需下载安装即可在微信内完成浏览、下单与支付的线上店铺系统,其入口短、体验流畅,天然适合美妆护肤品借助图文、短视频和直播进行展示与种草。从原理上看,电商类小程序依托微信生态,需完成主体认证、类目选择、微信支付开通等基础配置,再通过页面模板或代码开发实现商品展示与交易闭环。其技术价值在于帮助商家沉淀私域用户、提升复购效率,并结合朋友圈、社群和直播间形成“种草—进店—成交—售后”的完整链路。对于没有开发经验的商家,可优先选择第三方商城工具快速搭建;若希望页面更自由,则可学习微信小程序原生结构

weixin_33850890的博客 374

VC中sqlite的使用

在VC中对sqlite的使用,实现数据库大批数据的快速插入,读取数据库中的数据在ListCtrl中显示

TDesign Miniprogram Image 图片组件:完整 API 解析与源码实现原理

本文以 TDesign Miniprogram(微信小程序 UI 组件库)中 `Image` 图片组件的官方 API 文档为核心,系统梳理其全部属性(Props)、事件、插槽、外部样式类与 CSS 变量,并结合组件源码([image.ts](https://link.gitcode.com/i/f752aafb9394f65f8a99795d5029c59d))、模板([image.wxml](h

gitblog_00033的博客 369

微信小程序商品详情页五功能联动实现与踩坑指南

在微信小程序开发中,用户交互与状态同步是构建电商应用的核心课题。商品收藏、图片预览、客服、分享、加入购物车等功能并非孤立存在,而是围绕同一商品对象形成联动关系。理解缓存与云端存储的选型、异步请求的竞态控制、页面参数在冷启动时的传递等原理,是保障稳定体验的关键。通过合理设计共享数据结构和事件广播机制,能有效避免收藏状态不同步、分享参数丢失、角标更新错误等问题。在电商小程序、商城模块等场景中,掌握商品详情页的整合实现思路,可显著提升开发效率和用户满意度。基于原生小程序语法,系统讲解商品收藏、图片预览、客服会话、

weixin_34341117的博客 459
上一篇: 关于uniapp写微信小程序的坑permission 添加失败
下一篇: uniapp开发微信小程序中遇到的坑 image src属性动态绑定base64位图片不显示的问题
Alastor_L
博客等级 码龄7年 2粉丝 15原创
评论 1
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付:10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值