MUI tab-bar 頂部選項卡-可左右滑動
阿新 • • 發佈:2018-12-22
<div class="mui-content"> <div style="background: white;" class="mui-slider"> <div style="background: white" class=" mui-slider-indicator mui-segmented-control mui-segmented-control-inverted"> <a style="margin-top: 10px; font-size: 20px; font-weight: 800; " class="mui-control-item" href="#item1mobile"> 資料 </a> <a style="margin-top: 10px; font-size: 20px; font-weight: 800; " class="mui-control-item" href="#item2mobile"> 動態 </a> </div> <div class="mui-slider-progress-bar mui-col-xs-6"></div> <div style="margin-bottom: 10%;" class="mui-slider-group"> <div id="item1mobile" style="background: white;" class="mui-slider-item mui-control-content mui-active"> <div style="margin-top: 10px;" id=""> <span style="font-size: 13px; font-weight: 900;" id=""> 賬號資訊 </span> <div style="font-size: 18px;font-weight: 800; margin-top: 10px;" class=""> <span id=""> 友及號: <span id=""> 154545 </span> </span> <span id=""> </span> </div> <div style="border-bottom: 1px solid #DDDDDD ;font-size: 18px;font-weight: 800; margin-top: 10px;padding-bottom: 10px;" class=""> <span id=""> 註冊日期: <span id=""> 2018-09-14 </span> </span> </div> <div style="margin-top: 5px;" class=""> <span style="font-size: 13px; font-weight: 900;" id=""> 個人資訊 </span> <ul class="mui-table-view"> <li style="margin-left: -4%;" class="mui-table-view-cell"> <span class="mui-navigate-right">家鄉 : </span> <span class="">安徽省黃山市</span> </li> <li style="margin-left: -4%;" class="mui-table-view-cell"> <span class="mui-navigate-right">星座 : </span> <span >金牛座</span> </li> <li style="margin-left: -4%;" class="mui-table-view-cell"> <span class="mui-navigate-right">學校 : </span> <span class="mui-navigate-right">武漢大學</span> </li> <li style="margin-left: -4%;" class="mui-table-view-cell"> <span class="mui-navigate-right">評論 : </span> <span id=""> 好評率80% </span> </li> <li style="margin-left: -4%;" class="mui-table-view-cell"> <span class="mui-navigate-right">個人簽名 : </span> <span class="mui-navigate-right"></span> </li> <div style="background: pink; width: 95%;font-weight: 700; padding: 10px; border-radius: 8px; color: white;" id=""> 人生就像一場旅行過往的人就是風景 </div> <li style="margin-left: -4%;" class="mui-table-view-cell"> <span class="mui-navigate-right">約會記錄</span> </li> <li style="margin-left: -4%;" class="mui-table-view-cell"> <span class="mui-navigate-right">我的關注</span> </li> <li style="margin-left: -4%;" class="mui-table-view-cell"> <span class="mui-navigate-right">興趣愛好</span> </li> <div > <li style="margin-left: -4%;" class="mui-table-view-cell"> <img style="margin-top: 5px; height: 25px; width: 25px" class="mui-navigate-right"src="../images/yx.png"/> <div class="item_xq" style="background: cornflowerblue;" id=""> 英雄聯盟 </div> <div class="item_xq" style="background: deepskyblue;" id=""> 王者榮耀 </div> </li> <li style="margin-left: -4%;" class="mui-table-view-cell"> <img style="margin-top: 5px; height: 25px; width: 25px" class="mui-navigate-right"src="../images/dianying.png"/> <div class="item_xq" style="background: deepskyblue;" id=""> 權力的遊戲 </div> <div class="item_xq" style="background: crimson;" id=""> 復仇者聯盟 </div> <div class="item_xq" style="background: deeppink;" id=""> 山楂樹 </div> </li> <li style="margin-left: -4%;" class="mui-table-view-cell"> <img style="height: 25px; width: 25px" class="mui-navigate-right"src="../images/yingyue.png"/> <div class="item_xq" style="background: crimson;" id=""> lovestory </div> <div class="item_xq" style="background: deeppink;" id=""> 白茶山 </div> <div class="item_xq" style="background: cornflowerblue;" id=""> takemehand </div> </li> <li style="margin-left: -4%;" class="mui-table-view-cell"> <img style="height: 25px; width: 25px" class="mui-navigate-right"src="../images/meishi.png"/> <div class="item_xq" style="background: #262626;" id=""> 粵菜 </div> <div class="item_xq" style="background: cornflowerblue;" id=""> 川菜 </div> </li> <li style="margin-left: -4%;" class="mui-table-view-cell"> <span class="mui-navigate-right">去過的地方</span> </li> <div > <div class="item_xq" style="background: deepskyblue;" id=""> 桂林 </div> <div class="item_xq" style="background: #0A2B1D;" id=""> 九寨溝 </div> <div class="item_xq" style="background: #00DD1C;" id=""> 三亞 </div> <div class="item_xq" style="background: deeppink;" id=""> 西藏 </div> </div> </ul> </div> </div> </div>