CRM
1、单页tab页切换注意事项
单页 tab 页切换：
拿到设计稿，本着能以 CSS 实现的效果不使用 JS 想法，我用了 radio 控制页面切换（实现子页切换、选择tab、为空提示）——OK。
考虑到页面交互体验（假设 A、B 子页）：A 滚动时，B 位置不受影响，做出修改：
方式1：
子页的父容器设置 height:100%，在这个条件下，滚动容器已经不是窗口自带的滚动了，表现为：
$(window).scroll(function() {
var scrollTop = $(document).scrollTop();
console.log(scrollTop);
});
页面滚动时，上述代码不打印。
如果是 ul.lst 实现的滚动，A、B 页滚动分别是各自 UL 容器, 注意有滚动条的容器要设置（overflow:auto，需要获取滚动距离[$(ele).offset().top]的还要设 position: relative)。
如果点击节点要跳转其他页面，再返回时，保持页面位置不变的话，可以在点击时获取滚动距离，通过 sessionStorage 记录位置，然后返回时获取并设置该滚动距离值。
缺点：
一式两份的感觉，啥代码都重复写，要有多个 tab 切换就脑壳疼了。
方式2：
利用 window 窗口滚动，点击 B 时，记录 A 的滚动距离[$(document).scrollTop()]，设置 B 的缓存距离；点击 A 时，记录 B 的滚动距离， 设置 A 的缓存距离。
<!DOCTYPE html> <html lang="zh-cmn-Hans"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1"/> <title>相关订单</title> <link rel="stylesheet" href="nestLayout.css"/> <link rel="stylesheet" href="relevantOrder.css"/> </head> <body> <main> <input id="tabBtn1" class="tabBtn1" type="radio" name="tab"/> <input id="tabBtn2" class="tabBtn2" type="radio" name="tab"/> <input id="cancelRadio" class="cancelRadio" type="checkbox" /> <section class="secHead"> <label for="tabBtn1" id="offerBtn" class="offerBtn tabBtn tabBtnChecked">报价单</label> <label for="tabBtn2" id="orderBtn" class="orderBtn tabBtn">销售订单</label> </section> <section class="secBody"> <!--ul不能有换行、空格，因为为空提示基于列表内容是否为空--> <ul id="offerLst" class="offerLst lst lstShow"></ul> <ul id="orderLst" class="orderLst lst"></ul> <!-- 为空提示 --> <div class="empty"> <img src="CRM/empty.png" alt="pic"/> <span class="emptyTxt">暂无记录</span> </div> <!--删除提示--> <div class="mask"></div> <div class="maskContent"> <h3 class="tip">提示</h3> <p class="txt">您确定要把此项目删除吗？删除后不可恢复</p> <button class="cancelOffer maskBtn">取消</button> <button id="sureBtn" class="sureBtn maskBtn">确认</button> </div> </section> </main> <script src="jquery-3.1.0.min.js"></script> <script src="relevantOrder.js"></script> </body> </html> <!-- -->
* { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; padding: 0; margin: 0; -webkit-tap-highlight-color: rgba(0,0,0,0) ; } div, section, ul {font-size: 0} html {font-size: 13.333333333333333333333333333333vw;} @media screen and (max-width: 320px) { html {font-size: 50px} } @media screen and (min-width: 540px) { html {font-size: 72px} } html, body { position: relative; min-width: 320px; max-width: 540px; margin: 0 auto; font-family: PingFangSC-Regular,Helvetica,"Droid Sans",Arial,sans-serif; } a {text-decoration: none; color: inherit;} ul {list-style: none} img { width: 100%;height: 100%; object-fit: cover; } img[src=""], img:not([src]) {opacity: 0} input {outline: none} input[type='checkbox'] {display: none} input::-webkit-search-cancel-button {display: none} button {border: none;outline: rgba(0,0,0,0)} .txtOver { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .radius6 { -moz-border-radius: .06rem; -webkit-border-radius: .06rem; border-radius: .06rem; } .radius10 { -moz-border-radius: .1rem; -webkit-border-radius: .1rem; border-radius: .1rem; } .flexStart { display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; } .flexBetween { display: -webkit-flex; display: flex; -webkit-justify-content: space-between; justify-content: space-between; -webkit-align-items: center; align-items: center; } .mask { position: fixed; top: 0;left: 0; z-index: 6; width: 100%; height: 100%; opacity: 0; visibility: hidden; background-color: rgba(0,0,0,.2); } .tipMask { position: fixed; display: none; left: 50%; bottom: 1.3rem; height: .57rem; line-height: .57rem; padding: 0 .26rem; font-size: .28rem; color: #fff; -moz-transform: translateX(-50%); -webkit-transform: translateX(-50%); transform: translateX(-50%); background-color: rgba(51,51,51,.7); } .footer { position: fixed; bottom: 0; left: 50%; width: 100%; min-width: 320px; max-width: 540px; height: .98rem; padding: 0 .3rem; font-size: 0; background-color: #fff; -moz-transform: translateX(-50%); -webkit-transform: translateX(-50%); transform: translateX(-50%); } .footBtn { height: .78rem; line-height: .78rem; font-size: .3rem; text-align: center; -moz-border-radius: .39rem; -webkit-border-radius: .39rem; border-radius: .39rem; } .empty { display: none; width: 4rem; margin: 3.2rem auto .6rem; text-align: center; } .emptyTxt { display: block; font-size: .26rem; color: #7F7F7F; }
body { background-color: #f5f5f5; } html, body { position: relative; } main { padding: .92rem 0 0 0; } input[type='radio'] {display: none;} .secHead { position: fixed; top: 0; left: 50%; z-index: 2; width: 100%; min-width: 320px; max-width: 540px; height: .62rem; line-height: .62rem; background-color: #fff; -moz-transform: translateX(-50%); -webkit-transform: translateX(-50%); transform: translateX(-50%); } .tabBtn { position: relative; display: inline-block; width: 50%; height: 100%; font-size: .26rem; text-align: center; color: #333; } .tabBtn::after { position: absolute; left: 50%; bottom: 0; content: ''; width: 0; border-bottom: 2px solid rgba(0,0,0,0); -moz-transform: translateX(-50%); -webkit-transform: translateX(-50%); transform: translateX(-50%); -moz-transition: all .2s; -webkit-transition: all .2s; transition: all .2s; } /*css 切换效果（radio)*/ /*.tabBtn1:checked ~ .secHead .offerBtn,*/ /*.tabBtn2:checked ~ .secHead .orderBtn {*/ /* font-weight: 800;*/ /* color: #0BA84E;*/ /* pointer-events: none;*/ /*}*/ /*.tabBtn1:checked ~ .secHead .offerBtn::after,*/ /*.tabBtn2:checked ~ .secHead .orderBtn::after {*/ /* width: 18%;*/ /* border-color: #0BA84E;*/ /*}*/ /*.tabBtn1:checked ~ .secBody .offerLst,*/ /*.tabBtn2:checked ~ .secBody .orderLst,*/ /*.tabBtn1:checked ~ .secBody .offerLst:empty ~ .empty,*/ /*.tabBtn2:checked ~ .secBody .orderLst:empty ~ .empty {*/ /* display: block;*/ /*}*/ /*js控制类实现切换效果*/ .tabBtnChecked { font-weight: 800; color: #0BA84E; pointer-events: none; } .tabBtnChecked::after { width: 18%; border-color: #0BA84E; } ul.lstShow, .lstShow:empty ~ .empty{ display: block; } /* 报价单 */ .offerLst, .orderLst { display: none; padding: 0 .3rem; } .offerItem, .orderItem { padding: .3rem .2rem 0; margin-bottom: .3rem; background-color: #fff; } .offerItem { position: relative; display: grid; grid-template-columns: 1.6rem 4.7rem; grid-gap: .27rem .2rem } .offerItem::before { position: absolute; top: .33rem; right: .2rem; content: ''; width: .1rem; height: .1rem; color: #7F7F7F; border-top: 1px solid; border-right: 1px solid; transform: rotate(45deg); } .offerItem:active { -moz-box-shadow: 2px 2px 14px -8px #7f7f7f; -webkit-box-shadow: 2px 2px 14px -8px #7f7f7f; box-shadow: 2px 2px 14px -8px #7f7f7f; } .offerTime, .offerBtnBox { grid-column-start: span 2;} .infoBox { display: grid; grid-row-gap: .27rem; grid-gap: .3rem .2rem; } .offerTime { grid-column-start: span 2; font-size: .26rem; line-height: 1; color: #7F7F7F; } .goodImg { width: 1.6rem; height: 1.6rem; } .goodInfo { font-size: .26rem; font-weight: 800; color: #333; } .storeName { display: -webkit-box; overflow: hidden; height: .8rem; margin-top: -.06rem; line-height: 1.5; -webkit-box-orient: vertical; -webkit-line-clamp: 2; text-overflow: ellipsis; } .customerName{padding: .1rem 0 .06rem;} .goodPrice {color: #FF4B4B} .goodPrice::before {content: '￥';} .offerBtnBox { -webkit-justify-content: flex-end; justify-content: flex-end; padding: .2rem 0; margin-top: .13rem; border-top: 1px solid #f5f5f5; } .btnItem { height: .5rem; padding: 0 .42rem; margin-left: .3rem; line-height: .5rem; font-size: .28rem; -moz-border-radius: .25rem; -webkit-border-radius: .25rem; border-radius: .25rem; } .cancelBtn { color: #333; border: 1px solid; } .editBtn { color: #fff; background-color: #576B95; } .turnBtn { color: #fff; background-color: #0BA84E; } /*取消提示*/ .mask { position: fixed; top: 0;left: 0; z-index: 6; width: 100%; height: 100%; opacity: 0; visibility: hidden; background-color: rgba(0,0,0,.2); } .maskContent { position: fixed; overflow: hidden; top: 48%; left: 50%; z-index: 9; width: 85.5%; max-width: 460px; text-align: center; opacity: 0; visibility: hidden; background-color: #fff; -moz-border-radius: .24rem; -webkit-border-radius: .24rem; border-radius: .24rem; -moz-transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } .tip { padding: .3rem 0 .4rem; font-size: .3rem; font-weight: 800; color: #333; } .txt { padding: 0 0 .26rem 0; font-size: .26rem; color: #333; } .maskBtn { width: 50%; font-size: .26rem; height: 1.1rem; font-weight: 800; background-color: #fff } .cancelOffer {color: #0BA84E} .tipMask { position: fixed; display: none; left: 50%; bottom: 1.3rem; height: .57rem; line-height: .57rem; padding: 0 .26rem; font-size: .28rem; color: #fff; -moz-transform: translateX(-50%); -webkit-transform: translateX(-50%); transform: translateX(-50%); background-color: rgba(51,51,51,.7); } /*打开遮罩层*/ .cancelRadio:checked ~ .secBody .mask{ opacity: 1; visibility: visible; -moz-transition: all .4s; -webkit-transition: all .4s; transition: all .4s; } .cancelRadio:checked ~ .secBody .maskContent { opacity: 1; visibility: visible; -moz-transition: all .2s; -webkit-transition: all .2s; transition: all .2s; } /*销售订单*/ .stateGroup { grid-column-start: span 2; } .stateTip { display: block; padding-bottom: .1rem; font-size: .24rem; color: #7F7F7F; -moz-transform-origin: 0 100%; -webkit-transform-origin: 0 100%; transform-origin: 0 100%; -moz-transform: scale(.9); -webkit-transform: scale(.9); transform: scale(.9); } .stateTxt { width: 1.86rem; height: .52rem; line-height: .54rem; font-size: .26rem; text-align: center; color: #0BA84E; background-color: #C3F0D6; } .stateBill { color: #FF6E2D; background-color: #FFDECF; } .stateSend { color: #FF4B4B; background-color: #FFECEC; } .amount-time { display: grid; grid-template-columns: 50% 50%; grid-row-gap: .19rem; grid-column-start: span 2; padding-bottom: .36rem; margin-top: -.06rem; } .amount, .time { font-size: .26rem; color: #333; } .time { justify-self: end; }
var tabIndex = 0; var isLoadOrder = true; var docScrollTop = 0; var offerScrollTop = 0; var orderScrollTop = 0; $(function () { // 默认显示报价单 offerLst.init(); tabIndex = sessionStorage.getItem("tabIndex"); if (tabIndex == 1) { offerLst.defaultShow(tabIndex); isLoadOrder ? orderLst.getOrderLst() : ''; } else { offerLst.defaultShow(tabIndex); } $(window).scroll(function () { docScrollTop = $(document).scrollTop(); }); // 切换时缓存滚动距离及 tab 下标 $(".tabBtn").click(function () { tabIndex = $(this).index(); offerLst.defaultShow(tabIndex); sessionStorage.setItem("tabIndex", tabIndex); if (tabIndex == 1) { sessionStorage.setItem("offerScrollTop", docScrollTop); orderScrollTop = sessionStorage.getItem("orderScrollTop"); $(document).scrollTop(orderScrollTop); if (isLoadOrder) { orderLst.getOrderLst(); $(document).scrollTop(0); isLoadOrder = false; } } else { sessionStorage.setItem("orderScrollTop", docScrollTop); offerScrollTop = sessionStorage.getItem("offerScrollTop"); $(document).scrollTop(offerScrollTop); } }); }); // 报价单 var offerLst = { getOfferLst: function () { var html = ""; $(offerJson).each(function (index, item) { html += ' <li class="offerItem radius10" onclick="offerLst.goOfferDetail(' + item.id + ')"> ' + ' <p class="offerTime">报价时间：' + item.time + '</p> ' + ' <div class="goodImg"> ' + ' <img class="radius10" src="' + item.goods_conver + '" alt="pic" /> ' + ' </div> ' + ' <div class="goodInfo"> ' + ' <p class="storeName">店铺：' + item.store_name + '</p> ' + ' <p class="customerName txtOver">客户：' + item.user_name + '</p> ' + ' <p class="flexBetween"> ' + ' <span class="goodNum">合计：' + item.goods_num + '件商品</span> ' + ' <span class="goodPrice">' + item.final_price + '</span> ' + ' </p> ' + ' </div> ' + ' <div class="offerBtnBox flexStart"> ' + ' <label for="cancelRadio" onclick="offerLst.deleteOffer(' + item.id + ')" class="cancelBtn btnItem">取消</label> ' + ' <label onclick="offerLst.editOffer(' + item.id + ')" class="editBtn btnItem">编辑</label> ' + ' <label onclick="offerLst.turnOffer(' + item.id + ')" class="turnBtn btnItem">转订单</label> ' + ' </div> ' + ' </li> '; }); $("#offerLst").html(html); }, // 默认 tab 页 defaultShow: function (tabIndex) { $(".tabBtn").eq(tabIndex).addClass("tabBtnChecked").siblings().removeClass("tabBtnChecked"); $(".lst").eq(tabIndex).addClass("lstShow").siblings().removeClass("lstShow"); }, // 详情 goOfferDetail: function (id) { location.href = "giftLst.aspx"; //goUrl("giftLst.aspx"); }, // 删除 deleteOffer: function (id) { event.stopPropagation(); $("#sureBtn").click(function () { $("#offerItem" + id).remove(); }); }, // 编辑 editOffer: function (id) { event.stopPropagation(); // 假设安卓调用方法goEdit()、苹果对象par if (browser.versions.android && !browser.versions.weixin) { window.android.goEdit(); } else if (browser.versions.ios && !browser.versions.weixin) { var par = { id: 1 }; window.webkit.messageHandlers.jsCallOc.postMessage(par); } }, // 转订单 turnOffer: function (id) { event.stopPropagation(); // 假设安卓调用方法goEdit()、苹果对象par if (browser.versions.android && !browser.versions.weixin) { window.android.goTurn(); } else if (browser.versions.ios && !browser.versions.weixin) { var par = { id: 1 }; window.webkit.messageHandlers.jsCallOc.postMessage(par); } }, // 关闭弹框 closeMask: function () { $(".mask, .maskBtn").click(function () { $("#cancelRadio").prop("checked", false); }); }, init: function () { offerLst.getOfferLst(); offerLst.closeMask(); } } // 销售订单 var orderLst = { getOrderLst: function () { var html = ""; $(offerJson2).each(function (index, item) { html += ' <li class="offerItem radius10" onclick="location.href=\'orderLst.goDetail(' + item.id + ')\'"> ' + ' <p class="offerTime">订单号：' + item.order_no + '</p> ' + ' <div class="goodImg"> ' + ' <img class="radius10" src="' + item.goods_conver + '" alt="pic" /> ' + ' </div> ' + ' <div class="goodInfo"> ' + ' <p class="storeName">店铺：' + item.store_name + '</p> ' + ' <p class="customerName txtOver">客户：' + item.user_name + '</p> ' + ' <p class="flexBetween"> ' + ' <span class="goodNum">合计：' + item.goods_num + '件商品</span> ' + ' <span class="goodPrice">' + item.final_price + '</span> ' + ' </p> ' + ' </div> ' + ' <ul class="stateGroup flexBetween"> ' + ' <li class="stateOption"> ' + ' <span class="stateTip">订单状态</span> ' + ' <p class="stateTxt radius10">' + (item.orderState ? "已审核" : "待评价") + '</p> ' + ' </li> ' + ' <li class="stateOption"> ' + ' <span class="stateTip">订单状态</span> ' + ' <p class="stateTxt radius10 ' + (item.billState ? "nothing" : "stateBill") + '">' + (item.orderState ? "已收款" : "部分收款") + '</p> ' + ' </li> ' + ' <li class="stateOption"> ' + ' <span class="stateTip">订单状态</span> ' + ' <p class="stateTxt radius10 ' + (item.orderState ? "nothing" : "stateSend") + '">' + (item.orderState ? "已发货" : "待发货") + '</p> ' + ' </li> ' + ' </ul> ' + ' <p class="amount-time"> ' + ' <span class="amount">成交金额：' + item.final_price + '</span> ' + ' <span class="time">下单时间：' + item.buy_time + '</span> ' + ' <span class="amount">已收金额：' + item.received_price + '</span> ' + ' <span class="time">订单交期：' + item.lead_time + '</span> ' + ' </p> ' + ' </li> '; }); $("#orderLst").html(html); }, goDetail: function (id) { location.href = "giftLst.aspx"; } } var offerJson = [ { id: 1, time: "2021-09-27 10:36", store_name: "广东省家具有限公司AAAA", user_name: "张三", order_no: "210922099617168428925", goods_conver: "https://img1.baidu.com/it/u=2632813806,82963294&fm=26&fmt=auto", goods_name: "韩国文具可爱创意多功能桌面收纳木质纸盒时尚拼装组合笔筒", goods_num: 9, final_price: "12340", received_price: 6000, lead_time: "2021-03-29", buy_time: "2021-03-29", orderState: 1, billState: 1, sendState: 1 }, { id: 2, time: "2021-09-27 10:36", store_name: "广东省家具有限公司BBBBB", user_name: "张三", order_no: "210922099617168428925", goods_conver: "https://img1.baidu.com/it/u=2632813806,82963294&fm=26&fmt=auto", goods_name: "韩国文具可爱创意多功能桌面收纳木质纸盒时尚拼装组合笔筒", goods_num: 9, final_price: "12340", received_price: 6000, lead_time: "2021-03-29", buy_time: "2021-03-29", orderState: 0, billState: 0, sendState: 0 }, { id: 3, time: "2021-09-27 10:36", store_name: "广东省家具有限公司CCCCC", user_name: "张三", order_no: "210922099617168428925", goods_conver: "https://img1.baidu.com/it/u=2632813806,82963294&fm=26&fmt=auto", goods_name: "韩国文具可爱创意多功能桌面收纳木质纸盒时尚拼装组合笔筒", goods_num: 9, final_price: "12340", received_price: 6000, lead_time: "2021-03-29", buy_time: "2021-03-29", orderState: 1, billState: 0, sendState: 1 }, { id: 2, time: "2021-09-27 10:36", store_name: "广东省家具有限公司DDDDD", user_name: "张三", order_no: "210922099617168428925", goods_conver: "https://img1.baidu.com/it/u=2632813806,82963294&fm=26&fmt=auto", goods_name: "韩国文具可爱创意多功能桌面收纳木质纸盒时尚拼装组合笔筒", goods_num: 9, final_price: "12340", received_price: 6000, lead_time: "2021-03-29", buy_time: "2021-03-29", orderState: 0, billState: 0, sendState: 0 } ] var offerJson2 = [ { id: 1, time: "2021-09-27 10:36", store_name: "广东省家具有限公司AAAA", user_name: "张三", order_no: "210922099617168428925", goods_conver: "https://img1.baidu.com/it/u=2632813806,82963294&fm=26&fmt=auto", goods_name: "韩国文具可爱创意多功能桌面收纳木质纸盒时尚拼装组合笔筒", goods_num: 9, final_price: "12340", received_price: 6000, lead_time: "2021-03-29", buy_time: "2021-03-29", orderState: 1, billState: 1, sendState: 1 }, { id: 2, time: "2021-09-27 10:36", store_name: "广东省家具有限公司BBBBB", user_name: "张三", order_no: "210922099617168428925", goods_conver: "https://img1.baidu.com/it/u=2632813806,82963294&fm=26&fmt=auto", goods_name: "韩国文具可爱创意多功能桌面收纳木质纸盒时尚拼装组合笔筒", goods_num: 9, final_price: "12340", received_price: 6000, lead_time: "2021-03-29", buy_time: "2021-03-29", orderState: 0, billState: 0, sendState: 0 }, { id: 3, time: "2021-09-27 10:36", store_name: "广东省家具有限公司CCCCC", user_name: "张三", order_no: "210922099617168428925", goods_conver: "https://img1.baidu.com/it/u=2632813806,82963294&fm=26&fmt=auto", goods_name: "韩国文具可爱创意多功能桌面收纳木质纸盒时尚拼装组合笔筒", goods_num: 9, final_price: "12340", received_price: 6000, lead_time: "2021-03-29", buy_time: "2021-03-29", orderState: 1, billState: 0, sendState: 1 }, { id: 3, time: "2021-09-27 10:36", store_name: "广东省家具有限公司DDDDD", user_name: "张三", order_no: "210922099617168428925", goods_conver: "https://img1.baidu.com/it/u=2632813806,82963294&fm=26&fmt=auto", goods_name: "韩国文具可爱创意多功能桌面收纳木质纸盒时尚拼装组合笔筒", goods_num: 9, final_price: "12340", received_price: 6000, lead_time: "2021-03-29", buy_time: "2021-03-29", orderState: 1, billState: 0, sendState: 1 }, { id: 3, time: "2021-09-27 10:36", store_name: "广东省家具有限公司EEEEE", user_name: "张三", order_no: "210922099617168428925", goods_conver: "https://img1.baidu.com/it/u=2632813806,82963294&fm=26&fmt=auto", goods_name: "韩国文具可爱创意多功能桌面收纳木质纸盒时尚拼装组合笔筒", goods_num: 9, final_price: "12340", received_price: 6000, lead_time: "2021-03-29", buy_time: "2021-03-29", orderState: 1, billState: 0, sendState: 1 }, { id: 3, time: "2021-09-27 10:36", store_name: "广东省家具有限公司GGGGG", user_name: "张三", order_no: "210922099617168428925", goods_conver: "https://img1.baidu.com/it/u=2632813806,82963294&fm=26&fmt=auto", goods_name: "韩国文具可爱创意多功能桌面收纳木质纸盒时尚拼装组合笔筒", goods_num: 9, final_price: "12340", received_price: 6000, lead_time: "2021-03-29", buy_time: "2021-03-29", orderState: 1, billState: 0, sendState: 1 }, { id: 3, time: "2021-09-27 10:36", store_name: "广东省家具有限公司HHHHH", user_name: "张三", order_no: "210922099617168428925", goods_conver: "https://img1.baidu.com/it/u=2632813806,82963294&fm=26&fmt=auto", goods_name: "韩国文具可爱创意多功能桌面收纳木质纸盒时尚拼装组合笔筒", goods_num: 9, final_price: "12340", received_price: 6000, lead_time: "2021-03-29", buy_time: "2021-03-29", orderState: 1, billState: 0, sendState: 1 } ]
2、使用 jq 创建，不要设置元素 id 名为 “nodeName”
3、单页切换刷新或跳转返回后不回到默认页。
4、文本内容多行时设置 word-break: all;
5、
如图，红色字体标注和黄色横线标注是两种实现 CSS 展开关闭（radio）效果的方法。
对于红色的方法，是当图标大于指定数目再添加相应类 showMoreIcon 控制按钮展开图标容器高度。在 Android 环境下，浏览器或 APP 上正常操作。
而 iOS APP 环境下，foldBtn:checked ~ .showMoreIcon { max-height: 2.7rem } 没有效果了。我想原因是不是渲染顺序的问题，目前我所了解的是 js 加载完后才渲染 css ，这样这个写法没有问题的，这个写法在 Android APP 或 浏览器及 iOS 非APP环境下是可以的，而 OS APP 失败的原因是否是 css 同 HTML先渲染了，导致后面 js 动态添加类后 css 没有再次渲染导致的。
此外，点击详情再返回该页面就正常展开关闭了，
再后来……
换了黄色横线标注方法后，iOS APP 是正常了，安卓 APP 却出现 iOS 的情况，一顿操作后刷新或清缓存什么的，一切正常，我想苹果出现的问题是不是因为文件没有及时更新导致的。
如图，红色字体标注和黄色横线标注是两种实现 CSS 展开关闭（radio）效果的方法。
对于红色的方法，是当图标大于指定数目再添加相应类 showMoreIcon 控制按钮展开图标容器高度。在 Android 环境下，浏览器或 APP 上正常操作。
而 iOS APP 环境下，foldBtn:checked ~ .showMoreIcon { max-height: 2.7rem } 没有效果了。我想原因是不是渲染顺序的问题，目前我所了解的是 js 加载完后才渲染 css ，这样这个写法没有问题的，这个写法在 Android APP 或 浏览器及 iOS 非APP环境下是可以的，而 iOS APP 失败的原因是否是 css 同 HTML先渲染了，导致后面 js 动态添加类后 css 没有再次渲染导致的。
此外，点击详情再返回该页面就正常展开关闭了，
再后来……
换了黄色横线标注方法后，iOS APP 是正常了，安卓 APP 却出现 iOS 的情况，一顿操作后刷新或清缓存什么的，一切正常，我想苹果出现的问题是不是因为文件没有及时更新导致的。
