uni-swiper-dot.vue 5.6 KB

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