uni-swiper-dot.vue 4.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192
  1. <template>
  2. <view class="uni-swiper__warp">
  3. <slot/>
  4. <view
  5. v-if="mode === 'default'"
  6. :style="{'bottom':dots.bottom + 'px'}"
  7. class="uni-swiper__dots-box">
  8. <view
  9. v-for="(item,index) in info"
  10. :style="{
  11. 'width': (index === current? dots.width*2:dots.width ) + 'px','height':dots.width/3 +'px' ,'background-color':index !== current?dots.backgroundColor:dots.selectedBackgroundColor,'border-radius':'0px'}"
  12. :key="index"
  13. class="uni-swiper__dots-item uni-swiper__dots-bar"/>
  14. </view>
  15. <view
  16. v-if="mode === 'dot'"
  17. :style="{'bottom':dots.bottom + 'px'}"
  18. class="uni-swiper__dots-box">
  19. <view
  20. v-for="(item,index) in info"
  21. :style="{
  22. 'width': dots.width + 'px','height':dots.height +'px' ,'background-color':index !== current?dots.backgroundColor:dots.selectedBackgroundColor,'border':index !==current ? dots.border:dots.selectedBorder}"
  23. :key="index"
  24. class="uni-swiper__dots-item"/>
  25. </view>
  26. <view v-if="mode === 'round'" :style="{'bottom':dots.bottom + 'px'}" class="uni-swiper__dots-box">
  27. <view v-for="(item,index) in info" :class="[index === current&&'uni-swiper__dots-long']" :style="{
  28. 'width':(index === current? dots.width*3:dots.width ) + 'px','height':dots.height +'px' ,'background-color':index !== current?dots.backgroundColor:dots.selectedBackgroundColor,'border':index !==current ? dots.border:dots.selectedBorder}" :key="index" class="uni-swiper__dots-item " />
  29. </view>
  30. <view
  31. v-if="mode === 'nav'"
  32. :style="{'background-color':dotsStyles.backgroundColor}"
  33. class="uni-swiper__dots-box uni-swiper__dots-nav">
  34. <view
  35. :style="{'color':dotsStyles.color}"
  36. class="uni-swiper__dots-nav-item">{{ (current+1)+"/"+info.length }}
  37. {{ info[current][field] }}</view>
  38. </view>
  39. <view
  40. v-if="mode === 'indexes'"
  41. :style="{'bottom':dots.bottom + 'px'}"
  42. class="uni-swiper__dots-box">
  43. <view
  44. v-for="(item,index) in info"
  45. :style="{
  46. 'width':dots.width + 'px','height':dots.height +'px' ,'color':index === current?dots.selectedColor:dots.color,'background-color':index !== current?dots.backgroundColor:dots.selectedBackgroundColor,'border':index !==current ? dots.border:dots.selectedBorder}"
  47. :key="index"
  48. class="uni-swiper__dots-item uni-swiper__dots-indexes">{{ index+1 }}</view>
  49. </view>
  50. </view>
  51. </template>
  52. <script>
  53. export default {
  54. name: 'UniSwiperDot',
  55. props: {
  56. info: {
  57. type: Array,
  58. default () {
  59. return []
  60. }
  61. },
  62. current: {
  63. type: Number,
  64. default: 0
  65. },
  66. dotsStyles: {
  67. type: Object,
  68. default () {
  69. return {}
  70. }
  71. },
  72. // 类型 :default(默认) indexes long nav
  73. mode: {
  74. type: String,
  75. default: 'default'
  76. },
  77. // 只在 nav 模式下生效,变量名称
  78. field: {
  79. type: String,
  80. default: ''
  81. }
  82. },
  83. data () {
  84. return {
  85. dots: {
  86. width: 8,
  87. height: 8,
  88. bottom: 10,
  89. color: '#fff',
  90. backgroundColor: 'rgba(0, 0, 0, .3)',
  91. border: '1px rgba(0, 0, 0, .3) solid',
  92. selectedBackgroundColor: '#333',
  93. selectedBorder: '1px rgba(0, 0, 0, .9) solid'
  94. }
  95. }
  96. },
  97. watch: {
  98. dotsStyles (newVal) {
  99. this.dots = Object.assign(this.dots, this.dotsStyles)
  100. },
  101. mode (newVal) {
  102. if (newVal === 'indexes') {
  103. this.dots.width = 20
  104. this.dots.height = 20
  105. } else {
  106. this.dots.width = 8
  107. this.dots.height = 8
  108. }
  109. }
  110. },
  111. created () {
  112. if (this.mode === 'indexes') {
  113. this.dots.width = 20
  114. this.dots.height = 20
  115. }
  116. this.dots = Object.assign(this.dots, this.dotsStyles)
  117. }
  118. }
  119. </script>
  120. <style>
  121. .uni-swiper__warp {
  122. position: relative;
  123. width: 100%;
  124. box-sizing: border-box;
  125. overflow: hidden;
  126. }
  127. .uni-swiper__dots-box {
  128. position: absolute;
  129. bottom: 20rpx;
  130. display: flex;
  131. justify-content: center;
  132. align-items: center;
  133. box-sizing: box-sizing;
  134. width: 100%;
  135. }
  136. .uni-swiper__dots-item {
  137. flex-shrink: 0;
  138. width: 16rpx;
  139. border-radius: 50%;
  140. margin-left: 12rpx;
  141. background: rgba(0, 0, 0, .3);
  142. transition: all 0.2s linear;
  143. }
  144. .uni-swiper__dots-item:first-child {
  145. margin: 0;
  146. }
  147. .uni-swiper__dots-default {
  148. border-radius: 50%;
  149. }
  150. .uni-swiper__dots-long {
  151. border-radius: 100rpx;
  152. }
  153. .uni-swiper__dots-bar {
  154. border-radius: 100rpx;
  155. }
  156. .uni-swiper__dots-nav {
  157. bottom: 0;
  158. height: 80rpx;
  159. justify-content: flex-start;
  160. background: rgba(0, 0, 0, 0.2);
  161. box-sizing: box-sizing;
  162. overflow: hidden;
  163. }
  164. .uni-swiper__dots-nav-item {
  165. overflow: hidden;
  166. text-overflow: ellipsis;
  167. white-space: nowrap;
  168. font-size: 28rpx;
  169. color: #fff;
  170. box-sizing: box-sizing;
  171. margin: 0 30rpx;
  172. }
  173. .uni-swiper__dots-indexes {
  174. display: flex;
  175. justify-content: center;
  176. align-items: center;
  177. color: #fff;
  178. font-size: 24rpx;
  179. }
  180. </style>