BUI Webapp用于项目中的一点小心得

273 阅读3分钟

接触BUI也有一段时间,也用在了移动端的项目开发中,总的来说,该框架用起来也挺灵活的,控件可以自由定制,前提是自己能认真地学习该框架的api,因为api里面说的东西比较详细,如果没有仔细看的,可能有些功能点没有看到而导致一些效果弄不了,以下是我学习运用bui所得到的一点小心得,说的不好的地方,希望指正

一. 控件的不同使用实现不同的功能

1.使用bui.slide实现轮播图的效果(截图里面的内容不是图片,而是可以配置的文字,当然了可以配置成图片的)
图片描述
图片描述
图片描述

2.使用bui.slide实现新闻轮播的效果(通过设置方向为纵向滚动)

图片描述

3.使用bui.slide实现底部导航条切换页面的效果

图片描述

4.使用bui.slide实现tab切换的效果(tab这里有个to的方法,可以激活第几个tab)
图片描述
图片描述

以上者几种功能是我使用的比较多的,一个控件可以实现这么多的效果(当然前提是对api有认真地学习),得出来的效果也是挺赞的,不得不佩服开发这套框架的人

不过官网上还有其他几种的效果也是依赖bui.slide来实现的,这里我这边用的比较少,我就不截图了,有兴趣的可以点击www.easybui.com/demo/#...

二.bui.back()在单页面开发中的使用

  • 这个方法在项目中,可以绑定到一个特定的返回类名中,这样的话,在需要用到简单返回的页面中,可以直接调用

图片描述

  • 在已打开的页面中,可使用这个方法返回到指定的页面

图片描述

 1).如果需要返回到首页去,无论当前页面处在多少个子层级页面里面,则可以使用这个name:'main';

图片描述

  2).如果在返回某个页面后,需要刷新该页面的数据,则可以利用bui.back()里面的回调函数进行操作(如果是返回main页面,则路劲是main就行,如果是其他页面,则为该页面的路径)图片中的init()和initCart()均为所返回的页面里面的请求数据的方法

图片描述

三.底部导航条的妙用之处

1.在底部导航条的几个tab中,可能有一些选项是我们需要登录才可以进去的,如果没有登录则先跳去登录然后再返回来该tab,例如下图,
图片描述
有类似此需求的,我们可以把登录信息的判断在底部导航条的点击的时候作判断,然后把该tab的索引也就是index传过去登录页,然后在登录成功的时候,利用bui.back()返回到所要进去的tab(main里面的tab方法记得要先return出来)
图片描述
图片描述

另外如果其他页面也想返回到导航条这里的其中一个tab,也可以使用 loader.require(["main"], function(res) {

var pageTab = res.tab;
pageTab.to(3, "none");

})这里的3是导航条上的索引,需要自己手动配置("none"表示没有经过动画就切换到对应的tab)

弄过的项目只是用到了bui里面很少的一部分功能而已,bui里面还提供了很多更有趣的的功能,让我们在平时的项目开发中更好地开发,更多功能的学习请参考官网www.easybui.com/

文采不好,请见谅,以上是我在使用bui中的一点小心得,希望可以帮到大家一起学习