scrollBox.vue 1.9 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889
  1. <template>
  2. <view class="list uni-flex uni-column">
  3. <view class="wrap-item">
  4. <view class="lis uni-flex uni-column" :animation="animationData">
  5. <view class="uni-flex uni-column item" :style="{background: bgColor,color:color}" v-for="(item, index) in list" :key="index">
  6. <view class="swiper-item item_title uni-flex list_item">
  7. <view class="time uni-flex-item justify-align-center uni-flex">{{ item.placeText }}</view>
  8. </view>
  9. </view>
  10. </view>
  11. </view>
  12. </view>
  13. </template>
  14. <script>
  15. export default {
  16. props: {
  17. list: {
  18. type: Array
  19. },
  20. bgColor: {
  21. type: String,
  22. default: 'rgba(229, 237, 240, 0.6)'
  23. },
  24. color: {
  25. type: String,
  26. default: '#333'
  27. }
  28. },
  29. data() {
  30. return {
  31. scrollHeight: 0, //向上滚动距离
  32. height: 0, //.lis高度(滚动框高度)
  33. animationData: {} //动画对象
  34. };
  35. },
  36. mounted() {
  37. if(this.list.length){
  38. this.prizeScroll();
  39. }
  40. },
  41. methods: {
  42. getHeight(Class) {
  43. let query = uni.createSelectorQuery().in(this);
  44. query
  45. .selectAll(Class)
  46. .boundingClientRect(data => {
  47. this.height = data[0] ? data[0].height : 0;
  48. })
  49. .exec();
  50. },
  51. prizeScroll() {
  52. let speed = 60;
  53. let animation = uni.createAnimation({
  54. duration: this.getHeight('.lis') / speed,
  55. timingFunction: 'linear',
  56. delay: 0
  57. });
  58. this.animation = animation;
  59. setInterval(() => {
  60. if (this.scrollHeight >= this.height) {
  61. animation.translateY(0).step();
  62. this.scrollHeight = 0;
  63. this.animationData = animation.export();
  64. } else {
  65. this.scrollHeight = this.scrollHeight + 1;
  66. animation.translateY(-this.scrollHeight).step();
  67. this.animationData = animation.export();
  68. }
  69. }, speed);
  70. }
  71. }
  72. };
  73. </script>
  74. <style lang="less">
  75. .list {
  76. width: 60%;
  77. height: 2.6em;
  78. overflow: hidden;
  79. .item{
  80. background: rgba(229, 237, 240, 0.6);
  81. border-radius: 5em;
  82. padding: 0.2em 1em;
  83. font-size: 0.8em;
  84. margin:0.3em 0;
  85. }
  86. }
  87. </style>