sddtlm8 2016-05-25 07:14 采纳率: 68%
浏览 1137
已结题

使用了dot.min.js的script模板后，导航条不能左右滑动了，请大神指教

--------------------------------下面的代码是不能左右滑动的

<li class="swiper-slide active" onclick="switchTab(this,'all')">全部</li> {{ for(var i=0, len=it.length; i < len; i++) {}} <li class="swiper-slide" onclick="switchTab(this,'{{=it[i].FORMTYPELIST}}')">{{=it[i].FORMTYPELIST}}</li> {{ } }} 
    ----------------------------只要用了<script id=""></script>这个模板，也是不能滑动，哪怕写死他--------------------------
    <script id="footer-tab-template" type="text/x-dot-template">
         <li class="swiper-slide" onclick="switchTab(this)">请假申请</li>
            <li class="swiper-slide" onclick="switchTab(this)">调休申请</li>
            <li class="swiper-slide" onclick="switchTab(this)">加班申请</li>
            <li class="swiper-slide" onclick="switchTab(this)">辞职申请</li>
            <li class="swiper-slide" onclick="switchTab(this)">换岗申请</li>
            <li class="swiper-slide" onclick="switchTab(this)">投诉申请</li>

    </script>
        ---------------------------------但如果是纯粹的html就可以左右滑动-----------
         <li class="swiper-slide" onclick="switchTab(this)">请假申请</li>
            <li class="swiper-slide" onclick="switchTab(this)">调休申请</li>
            <li class="swiper-slide" onclick="switchTab(this)">加班申请</li>
            <li class="swiper-slide" onclick="switchTab(this)">辞职申请</li>
            <li class="swiper-slide" onclick="switchTab(this)">换岗申请</li>
            <li class="swiper-slide" onclick="switchTab(this)">投诉申请</li>
------------------------------------上面的可能看不太清楚，下面我把全部代码贴出来------------------------

html---------------------------------------------------------
<!DOCTYPE HTML>




待办事项





