noticeBar.nvue 2.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104
  1. <template>
  2. <view class="u-page">
  3. <view class="u-demo-block">
  4. <text class="u-demo-block__title">基础功能</text>
  5. <view class="u-demo-block__content">
  6. <u-notice-bar
  7. :text="text1"
  8. ></u-notice-bar>
  9. </view>
  10. </view>
  11. <view class="u-demo-block">
  12. <text class="u-demo-block__title">可关闭</text>
  13. <view class="u-demo-block__content">
  14. <u-notice-bar
  15. :text="text5"
  16. mode="closable"
  17. ></u-notice-bar>
  18. </view>
  19. </view>
  20. <view class="u-demo-block">
  21. <text class="u-demo-block__title">自定义横向滚动速度</text>
  22. <view class="u-demo-block__content">
  23. <u-notice-bar
  24. :text="text2"
  25. speed="250"
  26. mode="closable"
  27. ></u-notice-bar>
  28. </view>
  29. </view>
  30. <view class="u-demo-block">
  31. <text class="u-demo-block__title">可跳转(点击右箭头)</text>
  32. <view class="u-demo-block__content">
  33. <u-notice-bar
  34. :text="text3"
  35. mode="link"
  36. url="/pages/componentsB/tag/tag"
  37. ></u-notice-bar>
  38. </view>
  39. </view>
  40. <view class="u-demo-block">
  41. <text class="u-demo-block__title">横向步进滚动</text>
  42. <view class="u-demo-block__content">
  43. <u-notice-bar
  44. :text="text4"
  45. :step="true"
  46. @click="click"
  47. ></u-notice-bar>
  48. </view>
  49. </view>
  50. <view class="u-demo-block">
  51. <text class="u-demo-block__title">纵向滚动</text>
  52. <view class="u-demo-block__content">
  53. <u-notice-bar
  54. :text="text4"
  55. direction="column"
  56. @click="click"
  57. ></u-notice-bar>
  58. </view>
  59. </view>
  60. <view class="u-demo-block">
  61. <text class="u-demo-block__title">自定义样式</text>
  62. <view class="u-demo-block__content">
  63. <u-notice-bar
  64. :text="text1"
  65. color="#ffffff"
  66. bgColor="#f56c6c"
  67. ></u-notice-bar>
  68. </view>
  69. </view>
  70. </view>
  71. </template>
  72. <script>
  73. export default {
  74. data() {
  75. return {
  76. text1: 'uView UI众多组件覆盖开发过程的各个需求,组件功能丰富,多端兼容。让您快速集成,开箱即用',
  77. text2: 'uView UI众多的贴心小工具,是您开发过程中召之即来的利器,让您飞镖在手,百步穿杨',
  78. text3: 'uView UI收集众多的常用页面和布局,减少开发者的重复工作,让您专注逻辑,事半功倍',
  79. text4: [
  80. '寒雨连江夜入吴',
  81. '平明送客楚山孤',
  82. '洛阳亲友如相问',
  83. '一片冰心在玉壶'
  84. ],
  85. text5: '涵盖uniapp各个方面,给开发者方向指导和设计理念,让您茅塞顿开,一马平川'
  86. }
  87. },
  88. onLoad() {
  89. },
  90. methods: {
  91. click(e) {
  92. console.log(e)
  93. }
  94. },
  95. }
  96. </script>
  97. <style lang="scss">
  98. .u-demo-block__content {
  99. @include flex(column);
  100. }
  101. </style>