zw-swiper.vue 2.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116
  1. <template>
  2. <swiper class="swiper-box" :style="{'height': height + 'rpx'}" :interval="3000"
  3. :disable-touch="!list || list.length <= 1" circular :indicator-dots="list && list.length > 1"
  4. indicator-active-color="#fff">
  5. <swiper-item class="swiper-item" v-for="(item , index) in list">
  6. <image @click.stop="$openPage(item)" :src="item.image" mode="scaleToFill" :style="{'border-radius':borderRadius + 'rpx'}"></image>
  7. </swiper-item>
  8. </swiper>
  9. </template>
  10. <script>
  11. import {
  12. getBannerList
  13. } from "@/api/government.js"
  14. export default {
  15. name: "zw-swiper",
  16. props: {
  17. borderRadius: {
  18. type: Number,
  19. default: 0
  20. },
  21. autoLoad: {
  22. type: Boolean,
  23. default: true
  24. },
  25. height: {
  26. type: Number,
  27. default: 200
  28. },
  29. StorageKey: {
  30. type: String,
  31. default: ""
  32. },
  33. keyword: {
  34. type: String,
  35. default: ""
  36. },
  37. },
  38. data() {
  39. return {
  40. list: []
  41. };
  42. },
  43. created() {
  44. },
  45. methods: {
  46. init() {
  47. this.getBanner(this.keyword)
  48. },
  49. // 获取 banner
  50. getBanner(keyword) {
  51. if (!keyword) return
  52. getBannerList(keyword).then(res => {
  53. const data = res.data || []
  54. this.list = data.map(el => {
  55. el.image = this.$getImgPath(el.image)
  56. return el
  57. });
  58. console.log()
  59. this.$emit('getBanner', data)
  60. if (this.StorageKey) {
  61. uni.setStorage({
  62. key: this.StorageKey,
  63. data: this.list,
  64. success: function() {
  65. console.log('success');
  66. }
  67. });
  68. }
  69. });
  70. },
  71. // 点击轮播图
  72. openSwiper(e) {
  73. this.$openPage(this.list[e])
  74. },
  75. },
  76. watch: {
  77. keyword: {
  78. handler: function(newKwd, oldKod) {
  79. if (oldKod === undefined && this.StorageKey) {
  80. uni.getStorage({
  81. key: this.StorageKey,
  82. success: res => {
  83. this.list = res.data || []
  84. }
  85. });
  86. }
  87. if (this.autoLoad && newKwd && newKwd !== oldKod) this.getBanner(newKwd)
  88. },
  89. immediate: true,
  90. deep: true
  91. }
  92. }
  93. }
  94. </script>
  95. <style lang="scss" scoped>
  96. .swiper-box {
  97. width: 100%;
  98. .swiper-item {
  99. width: 100%;
  100. height: 100%;
  101. image {
  102. width: 100%;
  103. height: 100%;
  104. }
  105. }
  106. }
  107. </style>