<br> .aui-tab-style.fixed {<br> position: fixed;<br> }<br> #headerMenu {<br> left:0;<br> top:0;<br> z-index:999;<br> width: 100%;<br> height: 45px;<br> overflow: hidden;<br> background-color: #fdfdfc;<br> font: 14px/40px hiragino sans gb, microsoft yahei, simsun;<br> box-shadow:3px 3px 3px rgba(0,0,0,0.2);<br> }<br> #headerMenu .swiper-slide {<br> padding: 0 20px;<br> width:auto;<br> line-height: 45px;<br> }<br> headerMenu ul{<br> -webkit-margin-before: 1em;<br> -webkit-margin-after: 1em;<br> -webkit-margin-start: 0px;<br> -webkit-margin-end: 0px;<br> -webkit-padding-start: 40px;<br> }</p> <pre><code> #headerMenu .swiper-slide.active{ color: #3498db !important; border-bottom: 2px #3498db solid; } &lt;/style&gt; </code></pre> <p></head><br> <body><br> <div class="aui-content"><br> <script id="footer-tab-template" type="text/x-dot-template"><br> <li class="swiper-slide active" onclick="switchTab(this,'all')">全部</li><br> {{ for(var i=0, len=it.length; i &lt; len; i++) {}}<br> <li class="swiper-slide" onclick="switchTab(this,'{{=it[i].FORMTYPELIST}}')">{{=it[i].FORMTYPELIST}}</li><br> {{ } }}<br> </script><br> <div id="headerMenu" class="aui-tab aui-tab-info aui-tab-style"><br> <ul class="swiper-wrapper" id="tab-list"> <br> </ul><br> </div><br> </div><br> </body></p> <script type="text/javascript" src="../script/api.js" ></script> <script type="text/javascript" src="../script/swiper.js"></script> <script type="text/javascript" src="../script/common.js" ></script> <script type="text/javascript" src="../script/doT.min.js" ></script> <script type="text/javascript" src="../script/extra/daiban.js" ></script> <p></html><br> --------------------------------------js--------------------<br> /**</p> <ul> <li>Created by john on 2016/5/11. */ //加载代办菜单导航 function get_tab_list(){ var tabListUrl=&quot;/formType/TypeList&quot;; var bodyParam={ID:1}; // 请求导航列表数据 ajaxRequest(tabListUrl, &#39;POST&#39;, bodyParam, function (ret, err) { if (0 == ret.code) { var content=$api.byId(&quot;tab-list&quot;); var tpl=$api.byId(&quot;footer-tab-template&quot;).text; var tempFn=doT.template(tpl); content.innerHTML=tempFn(ret.types); api.refreshHeaderLoadDone(); api.parseTapmode(); } else { alert(ret.msg); } api.hideProgress(); }); }</li> </ul> <p>/* 待办顶部导航栏 切换*/<br> function switchTab(tab,formType){<br> /*tab active 操作*/<br> var headerMenu = $api.byId(&#39;headerMenu&#39;);<br> var headerMenuAct = $api.dom(headerMenu, &#39;.swiper-wrapper li.active&#39;);<br> $api.removeCls(headerMenuAct, &#39;active&#39;);<br> $api.addCls(tab, &#39;active&#39;);<br> localStorage.setItem(&#39;formType&#39;, formType); //将表单（导航）类型放入存储<br> openFrame(formType);//<br> /*End*/<br> }<br> function openFrame(){<br> var headerMenu = $api.byId(&#39;headerMenu&#39;);<br> var pos = $api.offset(headerMenu);<br> var hTemp = 0;<br> var sysType = api.systemType;<br> if(sysType == &#39;ios&#39;){<br> hTemp = 20;<br> }else if(sysType == &#39;android&#39;){<br> var ver = api.systemVersion;<br> ver = parseFloat(ver);<br> if(ver &gt;= 4.4){<br> hTemp = 25;<br> }<br> }<br> api.openFrame({<br> name: &#39;daiban_list&#39;,<br> url: &#39;daiban_list.html&#39;,<br> rect:{<br> x: 0,<br> y: pos.h + hTemp,<br> w: &#39;auto&#39;,<br> h: &#39;auto&#39;,<br> marginTop: pos.h,<br> marginBottom: 55<br> },<br> bounces: true,<br> opaque: true,<br> vScrollBarEnabled: false,<br> reload:true,<br> pageParam:{<br> type:api.pageParam.type<br> }<br> });<br> }<br> apiready = function (){<br> var mySwiper1 = new Swiper(&#39;#headerMenu&#39;,{<br> freeMode : true,<br> slidesPerView : &#39;auto&#39;,<br> });<br> //先把待办导航中的的本地存储类型设为全部<br> localStorage.setItem(&#39;formType&#39;,&#39;all&#39;);<br> get_tab_list();<br> openFrame();</p> <p>}</p>
  • 写回答

1条回答 默认 最新

  • 普通网友 2016-10-04 18:42
    关注

    dot.min.js的script模板后，导航条不能左右滑动了，请大神指教 5C
    --------------------------------下面的代码是不能左右滑动的

    全部 {{ for(var i=0, len=it.length; i < len; i++) {} {{=it[i].FORMTYPELIST}} {{ } }}
    ----------------------------只要用了这个模板，也是不能滑动，哪怕写死他--------------------------
    <br> <li class="swiper-slide" onclick="switchTab(this)">请假申请</li><br> <li class="swiper-slide" onclick="switchTab(this)">调休申请</li><br> <li class="swiper-slide" onclick="switchTab(this)">加班申请</li><br> <li class="swiper-slide" onclick="switchTab(this)">辞职申请</li><br> <li class="swiper-slide" onclick="switchTab(this)">换岗申请</li><br> <li class="swiper-slide" onclick="switchTab(this)">投诉申请</li></p> <pre><code>&lt;/script&gt; ---------------------------------但如果是纯粹的html就可以左右滑动----------- &lt;li class=&quot;swiper-slide&quot; onclick=&quot;switc </code></pre>
    评论

报告相同问题？

悬赏问题

  • ¥15 深度学习根据CNN网络模型，搭建BP模型并训练MNIST数据集
  • ¥15 lammps拉伸应力应变曲线分析
  • ¥15 C++ 头文件/宏冲突问题解决
  • ¥15 用comsol模拟大气湍流通过底部加热（温度不同）的腔体
  • ¥50 安卓adb backup备份子用户应用数据失败
  • ¥20 有人能用聚类分析帮我分析一下文本内容嘛
  • ¥15 请问Lammps做复合材料拉伸模拟，应力应变曲线问题
  • ¥30 python代码，帮调试，帮帮忙吧
  • ¥15 #MATLAB仿真#车辆换道路径规划
  • ¥15 java 操作 elasticsearch 8.1 实现 索引的重建