gui-speaker.vue 1.1 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344
  1. <template>
  2. <view class="gui-flex gui-rows gui-nowrap gui-align-items-center">
  3. <view>
  4. <slot name="icon"></slot>
  5. </view>
  6. <view class="gui-flex1">
  7. <swiper :style="styles"
  8. :vertical="vertical" @change="change" autoplay="true" :circular="true"
  9. :interval="interval" :current="current" class="gui-speaker-in">
  10. <swiper-item
  11. v-for="(item, index) in items" :key="index">
  12. <navigator :style="styles"
  13. :url="item.url" :open-type="item.opentype">
  14. <text :style="styles"
  15. class="gui-block-text gui-ellipsis">{{item.title}}</text>
  16. </navigator>
  17. </swiper-item>
  18. </swiper>
  19. </view>
  20. </view>
  21. </template>
  22. <script>
  23. export default{
  24. name : "gui-speaker",
  25. props : {
  26. items : {type:Array, default:function () {return [];}},
  27. current : {type:Number, default:0},
  28. vertical : {type:Boolean, default:false},
  29. interval : {type:Number, default:5000},
  30. styles : {type:String, default:'overflow:hidden; height:60rpx; line-height:60rpx; font-size:28rpx;'}
  31. },
  32. data() {
  33. return {
  34. }
  35. },
  36. methods:{
  37. change:function (index) {
  38. this.$emit('change', index.detail.current);
  39. }
  40. }
  41. }
  42. </script>
  43. <style scoped>
  44. </style>