HTML5技术

MUI(1) - 腾龙问天(2)

字号+ 作者:H5之家 来源:博客园 2016-07-21 10:00 我要评论( )

上面是index_list.html页面的全部代码。index.html和index_list.html两个页面结合在一起形成了这个效果: index.html的作用就是显示固定导航,inde_list.html显示具体列表内容,列表项的滚动是在index_list.html所

上面是index_list.html页面的全部代码。index.html和index_list.html两个页面结合在一起形成了这个效果:



index.html的作用就是显示固定导航,inde_list.html显示具体列表内容,列表项的滚动是在index_list.html所在webview中使用原生滚动,既保证了滚动条不会穿透顶部导航,符合app的体验,也保证了列表流畅滚动,解决了区域滚动卡顿的问题。 index_list.html就是index.html的子页面,创建代码比较简单,如下:

mui.init({ subpages: [{ url: "html/index_list.html", //子页面HTML地址,支持本地地址和网络地址 id: "index_list", //子页面标志 styles: { top: '45px', //子页面顶部位置,mui标题栏默认高度为45px bottom: '0px' //子页面底部位置,默认为0px,可不定义 } }] });

说明:html是在本项目下新建的一个子文件夹,index_list.html页面在html文件夹下面。
安卓手机端测试效果图:

点击截图箭头所指的那个按钮旁边的方向向下的箭头,如果看到


如果看到上面这张截图所示的效果,那么点击这个按钮即可在手机端看到,期间手机和电脑之间不能断开连接;如果没有扫描出手机,那么启动手机助手,然后关闭HBuilder刷新桌面,之后启动HBuilder然后重复以上步骤检查手机是否被识别出来,如果还未识别出手机那么请百度吧,具体情况具体分析。

这只是一个简单的demo而已,建议大家自己试试看,还有就是要养成看官方文档的习惯,遇到问题先去查询官方文档。
官方文档地址:,
或许有人会说小编我的这篇博客很烂,但是小编觉得真的很基础,切记不要养成高端看不透彻,低端基础看不上的习惯,这个习惯很不好。
转载请注明出处,谢谢。

 

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

相关文章
  • MUI(5) - 腾龙问天

    MUI(5) - 腾龙问天

    2016-07-28 13:00

  • MUI(4) - 腾龙问天

    MUI(4) - 腾龙问天

    2016-07-27 18:00

  • MUI(3) - 腾龙问天

    MUI(3) - 腾龙问天

    2016-07-27 15:00

  • MUI(2) - 腾龙问天

    MUI(2) - 腾龙问天

    2016-07-27 12:00

网友点评
h