登录 用户中心() [退出] 后台管理 注册
   
您的位置: 首页 首页 >> NEWBT免费邮箱 >> NEWBT免费邮箱 >> 主题: 开发日志10: 使用著名的 swiper 控件代替了 overflow-x:scroll    [最新]
开发日志10: 使用著名的 swiper 控件代替了 overflow-x:scroll
浏览(15) -  作者: 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 最后更新]


总数:0 页次:1/0 首页 尾页  
总数:0 页次:1/0 首页 尾页  


该采集也在以下书单中



发表评论:
文本/html模式切换 插入图片 文本/html模式切换


附件:



NEWBT官方QQ群1: 276678893
可求档连环画,漫画;询问文本处理大师等软件使用技巧;求档softhub软件下载及使用技巧.
但不可"开车",严禁国家敏感话题,不可求档涉及版权的文档软件.
验证问题说明申请入群原因即可.

Copyright © 2005-2017 clq, All Rights Reserved
CLQ工作室 版权所有