项目实践


功能:

1、菜单切换
2、图片轮播
3、单条文字新闻轮播
4、下拉刷新
5、上拉加载
6、scroller 滚动条

大致实现原理:


  • 菜单切换
    • 引用Vux框架自带的scroller,tab,tabbar,tabbar-item组件;因和滚动条组件名重合,所以起个别名Scroller as Sc来引用;对应的链接页面通过 router,slot 统一分配管理,让代码更规范。
  • 图片轮播,单条文字新闻轮播
    • 引用Vux框架自带的swiper,marquee组件,通过官方提供的关键字可以实现,是否轮播、自动轮播、轮播时间等等一系列相关效果,让代码更加简单好用;
  • scroller 滚动条,下拉刷新,上拉加载
    • 在需要滚动的内容外,引用Vue自带的 vue-scroller组件,设置:on-refresh="refresh" :on-infinite="infinite" ref="myScroller" 等固定参数,才能出现 下拉刷新,上拉加载 功能样式,但数据的加载传输还需要用到 vue-jsonp组件才能获取;
  • 数据来源于163
    • 在刷新和加载更多时,需要根据163的数据格式,每次传不一样的参数;

遇到难点:

  • vue 的生命周期;
  • store的整个状态流程,state,getters,mutations,actions;

小结:

  • Vue的组件化模块,让每个功能都独立起来,互不干扰,需要用到某功能时,只需要专注于此功能,
  • store的统一管理,让数据更加的清晰明了,无需每次的重复,只需向库里申请调用即可,
  • router的分配,让链接的指向更加的简单,代码的维护性也变的简易了。