slide-item.vue 2.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778
  1. <template>
  2. <view class="slide-box">
  3. <tantan :list="list" @onChange="change" @onClickImage="clickImage"></tantan>
  4. </view>
  5. </template>
  6. <script>
  7. import tantan from '@/components/dgex-tantan/dgex-tantan.vue'
  8. export default {
  9. name: "slide-item",
  10. components: {
  11. tantan
  12. },
  13. props: {},
  14. data() {
  15. return {
  16. list: []
  17. }
  18. },
  19. watch: {},
  20. mounted() {
  21. const arr = []
  22. /* 测试数据*/
  23. const tu = [
  24. 'https://nimg.ws.126.net/?url=http%3A%2F%2Fdingyue.ws.126.net%2F2021%2F0704%2Fc7a27a1ej00qvpu700019c000hs00vlc.jpg&thumbnail=660x2147483647&quality=80&type=jpg',
  25. 'https://nimg.ws.126.net/?url=http%3A%2F%2Fdingyue.ws.126.net%2F2021%2F0704%2F9f81e6aaj00qvpu70001xc000hs00vmc.jpg&thumbnail=660x2147483647&quality=80&type=jpg',
  26. 'https://nimg.ws.126.net/?url=http%3A%2F%2Fdingyue.ws.126.net%2F2021%2F0704%2F55bf2cb3j00qvpu70002cc000hs012jc.jpg&thumbnail=660x2147483647&quality=80&type=jpg',
  27. 'https://nimg.ws.126.net/?url=http%3A%2F%2Fdingyue.ws.126.net%2F2021%2F0704%2F2017725bj00qvpu70001jc000hs00zxc.jpg&thumbnail=660x2147483647&quality=80&type=jpg'
  28. ]
  29. for (let index = 0; index < 10; index++) {
  30. const n = Math.floor(Math.random() * (tu.length - 1))
  31. let data = {
  32. image: tu[n],
  33. title: '你好',
  34. desc: n + 500 + 'm ' + '30分钟前活跃',
  35. tags: ['射手座']
  36. }
  37. arr.push(data)
  38. }
  39. this.list = arr
  40. },
  41. methods: {
  42. change(data) {
  43. // 判断倒数
  44. if (data.currentIndex > this.list.length - 5) {
  45. // 模拟一下最加数据
  46. const tu = [
  47. 'https://nimg.ws.126.net/?url=http%3A%2F%2Fdingyue.ws.126.net%2F2021%2F0704%2Fc7a27a1ej00qvpu700019c000hs00vlc.jpg&thumbnail=660x2147483647&quality=80&type=jpg',
  48. 'https://nimg.ws.126.net/?url=http%3A%2F%2Fdingyue.ws.126.net%2F2021%2F0704%2F9f81e6aaj00qvpu70001xc000hs00vmc.jpg&thumbnail=660x2147483647&quality=80&type=jpg',
  49. 'https://nimg.ws.126.net/?url=http%3A%2F%2Fdingyue.ws.126.net%2F2021%2F0704%2F55bf2cb3j00qvpu70002cc000hs012jc.jpg&thumbnail=660x2147483647&quality=80&type=jpg',
  50. 'https://nimg.ws.126.net/?url=http%3A%2F%2Fdingyue.ws.126.net%2F2021%2F0704%2F2017725bj00qvpu70001jc000hs00zxc.jpg&thumbnail=660x2147483647&quality=80&type=jpg'
  51. ]
  52. for (let index = 0; index < 10; index++) {
  53. const n = Math.floor(Math.random() * (tu.length - 1))
  54. let newdata = {
  55. image: tu[n],
  56. title: '你好',
  57. desc: n + 500 + 'm ' + '30分钟前活跃',
  58. tags: ['射手座']
  59. }
  60. this.list.push(newdata)
  61. }
  62. }
  63. // console.log(data);
  64. },
  65. clickImage(data) {
  66. console.log(data);
  67. }
  68. }
  69. }
  70. </script>
  71. <style scoped lang="scss">
  72. .slide-box{
  73. }
  74. </style>