当前位置: 首页 > Web前端 > HTML5

BUIWebapp在项目中用的有点小心

时间:2023-04-05 14:35:23 HTML5

接触BUI有一段时间了,在移动端的项目开发中也用到了。总的来说框架使用起来还是比较灵活的,控件可以自由定制。前提是自己能认真研究一下框架的API,因为上面提到的东西比较详细。如果不仔细阅读,可能会看不到某些功能点,无法实现某些效果。下面是我学习和使用bui的一点点心得。希望纠正一些不好的地方。控件的不同用法实现不同的功能1.使用bui.slide实现轮播图片的效果(截图中的内容不是图片,是可配置的文字,当然可以配置成图片)2.使用bui.slide实现新闻轮播的效果(通过设置方向为垂直滚动)3.使用bui.slide实现底部导航栏切换页面的效果4.使用bui.slide实现tab切换的效果(tab里面有个to方法,可以激活第二个几个tab)上面的功能我用的比较多。一个控件能实现这么多效果(当然前提是认真研究过api),效果还是相当不错的。不得不佩服开发使用这个框架的人,但是官网上还有其他几个效果是依赖bui.slide实现的。这里我这里用的比较少,就不截图了。有兴趣的可以点击http://www。easybui.com/demo/#...two.bui.back()用于单页开发。该方法可以绑定到项目中特定的返回类名。这样的话,在需要的时候很容易在返回的页面中,直接调用打开的页面,就可以使用这个方法返回到指定的页面1)。如果需要返回首页,不管当前页面在多少个子级页面,都可以使用这个名字:'main';2).如果返回某个页面后需要刷新本页面的数据,可以使用bui.back()中的回调函数进行操作(如果是返回主页面,路径是main.,如果是另一个page,就是页面的路径)图中的init()和initCart()都是在返回页面中请求数据的方法3.底部导航栏的妙用1.在底部导航栏的几个tab当中,可能会有一些选项需要我们登录才能进入。如果没有登录,则先跳转到登录,然后返回标签页。比如下图中,如果有类似的需求,我们可以把登录信息放在底部导航栏被点击的时候进行判断,然后把tab的索引传给登录页面,然后当登录成功,使用bui.back()返回到你要进入的tab(在main记得返回表面的tab方法)另外,如果其他页面也想返回导航栏中的其中一个tab,也可以使用loader.require(["main"],function(res){varpageTab=res.tab;pageTab.to(3,"none");})3这里是导航栏上的索引,需要手动配置("none"表示切换到相应的tab,没有动画)。做出来的东西只是用到了bui里面只有几个功能。bui中还有很多比较有趣的功能,方便我们在平时的项目开发中更好的开发。更多功能请参考官网http://www.easybui。com/文采不好,还请见谅,以上是我使用bui的一点心得,希望对大家一起学习有所帮助