headline.vue 1.1 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970
  1. <template>
  2. <view class="tui-rolling-news list-item">
  3. <text class="cuIcon-notification"></text>
  4. <swiper :vertical="true" :autoplay="true" :circular="true" :interval="4000" class="tui-swiper">
  5. <swiper-item v-for="(item, index) in list" :key="index" class="tui-swiper-item">
  6. <view class="tui-news-item">{{ item }}</view>
  7. </swiper-item>
  8. </swiper>
  9. </view>
  10. </template>
  11. <script>
  12. export default {
  13. name: "headline",
  14. props: {
  15. list: {
  16. type: Array,
  17. default: function() {
  18. return [];
  19. }
  20. },
  21. },
  22. data() {
  23. return {
  24. };
  25. }
  26. }
  27. </script>
  28. <style>
  29. /*headlines*/
  30. .tui-rolling-news {
  31. width: 100%;
  32. padding: 0 30rpx;
  33. box-sizing: border-box;
  34. display: flex;
  35. align-items: center;
  36. justify-content: center;
  37. flex-wrap: nowrap;
  38. background: #fff;
  39. }
  40. .tui-rolling-news::after {
  41. left: 0;
  42. }
  43. .tui-swiper {
  44. margin-left: 8rpx;
  45. font-size: 28rpx;
  46. height: 80rpx;
  47. flex: 1;
  48. }
  49. .tui-swiper-item {
  50. display: flex;
  51. align-items: center;
  52. }
  53. .tui-news-item {
  54. line-height: 28rpx;
  55. white-space: nowrap;
  56. overflow: hidden;
  57. text-overflow: ellipsis;
  58. color: #555;
  59. }
  60. /*headlines*/
  61. </style>