开心啦
开心啦
  • 发布:2016-03-08 19:24
  • 更新:2016-03-08 19:49
  • 阅读:1254

左右滑动问题

分类:MUI

xiaoshi-tus { width:950px;

             height:188px;  
             padding-left:9px;  
             display:inline-block;  
              background-color:#FFF;}  

 #xiaoshi-tus ul { margin:0;  
                padding:0;}  

 #xiaoshi-tus li { width:147px;  
                height:169px;  
                float:left;  
                margin-top:9px;  
                margin-right:9px;  
                list-style:none;  
                border:1px solid #e6e6e6;}  
#xiaoshi-tus img { width:100%;  
                height:100%;}  
     .xiaoshi-zi{  
            height:41px;  
            background-color:#FFF;  
            opacity: 0.8;  
            line-height:13px;  
            padding:0;  
            margin:0;  
            position:relative;  
            top:-27%;  
           text-align:center;}  
.mui-scroll-wrappera {  
    z-index: 2;  
    top: 0;  
    bottom: 0;  
    left: 0;  
    height:188px;  
    overflow-x:auto;  
    width:auto;  
}     

.xiaoshi-tu1a{  
   position:absolute;  
   left:90px;  
   font-size:0.6em;  
   border-radius: 50px;  
   line-height:15px;  
   color:#FFF;  
   text-align:center;  
    width:52px;  
   height:52px;  
   padding-top:5px;  
   margin-top:9px;  
   background:rgba(255,114,97,0.97);  

  }  

.xiaoshi-tu1s p {  
line-height:11px;  
font-size:0.6em;  
text-align:center;  
color:#FFF;}  

.xiaoshi-tu2a{
position:absolute;
left:246px;
font-size:0.6em;
border-radius: 26px;
line-height:15px;
color:#FFF;
text-align:center;
width:52px;
height:52px;
padding-top:5px;
margin-top:9px;
background:rgba(255,114,97,0.97);

}  

.xiaoshi-tu2s p {
line-height:11px;
font-size:0.6em;
text-align:center;
color:#FFF;}

.xiaoshi-tu3a{
position:absolute;
left:404px;
font-size:0.6em;
border-radius: 26px;
line-height:15px;
color:#FFF;
text-align:center;
width:52px;
height:52px;
padding-top:5px;
margin-top:9px;
background:rgba(255,114,97,0.97);

  }  

.xiaoshi-tu3s p {
line-height:11px;
font-size:0.6em;
text-align:center;
color:#FFF;}
}
.mui-scroll-wrappera {

z-index: 2;  
top: 0;  
bottom: 0;  
left: 0;  
height:196px;  
overflow:auto;  
width: 950px;  
}     

<div class="mui-scroll-wrappera">
<div id="xiaoshi-tus">
<ul>
<li>
<span class="xiaoshi-tu1a">降价<p><small>¥</small>200</p></span>
<img src="img/aq1.jpg" width="100" height="114">
<dl class="xiaoshi-zi">
<dt>iphone 6s</dt>
<dd>月供<span>¥500.7</span>元起</dd>
</dl>
</li>

                                         <li>  
                                      <span class="xiaoshi-tu2a">降价<p><small>¥</small>200</p></span>  
                                        <img src="img/aq1.jpg" width="100" height="114">  
                                         <dl class="xiaoshi-zi">  
                                            <dt>iphone 6s</dt>  
                                            <dd>月供<span>¥500.7</span>元起</dd>  
                                            </dl>  
                                        </li>  
                                         <li>  
                                      <span class="xiaoshi-tu3a">降价<p><small>¥</small>200</p></span>  
                                        <img src="img/aq1.jpg" width="100" height="114">  
                                         <dl class="xiaoshi-zi">  
                                            <dt>iphone 6s</dt>  
                                            <dd>月供<span>¥500.7</span>元起</dd>  
                                            </dl>  
                                        </li>           

                                       </ul>  
                                       </div>  
                                     </div>      

用了这样代码,不能左右自由滑动,上下就可以。
用这个方法 <div class="mui-scroll-wrapper">
<div class="mui-scroll">
<!--这里放置真实显示的DOM内容-->
</div>
</div>
也不行,请高手指点一下,多谢

2016-03-08 19:24 负责人:无 分享
已邀请:
DCloud_UNI_FXY

DCloud_UNI_FXY

mui('#scrollId').scroll({scrollY:false,scrollX:true});

该问题目前已经被锁定, 无法添加新回复