graceNvueNavBar2.vue 2.8 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859
  1. <template>
  2. <scroll-view scroll-with-animation
  3. :class="['grace-nav-bar2', isCenter ? 'grace-nav2-center' : '']" :scroll-x="true" :show-scrollbar="false"
  4. :scroll-into-view="'tab-'+currentIndex">
  5. <view class="nav2-item" :id="'tab-'+index" :style="{width:size+'rpx', height:(lineHeight+lineHeightSamll+18)+'rpx'}"
  6. v-for="(item, index) in items" :key="index" @click="navchang" :data-index="index">
  7. <view class="nav2-active-line-in" :style="{width:size+'rpx'}">
  8. <view class="nav2-active-line" :style="{borderColor:currentIndex == index ? activeColor : bgColor}"></view>
  9. </view>
  10. <view class="nav2-nav-body">
  11. <text :class="['nav2-item-title', currentIndex == index ? 'nav-active' : '']"
  12. :style="{
  13. color:currentIndex == index ? activeColor : color, width:size+'rpx',
  14. lineHeight:lineHeight+'rpx', fontSize:currentIndex == index ? activeFontSize : fontSize,
  15. backgroundColor:bgColor,
  16. fontWeight:currentIndex == index ? 'bold' : ''}">{{item.title}}</text>
  17. <text :class="['nav2-item-desc', currentIndex == index ? 'nav-active' : '']"
  18. :style="{color:currentIndex == index ? activeColor : descColor, lineHeight:lineHeightSamll+'rpx',
  19. fontSize:fontSizeSmall, backgroundColor:bgColor, width:size+'rpx'}">{{item.desc}}</text>
  20. </view>
  21. </view>
  22. </scroll-view>
  23. </template>
  24. <script>
  25. export default {
  26. props:{
  27. isCenter : {type : Boolean, default : false},
  28. currentIndex : {type : Number,default : 0},
  29. size : {type : Number, default : 138},
  30. fontSize : {type : String,default : '28rpx'},
  31. activeFontSize: {type : String,default : '30rpx'},
  32. lineHeight :{type : Number, default : 52},
  33. fontSizeSmall: {type : String,default : '22rpx'},
  34. lineHeightSamll :{type : Number, default : 28},
  35. items : {type : Array,default : function () {return []}},
  36. color : {type : String, default : "#333333"},
  37. descColor : {type : String, default : "#999999"},
  38. activeColor:{type : String, default : "#3688FF"},
  39. bgColor:{type : String, default : '#FFFFFF'}
  40. },
  41. methods:{
  42. navchang : function (e){
  43. this.$emit('change', Number(e.currentTarget.dataset.index))
  44. }
  45. }
  46. }
  47. </script>
  48. <style scoped>
  49. .grace-nav-bar2{flex-direction:row;}
  50. .nav2-item{width:100rpx; flex-direction:column; padding-bottom:16rpx;}
  51. .nav2-item-title{color:#333333; text-align:center;}
  52. .nav2-item-desc{color:#666666; text-align:center; padding-bottom:6rpx;}
  53. .nav2-active{font-weight:bold;}
  54. .nav2-active-line-wrap{}
  55. .grace-nav2-center{justify-content:center; text-align:center;}
  56. .nav2-active-line-in{position:absolute; left:0; bottom:2rpx; flex-direction:row; justify-content:center;}
  57. .nav2-active-line{width:20rpx; height:20rpx; border-radius:50rpx; border-width:6rpx; border-style:solid; border-color:#FF0000;}
  58. .nav2-nav-body{position:absolute; left:0; top:0;}
  59. </style>