选项卡(bui-tabbar)

用法

选项卡的实现使用方式：bui-tabbar + slider，充分利用slider的滑动特性。 实现： * bui-tabbar 通过控制 currentTab(v-model)索引来实现选中效果。 * slider 通过 @change事件改变 index 和 currentTab 实现联动。 * 要实现底部选项卡，只需要将 bui-tabbar 和 slider 区域对调即可;

html关键代码如下: 1. 2. 3. 4.

JS关键代码如下： 1. module.exports = { 2. data: function () { 3. return { 4. leftItem: { 5. icon: 'ion-chevron-left' 6. }, 7. currentTab:1, 8. tabItems: [ 9. { 10. title: "首页", 11. icon: "ion-home" 12. }, 13. { 14. icon: "ion-planet", 15. title: "探索" 16. }, 17. { 18. icon: "ion-ios-cart", 19. title: "商城" 20. }, 21. { 22. icon: "ion-ribbon-a", 23. title: "奖励" 24. } 25. ] 26. } 27. }, 28. methods: { 29. back() { 30. this.$pop(); 31. }, 32. onItemChange(index){ 33. 34. }, 35. onSliderChange(e){ 36. var index = e.index; 37. this.currentTab=index; 38. } 39. } 40. }

Example: bui-tabbar

属性