齐博x1第五季《项目实战-留言板》25-移动端模板

2022-05-23 作者:torylf 分类:教程 阅读:170

即时演示地址:http://x1.alaiyeshi.net/msgboard


pc端模板差不多了,我们本节来制作一套移动端模板


因为功能都开发好,所以移动端模板,我们只要改变其样式和布局即可


移动端模板,留言墙因为移动屏幕空间受限没法用便笺排版,我就用直接用列表方式展示,简单为主

简单修改下css,就可以展示出列表布局

同样,把表单也修改成垂直排列即可:



再“换一换按钮“ 切换数据的时候,我们还需要另外加载一个模板,因为pc端和移动端加载的样式模板是不一样的,所以我们再建立一个

把移动端循环列表的代码复制到新建的wap_ten.htm模板中来


然后我们在切换数据的请求方法中,做一个wap的判断,如果是移动端就返回wap_ten的模板


最后我们在之前的切换数据的js中,更换一下类名,我们的移动端就简单的完成了

用户也可以参考此类方法,做成其他样式的模板,都是非常简单的,只需要熟悉html和css即可,其他的不需要太多的修改



到此我们为其命名为留言板1.20版本,即msgboard 1.20





来源: 神盾工作室    转载请注明出处!

本文地址:https://www.shieldsoho.com/article/165.html

 标签: 模块开发 齐博X1
{{item.nickname}} @回复
发表于{{item.create_time}}

  • {{replyitem.nickname}} {{item.create_time}}
    @{{item.nickname}}

查看更多评论