【微信小程序】小程序原生组件层级太高问题解决

相关阅读

相关 微信小程序（组件跳转、规范、层级准备）

【本节大纲】 1. 路由API跳转小结 2. hover样式 3. navigator导航组件跳转 4. 路由跳转规范 5. 页面层级准备 【前言】

朱雀/ 2023年06月17日 13:53/ 0 赞/ 66 阅读

相关 【微信小程序】小程序原生组件层级太高问题解决

这两天写小程序我写的是自定义顶部导航栏，再一次写原生组件textarea（多行输入框）的时候发现原生的层级太高，我在顶部导航设置多少‘z-index：999+’ 都不行研究了一

柔光的暖阳◎/ 2023年06月08日 06:11/ 0 赞/ 14 阅读

相关 原生微信小程序，搜索框（search）组件

原生微信小程序，搜索框（search）组件 ![在这里插入图片描述][20200831165523696.gif_pic_center] 首先创建组件及两个跳转页面，

淡淡的烟草味﹌/ 2022年12月02日 15:06/ 0 赞/ 360 阅读

相关 原生微信小程序，navigate（导航栏）组件

原生微信小程序，navigate（导航栏）组件 主要效果为 1 . 点击切换不同的导航栏，且点击目标高亮 2 . 不同的导航栏显示的内容不同 ![在这里插入图

曾经终败给现在/ 2022年12月02日 13:49/ 0 赞/ 587 阅读

相关 解决微信小程序视频组件层级过高的问题

> 本文首发于我的个人博客：[http://www.fogcrane.org][http_www.fogcrane.org] ![海豚图片][cover] 前言 在微

深藏阁楼爱情的钟/ 2022年06月01日 02:22/ 0 赞/ 336 阅读

相关 微信小程序<font color='red'>层级</font><font color='red'>太</font><font color='red'>高</font>，遮挡其他<font color='red'>组件</font>？</span> </a> </h2> </header> <div class="entry-summary ss"> <p>解决办法： <textarea hidden="true/false" />   转载于:https://www.cnblogs.com/softwarefang</p> </div> <div class="entry-meta fea-meta"> <a href="/"> <img src="https://image.dandelioncloud.cn/images/20210423/1619109311775.jpg" alt="梦里梦外;" class="avatar avatar-140 photo" height="25" width="25">梦里梦外;<span class="separator">/</span></a> <time datetime="2022年01月07日 00:27"> 2022年01月07日 00:27<span class="separator">/</span></time> <a class="meta-viewnums" href="/article/details/1479248247024865281" target="_blank"> <span>0</span> 赞<span class="separator">/</span> </a> <span class="meta-viewnums"><span>323</span> 阅读</span> </div> </div> </article> <article class="post-list blockimg picsrcd auto-list wow fadeInDown" id="list12" style="visibility: visible; animation-name: fadeInDown;"> <div class="entry-container" style="padding: 20px 0px 20px 16px;"> <header class="entry-header"> <h2 class="entry-title"> <a href="/article/details/1467551125741248514" target="_blank"> <span class="badge arc_v4">相关</span> <span><font color='red'>微</font><font color='red'>信</font><font color='red'>小</font><font color='red'>程序</font> - <font color='red'>组件</font></span> </a> </h2> </header> <div class="entry-summary ss"> <p>> 微信小程序为开发者提供了一系列基础组件，使开发者可以进行快速开发。同时还支持自定义组件，提升代码复用性，有助于代码维护。 一、基础组件 > 基础组件主要分为：视图容</p> </div> <div class="entry-meta fea-meta"> <a href="/"> <img src="https://image.dandelioncloud.cn/images/20210423/1619109311775.jpg" alt="深碍√TFBOYSˉ_" class="avatar avatar-140 photo" height="25" width="25">深碍√TFBOYSˉ_<span class="separator">/</span></a> <time datetime="2021年12月05日 17:47"> 2021年12月05日 17:47<span class="separator">/</span></time> <a class="meta-viewnums" href="/article/details/1467551125741248514" target="_blank"> <span>0</span> 赞<span class="separator">/</span> </a> <span class="meta-viewnums"><span>650</span> 阅读</span> </div> </div> </article> <article class="post-list blockimg picsrcd auto-list wow fadeInDown" id="list12" style="visibility: visible; animation-name: fadeInDown;"> <div class="entry-container" style="padding: 20px 0px 20px 16px;"> <header class="entry-header"> <h2 class="entry-title"> <a href="/article/details/1465484740164935682" target="_blank"> <span class="badge arc_v4">相关</span> <span><font color='red'>微</font><font color='red'>信</font><font color='red'>小</font><font color='red'>程序</font>-<font color='red'>组件</font></span> </a> </h2> </header> <div class="entry-summary ss"> <p>1.轮播图 <swiper indicator-dots="{ {indicatorDots}}" indicator-color="{ </p> </div> <div class="entry-meta fea-meta"> <a href="/"> <img src="https://image.dandelioncloud.cn/images/20210423/1619109311775.jpg" alt="客官°小女子只卖身不卖艺" class="avatar avatar-140 photo" height="25" width="25">客官°小女子只卖身不卖艺<span class="separator">/</span></a> <time datetime="2021年11月30日 00:56"> 2021年11月30日 00:56<span class="separator">/</span></time> <a class="meta-viewnums" href="/article/details/1465484740164935682" target="_blank"> <span>0</span> 赞<span class="separator">/</span> </a> <span class="meta-viewnums"><span>602</span> 阅读</span> </div> </div> </article> <article class="post-list blockimg picsrcd auto-list wow fadeInDown" id="list12" style="visibility: visible; animation-name: fadeInDown;"> <div class="entry-container" style="padding: 20px 0px 20px 16px;"> <header class="entry-header"> <h2 class="entry-title"> <a href="/article/details/1443516019997478914" target="_blank"> <span class="badge arc_v4">相关</span> <span><font color='red'>小</font><font color='red'>程序</font> video <font color='red'>层级</font>，<font color='red'>原生</font><font color='red'>组件</font></span> </a> </h2> </header> <div class="entry-summary ss"> <p> 原生组件的层级是最高的，所以页面中的其他组件无论设置 `z-index` 为多少，都无法盖在原生组件上。 后插入的原生组件可以覆盖之前的原生组件。</p> </div> <div class="entry-meta fea-meta"> <a href="/"> <img src="https://image.dandelioncloud.cn/images/20210508/1620403460842.jpeg" alt="àì夳堔傛蜴生んèń" class="avatar avatar-140 photo" height="25" width="25">àì夳堔傛蜴生んèń<span class="separator">/</span></a> <time datetime="2021年09月30日 10:00"> 2021年09月30日 10:00<span class="separator">/</span></time> <a class="meta-viewnums" href="/article/details/1443516019997478914" target="_blank"> <span>0</span> 赞<span class="separator">/</span> </a> <span class="meta-viewnums"><span>333</span> 阅读</span> </div> </div> </article> <article class="post-list blockimg picsrcd auto-list wow fadeInDown" id="list12" style="visibility: visible; animation-name: fadeInDown;"> <div class="entry-container" style="padding: 20px 0px 20px 16px;"> <header class="entry-header"> <h2 class="entry-title"> <a href="/article/details/1435543939427418114" target="_blank"> <span class="badge arc_v4">相关</span> <span><font color='red'>微</font><font color='red'>信</font><font color='red'>小</font><font color='red'>程序</font> <font color='red'>原生</font><font color='red'>组件</font>说明</span> </a> </h2> </header> <div class="entry-summary ss"> <p>[完整微信小程序(Java后端) 技术贴目录清单页面（必看）][Java_] 原生组件 小程序中的部分组件是由客户端创建的原生组件，这些组件有： [`camera`</p> </div> <div class="entry-meta fea-meta"> <a href="/"> <img src="https://image.dandelioncloud.cn/images/20210423/1619109311775.jpg" alt="迈不过友情╰" class="avatar avatar-140 photo" height="25" width="25">迈不过友情╰<span class="separator">/</span></a> <time datetime="2021年09月08日 10:02"> 2021年09月08日 10:02<span class="separator">/</span></time> <a class="meta-viewnums" href="/article/details/1435543939427418114" target="_blank"> <span>0</span> 赞<span class="separator">/</span> </a> <span class="meta-viewnums"><span>465</span> 阅读</span> </div> </div> </article> <article class="post-list blockimg picsrcd auto-list wow fadeInDown" id="comment-ad2" style="visibility: visible; animation-name: fadeInDown;min-width: 250px;"><script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-3823768843679261" crossorigin="anonymous"></script> <ins class="adsbygoogle" style="display:block; text-align:center;" data-ad-layout="in-article" data-ad-format="fluid" data-ad-client="ca-pub-3823768843679261" data-ad-slot="5318616141"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); // 如果广告未能正常加载 关闭广告位置 /*百度统计*/ var _hmt = _hmt || []; (function () { var hm = document.createElement("script"); hm.src = "https://hm.baidu.com/hm.js?5065474d5d20a569f7d052665ce481da"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(hm, s); })(); /*百度蜘蛛*/ (function () { var bp = document.createElement('script'); var curProtocol = window.location.protocol.split(':')[0]; if (curProtocol === 'https') { bp.src = 'https://zz.bdstatic.com/linksubmit/push.js'; } else { bp.src = 'http://push.zhanzhang.baidu.com/push.js'; } var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(bp, s); })(); // 获取页面中所有元素 var elements = document.getElementsByClassName('adsbygoogle'); // 遍历所有元素 for (var i = 0; i < elements.length; i++) { var adElement = elements[i]; // 在广告加载完成后执行其他代码 recursionAds(adElement); } function recursionAds(adElement) { // 获取广告标签元素 // 检查广告状态 if (adElement && !adElement.getAttribute('data-ad-status')){ // 递归调用 setTimeout(function () { recursionAds(adElement); },300) } else if (adElement && adElement.getAttribute('data-ad-status') === 'filled'){ // 获取广告父级元素 var parentElement = adElement.parentElement; // 隐藏广告父级元素 if (parentElement) { parentElement.style.display = 'block'; } } else if (adElement && adElement.getAttribute('data-ad-status') !== 'filled'){ // 获取广告父级元素 var parentElement = adElement.parentElement; // 隐藏广告父级元素 if (parentElement && parentElement.tagName !== "BODY") { parentElement.style.display = 'none'; } } } </script></article> </ul> </div> </div> <!--侧边栏--> <div id="menu-aside" class="side fr" style="position: relative; overflow: visible; box-sizing: border-box; min-height: 0px;"></div> </div> </div> </div> <footer class="footer bg-dark"></footer> <script src="/dist/js/html2canvas.min.js"></script> <script> var poster_open = 'on'; var txt1 = '长按识别二维码查看详情'; var txt2 = '蒲公英云'; var comiis_poster_start_wlat = 0; var comiis_rlmenu = 1; var comiis_nvscroll = 0; var comiis_poster_time_baxt; $(document).ready(function () { $(document).on('click', '.comiis_poster_a', function (e) { show_comiis_poster_ykzn(); }); }); function comiis_poster_rrwz() { setTimeout(function () { html2canvas(document.querySelector(".comiis_poster_box_img"), {scale: 2, useCORS: true}).then(canvas => { var img = canvas.toDataURL("image/jpeg", .9); document.getElementById('comiis_poster_images').src = img; $('.comiis_poster_load').hide(); $('.comiis_poster_imgshow').show(); }); }, 100); } function show_comiis_poster_ykzn() { if (comiis_poster_start_wlat == 0) { comiis_poster_start_wlat = 1; popup.open('<img src="/dist/img/imageloading.gif" class="comiis_loading">'); var url = window.location.href.split('#')[0]; url = encodeURIComponent(url); var html = '<div id="comiis_poster_box" class="comiis_poster_nchxd">\n' + '<div class="comiis_poster_box">\n' + '<div class="comiis_poster_okimg">\n' + '<div style="padding:150px 0;" class="comiis_poster_load">\n' + '<div class="loading_color">\n' + ' <span class="loading_color1"></span>\n' + ' <span class="loading_color2"></span>\n' + ' <span class="loading_color3"></span>\n' + ' <span class="loading_color4"></span>\n' + ' <span class="loading_color5"></span>\n' + ' <span class="loading_color6"></span>\n' + ' <span class="loading_color7"></span>\n' + '</div>\n' + '<div class="comiis_poster_oktit">正在生成海报, 请稍候</div>\n' + '</div>\n' + '<div class="comiis_poster_imgshow" style="display:none">\n' + '<img src="" class="vm" id="comiis_poster_images">\n' + '<div class="comiis_poster_oktit">↑长按上图保存图片分享</div>\n' + '</div>\n' + '</div>\n' + '<div class="comiis_poster_okclose"><a href="javascript:;" class="comiis_poster_closekey"><img src="/dist/img/poster_okclose.png" class="vm"></a></div>\n' + '</div>\n' + '<div class="comiis_poster_box_img">\n' + '<div class="comiis_poster_img"><div class="img_time">08<span >2023/06</span></div><img src="https://image.dandelioncloud.cn/images/20230531/0905a28f74f9478bbcf6aeb38fd0c5cd.png" class="vm" id="comiis_poster_image"></div>\n' + '<div class="comiis_poster_tita" >【微信小程序】小程序原生组件层级太高问题解决</div>\n' + '<div class="comiis_poster_txta">这两天写小程序我写的是自定义顶部导航栏，再一次写原生组件textarea（多行输入框）的时候发现原生的层级太高，我在顶部导航设置多少‘z-index：999+’ 都不行研究了一</div><div class="comiis_poster_x guig"></div>\n' + '<div class="comiis_poster_foot">\n' + '<img src="https://image.dandelioncloud.cn/pgy_files/imagesQr/2025/01/16/cb0fe68f3d774c668fcbe3c2959a4ff8.png" class="kmewm fqpl vm">\n' + '<img src="/dist/img/poster_zw.png" class="kmzw vm"><span class="kmzwtip">' + txt1 + '<br>' + txt2 + '</span>\n' + '</div>\n' + '</div>\n' + '</div>'; if (html.indexOf("comiis_poster") >= 0) { comiis_poster_time_baxt = setTimeout(function () { comiis_poster_rrwz(); }, 5000); $('body').append(html); $('#comiis_poster_image').on('load', function () { clearTimeout(comiis_poster_time_baxt); comiis_poster_rrwz(); }); popup.close(); setTimeout(function () { $('.comiis_poster_box').addClass("comiis_poster_box_show"); $('.comiis_poster_closekey').off().on('click', function (e) { $('.comiis_poster_box').removeClass("comiis_poster_box_show").on('webkitTransitionEnd transitionend', function () { $('#comiis_poster_box').remove(); comiis_poster_start_wlat = 0; }); return false; }); }, 60); } } } var new_comiis_user_share, is_comiis_user_share = 0; var as = navigator.appVersion.toLowerCase(), isqws = 0; if (as.match(/MicroMessenger/i) == "micromessenger" || as.match(/qq\//i) == "qq/") { isqws = 1; } if (isqws == 1) { if (typeof comiis_user_share === 'function') { new_comiis_user_share = comiis_user_share; is_comiis_user_share = 1; } var comiis_user_share = function () { if (is_comiis_user_share == 1) { isusershare = 0; new_comiis_user_share(); if (isusershare == 1) { return false; } } isusershare = 1; show_comiis_poster_ykzn(); return false; } } </script> <script src="/dist/js/details.js"></script> <script type="text/javascript"> // 点赞 暂时使用layui组件做点赞操作（css,jquery懒得自己封装了太浪费时间) layui.use(['form', 'layer', 'jquery', 'laypage'], function () { // 删除操作 $("body").on("click", ".news_del", function () { //收藏. var msg = ''; var status; layer.msg("删除文章中！"); $.get('/delPosts/' + 1666689279390363649, function (data) { msg = data.msg; status = data.status; if (status == 200) { layer.msg(msg); window.location.href = '/' } else { layer.msg(msg); setTimeout(function () { layer.closeAll("iframe"); //刷新父页面 parent.location.reload(); }, 2000); return false; } } ); }) }); </script> </body> </html>