一、改写方式本次改写主要完成两项优化其一将 wxml 中的行内 style 静态样式全部抽离为 class 类样式实现结构与样式分离并遵循横杠命名规范其二扩充页面文本内容使内容超出一屏从而触发页面滚动效果。二、原有代码问题原案例将标题字体大小、加粗、居中、颜色等样式直接写在标签 style 属性中属于行内样式不利于代码复用和维护同时页面内容过少无法触发滚动难以满足长文本展示效果。!--index.wxml-- navigation-bar title字体和样式设置 back{{false}} colorblack background#FFF/navigation-bar scroll-view classscrollarea scroll-y typelist view classbox view stylefont-size: large;font-weight: bolder;text-align: center;margin-bottom: 30rpx;color: red; 党的二十大会议主题 /view view classtxt-style 高举中国特色社会主义伟大旗帜全面贯彻中国特色社会主义思想弘扬伟大建党精神自信自强踔厉奋发勇毅前行为全面建设社会主义现代化国家全面推进中华民族伟大复兴而团结奋斗。 /view /view /scroll-view三、具体改写步骤1. 样式抽离与规范化改造删除 wxml 页面中 view 标签的所有 style 行内样式在 index.wxss 中新建 class 样式命名采用小写字母横杠的规范不使用驼峰。将原有的字号、加粗、居中、红色字体、外边距等样式全部迁移到新 class 中。在 wxml 对应标签中通过 class 引用样式实现样式与结构分离。2. 扩充文本内容实现滚动效果在原有文本基础上新增多段二十大报告相关内容大幅增加页面文字内容使页面内容高度超过手机一屏高度。页面外层使用 scroll-view 开启纵向滚动属性 scroll-y内容溢出后可正常上下滚动查看。四、改写核心代码1. 修改后 wxml 核心代码!--index.wxml-- navigation-bar title字体和样式设置 back{{false}} colorblack background#FFF/navigation-bar scroll-view classscrollarea scroll-y typelist view classbox view classtitle-red-big 党的二十大会议主题 /view view classtxt-style 高举中国特色社会主义伟大旗帜全面贯彻中国特色社会主义思想弘扬伟大建党精神自信自强踔厉奋发勇毅前行为全面建设社会主义现代化国家全面推进中华民族伟大复兴而团结奋斗。 /view view classtxt-style 党的二十大报告提出新时代十年的伟大变革在党史、新中国史、改革开放史、社会主义发展史、中华民族发展史上具有里程碑意义。我们要坚持马克思主义在意识形态领域指导地位的根本制度建设具有强大凝聚力和引领力的社会主义意识形态巩固全党全国各族人民团结奋斗的共同思想基础。 /view view classtxt-style 青年强则国家强。当代中国青年生逢其时施展才干的舞台无比广阔实现梦想的前景无比光明。广大青年要坚定不移听党话、跟党走怀抱梦想又脚踏实地敢想敢为又善作善成立志做有理想、敢担当、能吃苦、肯奋斗的新时代好青年让青春在全面建设社会主义现代化国家的火热实践中绽放绚丽之花。 /view view classtxt-style 高质量发展是全面建设社会主义现代化国家的首要任务。发展是党执政兴国的第一要务。没有坚实的物质技术基础就不可能全面建成社会主义现代化强国。必须完整、准确、全面贯彻新发展理念坚持社会主义市场经济改革方向坚持高水平对外开放加快构建以国内大循环为主体、国内国际双循环相互促进的新发展格局。 /view /view /scroll-view2. 新增 wxss 抽离样式!--index.wxss-- .title-red-big { font-size: large; font-weight: bolder; text-align: center; margin-bottom: 30rpx; color: red; }五、改写效果总结1. 成功将行内样式改为外部 class 样式代码规范、可复用、易维护class 命名符合横杠命名规范。2. 页面内容增多超出一屏scroll-view 滚动效果正常生效满足长文本展示需求。3. 保留了所有原有字体、文本样式效果页面视觉效果不变实现了规范化优化。