开发日志10: 使用著名的 swiper 控件代替了 overflow-x:scroll
浏览(546 + ) 作者: clq 发表于 2018-01-14 15:45:38
编辑
关键字:
开发日志10: 使用著名的 swiper 控件代替了 overflow-x:scroll
原来我们邮件列表的左右滑动直接用 css 的 overflow-x:scroll 实现的,代码为
{{if .success}}
<!-- {{.success}} -->
<!-- {{.files}} -->
<!-- 模拟左右滚动条 -->
<div style="max-width:1024px; padding: 8px; border:0px dashed #FF0000; overflow-x:scroll; -webkit-scrollbar: {display: none;}">
{{range .files}}
<div class="line" style="min-width:600px; padding: 4px; border-bottom:1px dashed #ddd; overflow:hidden; text-align:left;">
<a href="file.php?id={{.file_name}}" style="display:inline-block; overflow:hidden; padding:8px; min-width:100%;" >
<span style="display:inline-block; width:150px; border:0px dashed #FF0000; overflow:hidden; float:left;" >{{.from}}</span>
<span style="display:inline-block; min-width:250px; border:0px dashed #FF0000; overflow:hidden; float:left;" >{{.subject}}</span>
<span style="display:inline-block; width:150px; border:0px dashed #FF0000; overflow:hidden; text-align:right; float:right; padding-right:16px;" >({{.file_size}}K){{.date}}</span>
<!-- <span style="display:inline-block; width:250px; border:0px dashed #FF0000; overflow:hidden;" >{{.file_name}}</span> -->
</a>
</div>
<span style=" clear:both;"></span>
{{end}}
</div>
{{end}}
其实也还不错,又简单. 有两个小缺点: ios 下滑动不太流畅, windows 下有滚动条显示.
今天闲来无事用了一下传说中的 swiper 控件,确实很好用,复杂度也不算高,所以还是替换了吧.
另外 swiper 的实现效果非常多,网上的例子都说是常用图片切换,其实还有老多了,建议大家直接看英文原版的示例,地址在
http://idangero.us/swiper/demos/
[2018-01-14 15:51:54 最后更新]
NEWBT官方QQ群1: 276678893
可求档连环画,漫画;询问文本处理大师等软件使用技巧;求档softhub软件下载及使用技巧.
但不可"开车",严禁国家敏感话题,不可求档涉及版权的文档软件.
验证问题说明申请入群原因即可.
