微信小程序中内容自适应的textarea表单组件(autoheight_textarea)

简介：
本简介介绍了一种在微信小程序中的TextArea表单组件优化方案——autoHeight_textarea。该组件能够实现内容输入的高度自动调整，为用户提供更佳的交互体验。 根据内容自适应高度 组件 注意：要监听input事件改变value值 使用示例： <autoheight_textarea value={{value}} placeholder=写个评论 bindinput=listenerinput></autoheight_textarea> </p></div> </div> <div data-v-88f98792="" class="w-full p-5 mb-3 bg-white border border-gray-200 rounded-lg dark:bg-gray-800 dark:border-gray-700"> <div class="flex justify-center items-center mt-14 mb-7 text-gray-500 relative"><h2>全部评论 (<span>0</span>)</h2></div> <div class="w-full px-5 py-10 mb-3 bg-white border border-gray-200 rounded-lg dark:bg-gray-800 dark:border-gray-700"> <div class="flex items-center mt-10 mb-5 justify-center text-gray-400">还没有任何评论哟~</div> </div> </div> </div> <aside data-v-88f98792="" class="col-span-4 md:col-span-1 animate__animated animate__fadeInUp"> <div data-v-88f98792="" class="sticky top-[5.5rem]"> <div data-v-88f98792="" class="w-full py-5 px-2 mb-3 bg-white border border-gray-200 rounded-lg dark:bg-gray-800 dark:border-gray-700"> <div> <div class="flex flex-col items-center"> <div class="relative mb-4 mt-6"> <button class="px-4 py-2 rounded">点击登录</button> </div> <div class="flex justify-center gap-5 mb-2 dark:text-gray-400"> <div class="flex items-center flex-col gap-1 hover:text-sky-600 hover:scale-110 cursor-pointer"> <button class="text-sm" style="width:80px;height:35px;border:1px solid #c9c9c9;background-color:#fff;color:#555"> 下载历史 </button> </div> <div class="flex items-center flex-col gap-1 hover:text-sky-600 hover:scale-110 cursor-pointer"> <button class="text-sm" style="width:80px;height:35px;border:1px solid #c9c9c9;background-color:#fff;color:#555"> 积分购买 </button> </div> </div> </div> </div> </div> </div> </aside> </div> </main> </div> <div data-v-88f98792="" class="border z-50 cursor-pointer fixed bottom-2 right-2 md:bottom-10 md:right-10 inline p-3 bg-white hover:bg-gray-100 rounded dark:bg-gray-800 dark:hover:bg-gray-900 dark:border-gray-700" style="display:none"> <svg class="w-4 h-4 text-gray-500 dark:text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 10 14"> <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13V1m0 0L1 5m4-4 4 4"></path> </svg> </div> <div class="el-overlay" style="z-index:2001;display:none"> <div role="dialog" aria-modal="true" aria-label="下载码下载" aria-describedby="el-id-9941-0" class="el-overlay-dialog"></div> </div> <div class="el-overlay" style="z-index:2002;display:none"> <div role="dialog" aria-modal="true" aria-label="付费下载" aria-describedby="el-id-9941-1" class="el-overlay-dialog"></div> </div> <div class="el-overlay" style="z-index:2003;display:none"> <div role="dialog" aria-modal="true" aria-label="付费下载" aria-describedby="el-id-9941-2" class="el-overlay-dialog"></div> </div> <div class="el-overlay" style="z-index:2004;display:none"> <div role="dialog" aria-modal="true" aria-label="选择支付方式" aria-describedby="el-id-9941-3" class="el-overlay-dialog"></div> </div> <div class="el-overlay" style="z-index:2005;display:none"> <div role="dialog" aria-modal="true" aria-label="下载次数充值" aria-describedby="el-id-9941-4" class="el-overlay-dialog"></div> </div> <footer data-v-88f98792="" class="bg-white mt-5 dark:bg-gray-800 text-right"> <div class="w-full mx-auto max-w-screen-xl py-1 px-4 flex justify-end"><span class="text-sm text-gray-500 dark:text-gray-400">© 2025 <a href="https://www.itadn.com/" class="hover:underline">技术社区</a> .All Rights Reserved.</span> </div> </footer> </main> <div class="customer-service"> <div class="icons"><img src="http://d.itadn.com/seoassets/customer-cb314396.png" alt="客服"></div> <span style="color:#838b8b;font-size:12px">客服</span></div> </div> </div> <script type="script" src="http://d.itadn.com/src/composables/echarts.min.js"></script> <div data-v-0e1787d0="" class="popup-container"> <div data-v-0e1787d0="" class="popup-content"> <div data-v-0e1787d0="" class="activity-image"><img data-v-0e1787d0="" src="http://d.itadn.com/seoassets/activecustomer-98ac7d5d.png" alt="客服" class="top-image"><img data-v-0e1787d0="" src="http://d.itadn.com/seoassets/close-5242d789.png" alt="关闭" class="top-right-close" style="width:40px"></div> </div> </div> <li data-v-abd0b829="" class="border-solid border-2 border-gray-300 dark:border-gray-600 grid auto-rows-min grid-cols-9 hover:bg-gray-100 hover:rounded-lg dark:hover:bg-gray-700 listyle" style="cursor: pointer;"> <div data-v-abd0b829="" class="col-start-1 pt-1 col-end-2 row-span-2 place-self-center imgsize"> <svg data-v-abd0b829="" t="1721980773527" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="26446" width="55" height="110"> <path data-v-abd0b829="" d="M834.6624 409.6a40.8576 40.8576 0 0 0-13.7728-30.63808l-254.32064-254.32064a40.87296 40.87296 0 0 0-31.1552-11.84768c-0.97792-0.07168-1.9456-0.1536-2.93376-0.1536H230.4a40.96 40.96 0 0 0-40.96 40.96v716.8a40.96 40.96 0 0 0 40.96 40.96h563.2a40.96 40.96 0 0 0 40.96-40.96V419.84c0-1.62304-0.11776-3.21536-0.3072-4.79232a40.6528 40.6528 0 0 0 0.4096-5.44768zM578.56 252.48256L694.71744 368.64H578.56V252.48256zM271.36 829.44V194.56h225.28v215.04a40.96 40.96 0 0 0 40.96 40.96h215.04v378.88H271.36z" p-id="26447" fill="#707070"></path> <path data-v-abd0b829="" d="M371.2 660.48h133.12a40.96 40.96 0 0 0 0-81.92h-133.12a40.96 40.96 0 0 0 0 81.92zM650.24 696.32H363.52a40.96 40.96 0 0 0 0 81.92h286.72a40.96 40.96 0 0 0 0-81.92z" p-id="26448" fill="#707070"></path> </svg> </div> <div data-v-abd0b829="" class="col-start-2 p-1 col-end-8 items-center sm:flex text-base font-normal pt-1 text-gray-900 dark:text-white min-h-13 max-h-13 overflow-hidden"> <a data-v-abd0b829="" class="min-h-12 max-h-12 overflow-hidden ..." title="<span style=color: #f73131>微</span><span style=color: #f73131>信</span><span style=color: #f73131>小</span><span style=color: #f73131>程</span><span style=color: #f73131>序</span><span style=color: #f73131>中</span><span style=color: #f73131>内</span><span style=color: #f73131>容</span><span style=color: #f73131>自</span><span style=color: #f73131>适</span><span style=color: #f73131>应</span><span style=color: #f73131>的</span><span style=color: #f73131>textarea</span><span style=color: #f73131>表</span><span style=color: #f73131>单</span><span style=color: #f73131>组</span><span style=color: #f73131>件</span>(<span style=color: #f73131>autoheight_textarea</span>)" href="https://d.itadn.com/i0_37334652779/B/1375973" target="_blank"><span style=color: #f73131>微</span><span style=color: #f73131>信</span><span style=color: #f73131>小</span><span style=color: #f73131>程</span><span style=color: #f73131>序</span><span style=color: #f73131>中</span><span style=color: #f73131>内</span><span style=color: #f73131>容</span><span style=color: #f73131>自</span><span style=color: #f73131>适</span><span style=color: #f73131>应</span><span style=color: #f73131>的</span><span style=color: #f73131>textarea</span><span style=color: #f73131>表</span><span style=color: #f73131>单</span><span style=color: #f73131>组</span><span style=color: #f73131>件</span>(<span style=color: #f73131>autoheight_textarea</span>)</a> </div> <div data-v-abd0b829="" class="col-start-9 col-end-10" style="float: left;"><span data-v-abd0b829="" class="onestyle">优质</span></div> <div data-v-abd0b829="" class="col-start-2 col-end-9 p-1 text-gray-500 text-xs font-normal dark:text-white"> <div data-v-abd0b829="" class="min-h-8 max-h-8 overflow-hidden ..."> 本简介介绍了一种在微信小程序中的TextArea表单组件优化方案——autoHeight_textarea。该组件能够实现内容输入的高度自动调整，为用户提供更佳的交互体验。 <textarea>根据内容自适应高度 组件 注意：要监听input事件改变value值 使用示例： <autoheight_textarea value={{value}} placeholder=写个评论 bindinput=listenerinput></autoheight_textarea> </div><!---->   </div> </li> <li data-v-abd0b829="" class="border-solid border-2 border-gray-300 dark:border-gray-600 grid auto-rows-min grid-cols-9 hover:bg-gray-100 hover:rounded-lg dark:hover:bg-gray-700 listyle" style="cursor: pointer;"> <div data-v-abd0b829="" class="col-start-1 pt-1 col-end-2 row-span-2 place-self-center imgsize"> <svg data-v-abd0b829="" t="1721980773527" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="26446" width="55" height="110"> <path data-v-abd0b829="" d="M834.6624 409.6a40.8576 40.8576 0 0 0-13.7728-30.63808l-254.32064-254.32064a40.87296 40.87296 0 0 0-31.1552-11.84768c-0.97792-0.07168-1.9456-0.1536-2.93376-0.1536H230.4a40.96 40.96 0 0 0-40.96 40.96v716.8a40.96 40.96 0 0 0 40.96 40.96h563.2a40.96 40.96 0 0 0 40.96-40.96V419.84c0-1.62304-0.11776-3.21536-0.3072-4.79232a40.6528 40.6528 0 0 0 0.4096-5.44768zM578.56 252.48256L694.71744 368.64H578.56V252.48256zM271.36 829.44V194.56h225.28v215.04a40.96 40.96 0 0 0 40.96 40.96h215.04v378.88H271.36z" p-id="26447" fill="#707070"></path> <path data-v-abd0b829="" d="M371.2 660.48h133.12a40.96 40.96 0 0 0 0-81.92h-133.12a40.96 40.96 0 0 0 0 81.92zM650.24 696.32H363.52a40.96 40.96 0 0 0 0 81.92h286.72a40.96 40.96 0 0 0 0-81.92z" p-id="26448" fill="#707070"></path> </svg> </div> <div data-v-abd0b829="" class="col-start-2 p-1 col-end-8 items-center sm:flex text-base font-normal pt-1 text-gray-900 dark:text-white min-h-13 max-h-13 overflow-hidden"> <a data-v-abd0b829="" class="min-h-12 max-h-12 overflow-hidden ..." title="<span style=color: #f73131>Textarea</span>-Autosize：<span style=color: #f73131>自</span>动调整<span style=color: #f73131>Textarea</span>大<span style=color: #f73131>小</span>以<span style=color: #f73131>适</span><span style=color: #f73131>应</span>其<span style=color: #f73131>内</span><span style=color: #f73131>容</span>" href="https://d.itadn.com/i0_69841769840/B/1318229" target="_blank"><span style=color: #f73131>Textarea</span>-Autosize：<span style=color: #f73131>自</span>动调整<span style=color: #f73131>Textarea</span>大<span style=color: #f73131>小</span>以<span style=color: #f73131>适</span><span style=color: #f73131>应</span>其<span style=color: #f73131>内</span><span style=color: #f73131>容</span></a> </div> <div data-v-abd0b829="" class="col-start-9 col-end-10" style="float: left;"><span data-v-abd0b829="" class="onestyle">优质</span></div> <div data-v-abd0b829="" class="col-start-2 col-end-9 p-1 text-gray-500 text-xs font-normal dark:text-white"> <div data-v-abd0b829="" class="min-h-8 max-h-8 overflow-hidden ..."> Textarea-Autosize是一款实用的JavaScript插件，能够自动调整文本区域（Textarea）的大小，使其高度和宽度始终适应输入的内容。 Textarea自动调整大小功能可以使其根据内容的多少自动调整尺寸。 安装方法： ```bash $ npm install @githubtextarea-autosize ``` 使用该库的方法是，在`<textarea>`上显式激活自动调整大小的功能。 导入autosize模块： ```javascript import autosize from @githubtextarea-autosize ``` 然后应用到指定的Textarea元素中，例如： ```javascript autosize(document.querySelector(textarea.foo)) ``` 对于使用类的库的情况，可以将此行为应用于任何带有匹配类名的文本区域。 导入`selector-observer`模块中的观察方法： ```javascript import { observe } from selector-observer ``` 然后应用autosize功能： ```javascript observe(textarea.autosize, { subscribe: autosize }) ``` </div><!---->   </div> </li> <li data-v-abd0b829="" class="border-solid border-2 border-gray-300 dark:border-gray-600 grid auto-rows-min grid-cols-9 hover:bg-gray-100 hover:rounded-lg dark:hover:bg-gray-700 listyle" style="cursor: pointer;"> <div data-v-abd0b829="" class="col-start-1 pt-1 col-end-2 row-span-2 place-self-center imgsize"> <svg data-v-abd0b829="" t="1721980773527" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="26446" width="55" height="110"> <path data-v-abd0b829="" d="M834.6624 409.6a40.8576 40.8576 0 0 0-13.7728-30.63808l-254.32064-254.32064a40.87296 40.87296 0 0 0-31.1552-11.84768c-0.97792-0.07168-1.9456-0.1536-2.93376-0.1536H230.4a40.96 40.96 0 0 0-40.96 40.96v716.8a40.96 40.96 0 0 0 40.96 40.96h563.2a40.96 40.96 0 0 0 40.96-40.96V419.84c0-1.62304-0.11776-3.21536-0.3072-4.79232a40.6528 40.6528 0 0 0 0.4096-5.44768zM578.56 252.48256L694.71744 368.64H578.56V252.48256zM271.36 829.44V194.56h225.28v215.04a40.96 40.96 0 0 0 40.96 40.96h215.04v378.88H271.36z" p-id="26447" fill="#707070"></path> <path data-v-abd0b829="" d="M371.2 660.48h133.12a40.96 40.96 0 0 0 0-81.92h-133.12a40.96 40.96 0 0 0 0 81.92zM650.24 696.32H363.52a40.96 40.96 0 0 0 0 81.92h286.72a40.96 40.96 0 0 0 0-81.92z" p-id="26448" fill="#707070"></path> </svg> </div> <div data-v-abd0b829="" class="col-start-2 p-1 col-end-8 items-center sm:flex text-base font-normal pt-1 text-gray-900 dark:text-white min-h-13 max-h-13 overflow-hidden"> <a data-v-abd0b829="" class="min-h-12 max-h-12 overflow-hidden ..." title="<span style=color: #f73131>微</span><span style=color: #f73131>信</span><span style=color: #f73131>小</span><span style=color: #f73131>程</span><span style=color: #f73131>序</span>-<span style=color: #f73131>自</span>定义<span style=color: #f73131>组</span><span style=color: #f73131>件</span>在<span style=color: #f73131>微</span><span style=color: #f73131>信</span><span style=color: #f73131>小</span><span style=color: #f73131>程</span><span style=color: #f73131>序</span><span style=color: #f73131>中</span><span style=color: #f73131>的</span><span style=color: #f73131>应</span>用" href="https://d.itadn.com/i0_67873782370/B/800514" target="_blank"><span style=color: #f73131>微</span><span style=color: #f73131>信</span><span style=color: #f73131>小</span><span style=color: #f73131>程</span><span style=color: #f73131>序</span>-<span style=color: #f73131>自</span>定义<span style=color: #f73131>组</span><span style=color: #f73131>件</span>在<span style=color: #f73131>微</span><span style=color: #f73131>信</span><span style=color: #f73131>小</span><span style=color: #f73131>程</span><span style=color: #f73131>序</span><span style=color: #f73131>中</span><span style=color: #f73131>的</span><span style=color: #f73131>应</span>用</a> </div> <div data-v-abd0b829="" class="col-start-9 col-end-10" style="float: left;"><span data-v-abd0b829="" class="onestyle">优质</span></div> <div data-v-abd0b829="" class="col-start-2 col-end-9 p-1 text-gray-500 text-xs font-normal dark:text-white"> <div data-v-abd0b829="" class="min-h-8 max-h-8 overflow-hidden ..."> 本课程聚焦于微信小程序中自定义组件的应用与开发技巧，深入讲解如何利用这些组件提高开发效率及用户体验。 微信小程序支持自定义组件预览功能，在使用web开发者工具打开项目时，请注意选择src目录而非整个项目文件夹。在src/components/下可以找到各种组件的wxml结构，样式文件则可以直接引用src/components/wux.wxss。 提供的组件包括： - ComponentsActionSheet：上拉菜单 - Backdrop：背景幕 - Barcode：条形码 - Button：浮动按钮 - Calendar：日历 - CountDown：倒计时 - CountUp：计数器 - Dialog：对话框 - Gallery：画廊展示组件 - Loading：指示器 - Notification：通知提示功能 - Picker：选择器工具 - Prompt：信息提示界面 - Qrcode ：二维码生成 - Rater : 评分系统 - Refresher: 下拉刷新操作 - Seats : 座位图管理 - Toast : 提示框显示 - Toptips:顶部提示 - Xnumber: 数字输入框 项目截图和贡献都可以通过提交issue来反馈意见或建议。 该项目采用MIT许可证。 </div><!---->   </div> </li> <li data-v-abd0b829="" class="border-solid border-2 border-gray-300 dark:border-gray-600 grid auto-rows-min grid-cols-9 hover:bg-gray-100 hover:rounded-lg dark:hover:bg-gray-700 listyle" style="cursor: pointer;"> <div data-v-abd0b829="" class="col-start-1 pt-1 col-end-2 row-span-2 place-self-center imgsize"> <svg data-v-abd0b829="" t="1721980773527" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="26446" width="55" height="110"> <path data-v-abd0b829="" d="M834.6624 409.6a40.8576 40.8576 0 0 0-13.7728-30.63808l-254.32064-254.32064a40.87296 40.87296 0 0 0-31.1552-11.84768c-0.97792-0.07168-1.9456-0.1536-2.93376-0.1536H230.4a40.96 40.96 0 0 0-40.96 40.96v716.8a40.96 40.96 0 0 0 40.96 40.96h563.2a40.96 40.96 0 0 0 40.96-40.96V419.84c0-1.62304-0.11776-3.21536-0.3072-4.79232a40.6528 40.6528 0 0 0 0.4096-5.44768zM578.56 252.48256L694.71744 368.64H578.56V252.48256zM271.36 829.44V194.56h225.28v215.04a40.96 40.96 0 0 0 40.96 40.96h215.04v378.88H271.36z" p-id="26447" fill="#707070"></path> <path data-v-abd0b829="" d="M371.2 660.48h133.12a40.96 40.96 0 0 0 0-81.92h-133.12a40.96 40.96 0 0 0 0 81.92zM650.24 696.32H363.52a40.96 40.96 0 0 0 0 81.92h286.72a40.96 40.96 0 0 0 0-81.92z" p-id="26448" fill="#707070"></path> </svg> </div> <div data-v-abd0b829="" class="col-start-2 p-1 col-end-8 items-center sm:flex text-base font-normal pt-1 text-gray-900 dark:text-white min-h-13 max-h-13 overflow-hidden"> <a data-v-abd0b829="" class="min-h-12 max-h-12 overflow-hidden ..." title="<span style=color: #f73131>微</span><span style=color: #f73131>信</span><span style=color: #f73131>小</span><span style=color: #f73131>程</span><span style=color: #f73131>序</span><span style=color: #f73131>中</span>Form<span style=color: #f73131>表</span><span style=color: #f73131>单</span><span style=color: #f73131>组</span><span style=color: #f73131>件</span><span style=color: #f73131>的</span>示例代码" href="https://d.itadn.com/i0_57900428276/B/785857" target="_blank"><span style=color: #f73131>微</span><span style=color: #f73131>信</span><span style=color: #f73131>小</span><span style=color: #f73131>程</span><span style=color: #f73131>序</span><span style=color: #f73131>中</span>Form<span style=color: #f73131>表</span><span style=color: #f73131>单</span><span style=color: #f73131>组</span><span style=color: #f73131>件</span><span style=color: #f73131>的</span>示例代码</a> </div> <div data-v-abd0b829="" class="col-start-9 col-end-10" style="float: left;"><span data-v-abd0b829="" class="onestyle">优质</span></div> <div data-v-abd0b829="" class="col-start-2 col-end-9 p-1 text-gray-500 text-xs font-normal dark:text-white"> <div data-v-abd0b829="" class="min-h-8 max-h-8 overflow-hidden ..."> 本示例代码详细展示了如何在微信小程序中使用Form表单组件进行数据收集与提交，包括常见配置及事件处理方法。 在表单提交过程中，需要将组件内的用户输入的<switch>、<input>、<checkbox>、<slider>、<radio> 和 <picker> 数据进行提交。当点击<form>标签中 formType 属性为 submit 的<button> 组件时，会把表单中的 value 值一起提交，并且需要在各个组件上添加 name 作为 key。属性 report-submit 是一个布尔值类型，用于判断是否返回formId以发送模板消息；bindsubmit 则是一个事件处理器，携带 form 中的数据触发 submit 事件，在 event.detail 中可以获取到 {value: {...}} 形式的数据结构。 </div><!---->   </div> </li> <li data-v-abd0b829="" class="border-solid border-2 border-gray-300 dark:border-gray-600 grid auto-rows-min grid-cols-9 hover:bg-gray-100 hover:rounded-lg dark:hover:bg-gray-700 listyle" style="cursor: pointer;"> <div data-v-abd0b829="" class="col-start-1 pt-1 col-end-2 row-span-2 place-self-center imgsize"> <svg data-v-abd0b829="" t="1721980773527" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="26446" width="55" height="110"> <path data-v-abd0b829="" d="M834.6624 409.6a40.8576 40.8576 0 0 0-13.7728-30.63808l-254.32064-254.32064a40.87296 40.87296 0 0 0-31.1552-11.84768c-0.97792-0.07168-1.9456-0.1536-2.93376-0.1536H230.4a40.96 40.96 0 0 0-40.96 40.96v716.8a40.96 40.96 0 0 0 40.96 40.96h563.2a40.96 40.96 0 0 0 40.96-40.96V419.84c0-1.62304-0.11776-3.21536-0.3072-4.79232a40.6528 40.6528 0 0 0 0.4096-5.44768zM578.56 252.48256L694.71744 368.64H578.56V252.48256zM271.36 829.44V194.56h225.28v215.04a40.96 40.96 0 0 0 40.96 40.96h215.04v378.88H271.36z" p-id="26447" fill="#707070"></path> <path data-v-abd0b829="" d="M371.2 660.48h133.12a40.96 40.96 0 0 0 0-81.92h-133.12a40.96 40.96 0 0 0 0 81.92zM650.24 696.32H363.52a40.96 40.96 0 0 0 0 81.92h286.72a40.96 40.96 0 0 0 0-81.92z" p-id="26448" fill="#707070"></path> </svg> </div> <div data-v-abd0b829="" class="col-start-2 p-1 col-end-8 items-center sm:flex text-base font-normal pt-1 text-gray-900 dark:text-white min-h-13 max-h-13 overflow-hidden"> <a data-v-abd0b829="" class="min-h-12 max-h-12 overflow-hidden ..." title="<span style=color: #f73131>微</span><span style=color: #f73131>信</span><span style=color: #f73131>小</span><span style=color: #f73131>程</span><span style=color: #f73131>序</span><span style=color: #f73131>中</span>实现image图片<span style=color: #f73131>组</span><span style=color: #f73131>件</span><span style=color: #f73131>的</span>宽高<span style=color: #f73131>自</span><span style=color: #f73131>适</span><span style=color: #f73131>应</span>方法" href="https://d.itadn.com/i0_14761687154/B/771770" target="_blank"><span style=color: #f73131>微</span><span style=color: #f73131>信</span><span style=color: #f73131>小</span><span style=color: #f73131>程</span><span style=color: #f73131>序</span><span style=color: #f73131>中</span>实现image图片<span style=color: #f73131>组</span><span style=color: #f73131>件</span><span style=color: #f73131>的</span>宽高<span style=color: #f73131>自</span><span style=color: #f73131>适</span><span style=color: #f73131>应</span>方法</a> </div> <div data-v-abd0b829="" class="col-start-9 col-end-10" style="float: left;"><span data-v-abd0b829="" class="onestyle">优质</span></div> <div data-v-abd0b829="" class="col-start-2 col-end-9 p-1 text-gray-500 text-xs font-normal dark:text-white"> <div data-v-abd0b829="" class="min-h-8 max-h-8 overflow-hidden ..."> 本文介绍了如何在微信小程序中调整和优化image组件以实现图像的宽度和高度自动适配屏幕的方法。 初次制作小程序时使用了image图片组件，并设置了src属性引用一张图片。为了使图片宽度占据父元素的100%，我给图片样式设定了width: 100%。然而，这样做导致图片变形了。 根据HTML中的默认显示规则，在浏览器中浏览时，如果设定图片宽度为其本身的最大宽度像素值，并让高度自适应，那么不会造成图像失真。因此我认为问题出在小程序对image组件的默认样式设置上。果不其然，通过调试器查看元素属性后发现，小程序给image组件设置了如下默认样式：`width: 320px; height: 240px; display: inline-block`。 这导致了图片变形的问题出现。 </div><!---->   </div> </li> <li data-v-abd0b829="" class="border-solid border-2 border-gray-300 dark:border-gray-600 grid auto-rows-min grid-cols-9 hover:bg-gray-100 hover:rounded-lg dark:hover:bg-gray-700 listyle" style="cursor: pointer;"> <div data-v-abd0b829="" class="col-start-1 pt-1 col-end-2 row-span-2 place-self-center imgsize"> <svg data-v-abd0b829="" t="1721980773527" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="26446" width="55" height="110"> <path data-v-abd0b829="" d="M834.6624 409.6a40.8576 40.8576 0 0 0-13.7728-30.63808l-254.32064-254.32064a40.87296 40.87296 0 0 0-31.1552-11.84768c-0.97792-0.07168-1.9456-0.1536-2.93376-0.1536H230.4a40.96 40.96 0 0 0-40.96 40.96v716.8a40.96 40.96 0 0 0 40.96 40.96h563.2a40.96 40.96 0 0 0 40.96-40.96V419.84c0-1.62304-0.11776-3.21536-0.3072-4.79232a40.6528 40.6528 0 0 0 0.4096-5.44768zM578.56 252.48256L694.71744 368.64H578.56V252.48256zM271.36 829.44V194.56h225.28v215.04a40.96 40.96 0 0 0 40.96 40.96h215.04v378.88H271.36z" p-id="26447" fill="#707070"></path> <path data-v-abd0b829="" d="M371.2 660.48h133.12a40.96 40.96 0 0 0 0-81.92h-133.12a40.96 40.96 0 0 0 0 81.92zM650.24 696.32H363.52a40.96 40.96 0 0 0 0 81.92h286.72a40.96 40.96 0 0 0 0-81.92z" p-id="26448" fill="#707070"></path> </svg> </div> <div data-v-abd0b829="" class="col-start-2 p-1 col-end-8 items-center sm:flex text-base font-normal pt-1 text-gray-900 dark:text-white min-h-13 max-h-13 overflow-hidden"> <a data-v-abd0b829="" class="min-h-12 max-h-12 overflow-hidden ..." title="一款<span style=color: #f73131>适</span>用于<span style=color: #f73131>微</span><span style=color: #f73131>信</span><span style=color: #f73131>小</span><span style=color: #f73131>程</span><span style=color: #f73131>序</span><span style=color: #f73131>的</span><span style=color: #f73131>自</span><span style=color: #f73131>适</span><span style=color: #f73131>应</span>式<span style=color: #f73131>自</span>定义导航栏<span style=color: #f73131>组</span><span style=color: #f73131>件</span>" href="https://d.itadn.com/i0_80128119014/B/1334772" target="_blank">一款<span style=color: #f73131>适</span>用于<span style=color: #f73131>微</span><span style=color: #f73131>信</span><span style=color: #f73131>小</span><span style=color: #f73131>程</span><span style=color: #f73131>序</span><span style=color: #f73131>的</span><span style=color: #f73131>自</span><span style=color: #f73131>适</span><span style=color: #f73131>应</span>式<span style=color: #f73131>自</span>定义导航栏<span style=color: #f73131>组</span><span style=color: #f73131>件</span></a> </div> <div data-v-abd0b829="" class="col-start-9 col-end-10" style="float: left;"><span data-v-abd0b829="" class="onestyle">优质</span></div> <div data-v-abd0b829="" class="col-start-2 col-end-9 p-1 text-gray-500 text-xs font-normal dark:text-white"> <div data-v-abd0b829="" class="min-h-8 max-h-8 overflow-hidden ..."> 本款微信小程序组件提供灵活、美观且易于定制的导航栏解决方案，支持多种屏幕尺寸与样式需求，助力开发者高效构建优质应用。 由于小程序原生导航栏存在一些限制，例如无法设置字体大小、iOS系统标题居中而Android系统则左对齐显示、从非首页启动小程序返回首页的菜单不够明显以及屏幕空间使用效率不高等问题，微信提供了自定义导航栏的功能以帮助开发者最大化利用屏幕资源。然而，该功能是全局性的，并不能针对特定页面进行个性化设置，这在一定程度上增加了适配工作的复杂性。 我们开发了一个名为“weapp-navigation-bar”的组件来解决这些问题： - 自动根据手机状态栏的高度调整布局。 - 用户可以自定义字体颜色、大小和背景色等样式选项。此外，还支持隐藏标题以及固定导航栏的功能设置。 - 组件能够自动识别当前页面是否为首页启动页。 使用该组件时，请确保在`app.json`文件中配置以下属性： ```json { window: { navigationStyle: custom // 设置全局自定义导航样式 } } ``` 此外，此组件还具备如下功能： - 模拟非首页启动小程序的情况。 - 实现导航栏跟随页面滚动的效果。 - 根据上下滑动的像素值切换导航栏显示状态的功能。 - 为返回按钮和跳转至首页按钮设置事件监听器。 以上是使用该自定义组件的基本介绍，具体操作请参阅相关文档。 </div><!---->   </div> </li> <li data-v-abd0b829="" class="border-solid border-2 border-gray-300 dark:border-gray-600 grid auto-rows-min grid-cols-9 hover:bg-gray-100 hover:rounded-lg dark:hover:bg-gray-700 listyle" style="cursor: pointer;"> <div data-v-abd0b829="" class="col-start-1 pt-1 col-end-2 row-span-2 place-self-center imgsize"> <svg data-v-abd0b829="" t="1721980773527" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="26446" width="55" height="110"> <path data-v-abd0b829="" d="M834.6624 409.6a40.8576 40.8576 0 0 0-13.7728-30.63808l-254.32064-254.32064a40.87296 40.87296 0 0 0-31.1552-11.84768c-0.97792-0.07168-1.9456-0.1536-2.93376-0.1536H230.4a40.96 40.96 0 0 0-40.96 40.96v716.8a40.96 40.96 0 0 0 40.96 40.96h563.2a40.96 40.96 0 0 0 40.96-40.96V419.84c0-1.62304-0.11776-3.21536-0.3072-4.79232a40.6528 40.6528 0 0 0 0.4096-5.44768zM578.56 252.48256L694.71744 368.64H578.56V252.48256zM271.36 829.44V194.56h225.28v215.04a40.96 40.96 0 0 0 40.96 40.96h215.04v378.88H271.36z" p-id="26447" fill="#707070"></path> <path data-v-abd0b829="" d="M371.2 660.48h133.12a40.96 40.96 0 0 0 0-81.92h-133.12a40.96 40.96 0 0 0 0 81.92zM650.24 696.32H363.52a40.96 40.96 0 0 0 0 81.92h286.72a40.96 40.96 0 0 0 0-81.92z" p-id="26448" fill="#707070"></path> </svg> </div> <div data-v-abd0b829="" class="col-start-2 p-1 col-end-8 items-center sm:flex text-base font-normal pt-1 text-gray-900 dark:text-white min-h-13 max-h-13 overflow-hidden"> <a data-v-abd0b829="" class="min-h-12 max-h-12 overflow-hidden ..." title="<span style=color: #f73131>微</span><span style=color: #f73131>信</span><span style=color: #f73131>小</span><span style=color: #f73131>程</span><span style=color: #f73131>序</span>-媒体与<span style=color: #f73131>表</span><span style=color: #f73131>单</span><span style=color: #f73131>组</span><span style=color: #f73131>件</span>示例" href="https://d.itadn.com/i0_48424877562/B/724211" target="_blank"><span style=color: #f73131>微</span><span style=color: #f73131>信</span><span style=color: #f73131>小</span><span style=color: #f73131>程</span><span style=color: #f73131>序</span>-媒体与<span style=color: #f73131>表</span><span style=color: #f73131>单</span><span style=color: #f73131>组</span><span style=color: #f73131>件</span>示例</a> </div> <div data-v-abd0b829="" class="col-start-9 col-end-10" style="float: left;"><span data-v-abd0b829="" class="onestyle">优质</span></div> <div data-v-abd0b829="" class="col-start-2 col-end-9 p-1 text-gray-500 text-xs font-normal dark:text-white"> <div data-v-abd0b829="" class="min-h-8 max-h-8 overflow-hidden ..."> 本项目提供一系列微信小程序中常用的媒体和表单组件示例，包括图片、视频展示及各类输入框等，助力开发者快速搭建界面。 微信小程序-媒体及表单组件demo 用于制作小程序表单以及进行媒体资源交互。 </div><!---->   </div> </li> <li data-v-abd0b829="" class="border-solid border-2 border-gray-300 dark:border-gray-600 grid auto-rows-min grid-cols-9 hover:bg-gray-100 hover:rounded-lg dark:hover:bg-gray-700 listyle" style="cursor: pointer;"> <div data-v-abd0b829="" class="col-start-1 pt-1 col-end-2 row-span-2 place-self-center imgsize"> <svg data-v-abd0b829="" t="1721980773527" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="26446" width="55" height="110"> <path data-v-abd0b829="" d="M834.6624 409.6a40.8576 40.8576 0 0 0-13.7728-30.63808l-254.32064-254.32064a40.87296 40.87296 0 0 0-31.1552-11.84768c-0.97792-0.07168-1.9456-0.1536-2.93376-0.1536H230.4a40.96 40.96 0 0 0-40.96 40.96v716.8a40.96 40.96 0 0 0 40.96 40.96h563.2a40.96 40.96 0 0 0 40.96-40.96V419.84c0-1.62304-0.11776-3.21536-0.3072-4.79232a40.6528 40.6528 0 0 0 0.4096-5.44768zM578.56 252.48256L694.71744 368.64H578.56V252.48256zM271.36 829.44V194.56h225.28v215.04a40.96 40.96 0 0 0 40.96 40.96h215.04v378.88H271.36z" p-id="26447" fill="#707070"></path> <path data-v-abd0b829="" d="M371.2 660.48h133.12a40.96 40.96 0 0 0 0-81.92h-133.12a40.96 40.96 0 0 0 0 81.92zM650.24 696.32H363.52a40.96 40.96 0 0 0 0 81.92h286.72a40.96 40.96 0 0 0 0-81.92z" p-id="26448" fill="#707070"></path> </svg> </div> <div data-v-abd0b829="" class="col-start-2 p-1 col-end-8 items-center sm:flex text-base font-normal pt-1 text-gray-900 dark:text-white min-h-13 max-h-13 overflow-hidden"> <a data-v-abd0b829="" class="min-h-12 max-h-12 overflow-hidden ..." title="<span style=color: #f73131>表</span>格<span style=color: #f73131>组</span><span style=color: #f73131>件</span>来了！<span style=color: #f73131>微</span><span style=color: #f73131>信</span><span style=color: #f73131>小</span><span style=color: #f73131>程</span><span style=color: #f73131>序</span><span style=color: #f73131>自</span>定义<span style=color: #f73131>组</span><span style=color: #f73131>件</span><span style=color: #f73131>的</span>新成员" href="https://d.itadn.com/i0_90995106229/B/1091378" target="_blank"><span style=color: #f73131>表</span>格<span style=color: #f73131>组</span><span style=color: #f73131>件</span>来了！<span style=color: #f73131>微</span><span style=color: #f73131>信</span><span style=color: #f73131>小</span><span style=color: #f73131>程</span><span style=color: #f73131>序</span><span style=color: #f73131>自</span>定义<span style=color: #f73131>组</span><span style=color: #f73131>件</span><span style=color: #f73131>的</span>新成员</a> </div> <div data-v-abd0b829="" class="col-start-9 col-end-10" style="float: left;"><span data-v-abd0b829="" class="onestyle">优质</span></div> <div data-v-abd0b829="" class="col-start-2 col-end-9 p-1 text-gray-500 text-xs font-normal dark:text-white"> <div data-v-abd0b829="" class="min-h-8 max-h-8 overflow-hidden ..."> 微信小程序推出全新表格组件，作为自定义组件的一员，为开发者提供更多可能性，提升用户体验与开发效率。 针对上期打卡需求开发，这期需要以列表的形式展现打卡记录。由于微信小程序并没有表格组件（可能是因为官方考虑到在前端开发中，表格一直都是最复杂的组件之一），因此没有提供现成的解决方案。 面对这个问题，目前有两种解决方案：一种是使用table组件；另一种则是继续采用原生方式开发。根据老板的要求，在第二期需求中希望仍然使用原生方式进行开发以方便后期维护。于是开始着手自定义一个满足特定功能要求的表格组件： 1. 主要用于展示结构化数据； 2. 支持自定义操作； 3. 支持自定义表头样式； 4. 具备固定表头和左右滚动等功能。 这个table组件能够很好地解决当前的需求，提供了一个更加灵活且易于维护的方式来进行打卡记录的显示。 </div><!---->   </div> </li> <li data-v-abd0b829="" class="border-solid border-2 border-gray-300 dark:border-gray-600 grid auto-rows-min grid-cols-9 hover:bg-gray-100 hover:rounded-lg dark:hover:bg-gray-700 listyle" style="cursor: pointer;"> <div data-v-abd0b829="" class="col-start-1 pt-1 col-end-2 row-span-2 place-self-center imgsize"> <svg data-v-abd0b829="" t="1721980773527" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="26446" width="55" height="110"> <path data-v-abd0b829="" d="M834.6624 409.6a40.8576 40.8576 0 0 0-13.7728-30.63808l-254.32064-254.32064a40.87296 40.87296 0 0 0-31.1552-11.84768c-0.97792-0.07168-1.9456-0.1536-2.93376-0.1536H230.4a40.96 40.96 0 0 0-40.96 40.96v716.8a40.96 40.96 0 0 0 40.96 40.96h563.2a40.96 40.96 0 0 0 40.96-40.96V419.84c0-1.62304-0.11776-3.21536-0.3072-4.79232a40.6528 40.6528 0 0 0 0.4096-5.44768zM578.56 252.48256L694.71744 368.64H578.56V252.48256zM271.36 829.44V194.56h225.28v215.04a40.96 40.96 0 0 0 40.96 40.96h215.04v378.88H271.36z" p-id="26447" fill="#707070"></path> <path data-v-abd0b829="" d="M371.2 660.48h133.12a40.96 40.96 0 0 0 0-81.92h-133.12a40.96 40.96 0 0 0 0 81.92zM650.24 696.32H363.52a40.96 40.96 0 0 0 0 81.92h286.72a40.96 40.96 0 0 0 0-81.92z" p-id="26448" fill="#707070"></path> </svg> </div> <div data-v-abd0b829="" class="col-start-2 p-1 col-end-8 items-center sm:flex text-base font-normal pt-1 text-gray-900 dark:text-white min-h-13 max-h-13 overflow-hidden"> <a data-v-abd0b829="" class="min-h-12 max-h-12 overflow-hidden ..." title="<span style=color: #f73131>微</span><span style=color: #f73131>信</span><span style=color: #f73131>小</span><span style=color: #f73131>程</span><span style=color: #f73131>序</span><span style=color: #f73131>中</span><span style=color: #f73131>的</span>Charts<span style=color: #f73131>组</span><span style=color: #f73131>件</span>" href="https://d.itadn.com/i0_50027000313/B/708469" target="_blank"><span style=color: #f73131>微</span><span style=color: #f73131>信</span><span style=color: #f73131>小</span><span style=color: #f73131>程</span><span style=color: #f73131>序</span><span style=color: #f73131>中</span><span style=color: #f73131>的</span>Charts<span style=color: #f73131>组</span><span style=color: #f73131>件</span></a> </div> <div data-v-abd0b829="" class="col-start-9 col-end-10" style="float: left;"><span data-v-abd0b829="" class="onestyle">优质</span></div> <div data-v-abd0b829="" class="col-start-2 col-end-9 p-1 text-gray-500 text-xs font-normal dark:text-white"> <div data-v-abd0b829="" class="min-h-8 max-h-8 overflow-hidden ..."> 微信小程序中的Charts组件是一款功能强大的图表插件，支持多种类型的图表展示，方便开发者轻松实现数据可视化。 微信小程序的Charts组件是一个强大的工具，用于在小程序内创建各种图表。这个组件提供了丰富的配置选项，使得开发者能够轻松地展示数据，并且具有良好的性能表现。通过使用Charts组件，用户可以实现柱状图、折线图等多种类型的图表可视化效果。此外，它还支持自定义样式和动画设置等功能，为用户提供了一个灵活的解决方案来满足不同的业务需求。 </div><!---->   </div> </li> <li data-v-abd0b829="" class="border-solid border-2 border-gray-300 dark:border-gray-600 grid auto-rows-min grid-cols-9 hover:bg-gray-100 hover:rounded-lg dark:hover:bg-gray-700 listyle" style="cursor: pointer;"> <div data-v-abd0b829="" class="col-start-1 pt-1 col-end-2 row-span-2 place-self-center imgsize"> <svg data-v-abd0b829="" t="1721980773527" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="26446" width="55" height="110"> <path data-v-abd0b829="" d="M834.6624 409.6a40.8576 40.8576 0 0 0-13.7728-30.63808l-254.32064-254.32064a40.87296 40.87296 0 0 0-31.1552-11.84768c-0.97792-0.07168-1.9456-0.1536-2.93376-0.1536H230.4a40.96 40.96 0 0 0-40.96 40.96v716.8a40.96 40.96 0 0 0 40.96 40.96h563.2a40.96 40.96 0 0 0 40.96-40.96V419.84c0-1.62304-0.11776-3.21536-0.3072-4.79232a40.6528 40.6528 0 0 0 0.4096-5.44768zM578.56 252.48256L694.71744 368.64H578.56V252.48256zM271.36 829.44V194.56h225.28v215.04a40.96 40.96 0 0 0 40.96 40.96h215.04v378.88H271.36z" p-id="26447" fill="#707070"></path> <path data-v-abd0b829="" d="M371.2 660.48h133.12a40.96 40.96 0 0 0 0-81.92h-133.12a40.96 40.96 0 0 0 0 81.92zM650.24 696.32H363.52a40.96 40.96 0 0 0 0 81.92h286.72a40.96 40.96 0 0 0 0-81.92z" p-id="26448" fill="#707070"></path> </svg> </div> <div data-v-abd0b829="" class="col-start-2 p-1 col-end-8 items-center sm:flex text-base font-normal pt-1 text-gray-900 dark:text-white min-h-13 max-h-13 overflow-hidden"> <a data-v-abd0b829="" class="min-h-12 max-h-12 overflow-hidden ..." title="<span style=color: #f73131>微</span><span style=color: #f73131>信</span><span style=color: #f73131>小</span><span style=color: #f73131>程</span><span style=color: #f73131>序</span><span style=color: #f73131>中</span><span style=color: #f73131>的</span>ECharts<span style=color: #f73131>组</span><span style=color: #f73131>件</span>" href="https://d.itadn.com/i0_92393302493/B/741375" target="_blank"><span style=color: #f73131>微</span><span style=color: #f73131>信</span><span style=color: #f73131>小</span><span style=color: #f73131>程</span><span style=color: #f73131>序</span><span style=color: #f73131>中</span><span style=color: #f73131>的</span>ECharts<span style=color: #f73131>组</span><span style=color: #f73131>件</span></a> </div> <div data-v-abd0b829="" class="col-start-9 col-end-10" style="float: left;"><span data-v-abd0b829="" class="onestyle">优质</span></div> <div data-v-abd0b829="" class="col-start-2 col-end-9 p-1 text-gray-500 text-xs font-normal dark:text-white"> <div data-v-abd0b829="" class="min-h-8 max-h-8 overflow-hidden ..."> 微信小程序中的Echarts组件提供了一个强大的数据可视化解决方案，允许开发者在小程序中轻松创建图表和图形。 为了在小程序中使用Canvas并兼容ECharts，可以利用ECharts提供的专门针对小程序的组件。这样能够更便捷地应用ECharts功能。配置文件index.json应如下所示： { usingComponents: { ec-canvas: ../../ec-canvas/ec-canvas } } </div><!---->   </div> </li> </body> </html>