企业官网建设流程全解析

icp备案和网站不符,wordpress localhost,传媒公司排名,jsp网站开发公司#x1f339;欢迎来到《小5讲堂》#x1f339; #x1f339;这是《小程序》系列文章#xff0c;每篇文章将以博主理解的角度展开讲解。#x1f339; #x1f339;温馨提示#xff1a;博主能力有限#xff0c;理解水平有限#xff0c;若有不对之处望指正#xff01;欢迎来到《小5讲堂》这是《小程序》系列文章每篇文章将以博主理解的角度展开讲解。温馨提示博主能力有限理解水平有限若有不对之处望指正 作者简介 荣誉头衔2024博客之星Top14 | CSDN博客专家 | 阿里云专家博主 经历曾多次进行线下演讲亦是CSDN内容合伙人以及新星优秀导师 信念“帮助别人成长自己” 技术领域深耕全栈精通 .NET Core (C#)、Python、Java熟悉主流数据库 欢迎交流无论是基础概念还是进阶实战都欢迎与我探讨目录前言一、问题定位二、核心解决方案方案一使用 disabled 替代方案二事件阻止方案方案三CSS 控制交互三、替代方案推荐方案一使用 view 组件展示方案二条件渲染四、最佳实践建议五、注意事项六、完整示例代码推荐文章前言在博主印象中设置只读应该是readonly太久没有写微信小程序发现没有效果于是简单写篇文章记录下。一、问题定位微信小程序中设置readonly属性后input 组件仍然可以交互的常见原因readonly 属性限制仅阻止键盘输入但仍可聚焦和长按复制事件冒泡未处理未阻止 touch/click 事件传播样式冲突影响CSS 可能覆盖了默认只读行为二、核心解决方案方案一使用 disabled 替代inputclasssearch-inputplaceholder请输入你需要搜索的型号disabled/特点完全禁止交互组件变为灰色不可用状态适用于表单禁用场景方案二事件阻止方案inputclasssearch-inputplaceholder请输入你需要搜索的型号bindtappreventTapcatchtouchstartpreventTouch/Page({preventTap(e){// 阻止默认行为returnfalse;},preventTouch(e){// 阻止触摸事件returnfalse;}})方案三CSS 控制交互/* 禁止所有交互 */.search-input{pointer-events:none;-webkit-user-select:none;user-select:none;}/* 仅禁止文本选择 */.search-input{user-select:none;}三、替代方案推荐方案一使用 view 组件展示viewclasssearch-display请输入你需要搜索的型号/view方案二条件渲染viewwx:if{{isReadonly}}viewclasssearch-text{{searchValue}}/view/viewviewwx:elseinputclasssearch-inputplaceholder请输入你需要搜索的型号bindinputonInput//view四、最佳实践建议根据具体场景选择方案纯展示场景→ 使用view组件表单禁用场景→ 使用disabled属性需要聚焦但不可编辑→readonly 事件阻止临时只读需求→ CSSpointer-events: none五、注意事项真机测试部分属性在模拟器和真机表现不同样式适配disabled状态需考虑UI兼容性用户体验明确告知用户当前状态如置灰、提示文案版本兼容确保基础库版本支持所用属性六、完整示例代码!-- 综合方案readonly 事件阻止 --inputclasssearch-input readonly-styleplaceholder请输入你需要搜索的型号readonlybindtappreventActionvalue{{searchValue}}/Page({data:{searchValue:},preventAction(){wx.showToast({title:当前不可编辑,icon:none})returnfalse;}}).readonly-style{background-color:#f5f5f5;color:#999;}按以上方案实施可有效解决微信小程序中 input 组件只读属性失效问题。推荐文章【小程序】微信小程序input设置readonly只读属性无效这是怎么回事呢【小程序】微信开发者工具上调用api接口可以到了线上调用发现提示wx.request调用报错原来是https协议问题【小程序】微信小程序开发给用户发送一次性订阅消息常见参数长度和数据类型说明你值得收藏【小程序】微信小程序开发分享给朋友或者朋友圈的功能增加地址参数以及如何进行带参数本地测试【小程序】.net core2.1对接微信支付开发时自己挖的坑【前端】微信小程序同名图片缓存问题增加图片后缀动态参数值解决【小程序】常用方法、知识点汇总1【腾讯云】AI驱动TDSQL-C Serveress 数据库技术实战营-如何是从0到1体验电商可视化分析小助手得统计功能一句话就能输出目标统计图【随笔】博客质量分计算如何让自己的博客脱颖而出也许文章能够给你答案【Sql Server】sql server 2019设置远程访问外网服务器需要设置好安全组入方向规则【千帆AppBuilder】零代码组件代码节点方式实现AI应用《法定退休年龄计算器》【1024程序员节】分享下博主的AI应用之旅有哪些好玩有趣的智能体呢不妨一起探索下