需要做一个横向的区域滚动,按官方的模板,在实际运用中发现横线滚动只能显示部分内容,剩下的滑不动了,找了很久原因,最后发现需要在类 mui-control-item 上自定义宽度就可以了,记录一下。
效果图
实现的部分代码:
<div class="mui-scroll-wrapper mui-slider-indicator mui-segmented-control mui-segmented-control-inverted">
<div class="mui-scroll" >
<c:forEach items="${carYard_list }" var="build" varStatus="num">
<a class="mui-control-item" style="width: 170px;">
<div style="height: 110px;padding:10px 5px;">
<div id="div-${num.count }" class="huizhi-img-box mui-row gcc" onclick="qiehuan(this,'${marea_bm}','${marea_name }','${num.index}')" style="cursor:pointer;">
<div class="mui-col-xs-5 mui-text-center">
<img src="plug-in/mui/images/huizhi_car.png" />
</div>
<div class="mui-col-xs-7 mui-text-center">
<div class="huizhi-max-title" style="word-wrap: break-word;font-weight: 400;">${build.YARD_NAME }</div>
<div style="font-weight: 400;white-space: normal;text-align: left;font-size: 12px;">${marea_name }</div>
</div>
</div>
</div>
</a>
</c:forEach>
</div>
</div>
官方横向滚动文档介绍:
横向滚动只需在scroll组件基础上添加mui-slider-indicatorcode
mui-segmented-control
mui-segmented-control-inverted
这三个class即可.(给子元素添加mui-control-item
可加大文字间距增强体验
事例代码:
<div class="mui-scroll-wrapper mui-slider-indicator mui-segmented-control mui-segmented-control-inverted">
<div class="mui-scroll">
<a class="mui-control-item mui-active">
推荐
</a>
<a class="mui-control-item">
热点
</a>
<a class="mui-control-item">
北京
</a>
<a class="mui-control-item">
社会
</a>
<a class="mui-control-item">
娱乐
</a>
<a class="mui-control-item">
科技
</a>
</div>
</div>