html+9宫格+app+首页,一种方便手机app九宫格、列表开发的js组件的制作方法

一种方便手机app九宫格、列表开发的js组件的制作方法

【技术领域】

[0001]本发明涉及软件技术领域，尤其涉及一种方便手机app九宫格、列表开发的js组件，主要是应用于手机app开发中实现九宫格、列表页的相应开发。

【背景技术】

[0002]互联网已经进入到了成熟的时代，现在也越来越重视与用户之间的交流，这就必不可少需要通讯工具，因此，智能手机逐渐成为绝大部分网民的必备品。无论是10S还是Android系统，用户期望的依然是更方便的浏览方式，因此app就被人们所期待。

[0003]九宫格和列表作为了大多数手机app中必有的部分，方便九宫格、列表开发的js组件也就成为了一种能被经常使用的组件，具备了一定的使用价值。

【发明内容】

[0004]为了解决该问题，本发明提出了一种方便手机app九宫格、列表开发的js组件，提供了 app页面快速完成九宫格页面和列表页面的方法。

[0005]本发明的技术方案是:

通过将html九宫格及其列表代码提前封装到js函数中，用户根据参数的规定格式，组成参数，通过调用组件中的相关函数进行html代码自动生成并填充到相应的位置，从而达到九宫格和列表代码编写的功能。

[0006]组件的程序代码如下:

1)九宫格组件speedDial.js代码如下 funct1n apeedDial (h，1，list, divid, backFun){ var html = ’ ’ ； for (var i=0;i〈h;i++){

html +=

for (var j=0;j〈l;j++){ var shu = i木j + j; if (shu

html += 〃〈div class=’anxia’ οnclick=’〃+backFun+〃(〃+shu+

")，style:，height:100%;width:"+(100/1)+"%，>"+

〃〈div style=iheight:70%;display:〃+

〃-webkit-box!important;display: box!important;posit1n:relative;〃+

〃-webkit-box-align: center;box-align: cent

er;，,+

〃〈div style=iposit1n:relative;-webkit-bo

x-flex: 〃+ 〃l;box_flex: 1;J >

//+〃〈div style=’height:70%;’>〃+

,,〈img name=’tb’ src=’"+list [sum].tb+

〃’ style=’ height: 100%; ’ alt=’ pic’ />〃+

〃〈/div>"+

〃〈div style=iposit1n:relative;-webkit-bo

x-flex: 〃+ 〃l;box_flex: 1;J >

//+