tpstu的专栏

为自己的真实感受执笔豪书

移动端微信h5下ul实现横向滚动css代码

在微信端实现商品分类的显示,需要横向显示所有分类,超出宽度的分类需要能够横向滚动显示。折腾许久,一直以为只有使用js来实现这个功能,经过不断的调试,发现只要通过css样式调整就可以实现。由于对前端知识学习不多,所以调试很久才实现该功能。特此记录,以备下次使用。

这是默认显示,手指触碰滑动的时候可以左右滑动。


并且 在微信端不会出现滚动条这根黑条。

具体实现代码如下:

html代码:

<ul class="flex-layout category-head" id="category-head" style="">
       <li class="flex" style="" id="brand_cat" searchtype="brand">品牌团</li>
       <li class="flex" style="" data-ic="1" searchtype="goods">美体个护</li>
       <li class="flex hover" style="" data-ic="4" searchtype="goods">食品保健</li>
       <li class="flex" style="" data-ic="7" searchtype="goods">婴幼儿</li>
       <li class="flex" style="" data-ic="10" searchtype="goods">百货</li>
       <li class="flex" style="" data-ic="13" searchtype="goods">数码</li>
</ul>

css代码:

#category-head{width:100%;display: inline;white-space: nowrap;overflow-x:scroll;float:left;overflow-y:hidden}
#category-head li{display:inline-block;width:80px;height:30px;padding-left:10px;}


关键点在于ul要设置float:left,overflow-x:scroll,overflow-y:hidden。

阅读更多
个人分类: 学习所获
想对作者说点什么? 我来说一句

使用横向滚动

图片

happy_marvin happy_marvin

2014-11-10 20:45:47

阅读数:319

没有更多推荐了,返回首页

加入CSDN,享受更精准的内容推荐,与500万程序员共同成长!
关闭
关闭