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