如何调整uniapp轮播图swiper的样式(dot的样式和位置)

﹏ヽ暗。殇╰゛Y 2023-06-21 03:58 25阅读 0赞

背景

官网文档不解释很多,这里我来详细说明下,很简单可以做到任意修改自己想要的效果。

需求

我们需要做一个轮播图,其他没什么但是dot的位置要偏上一些,而且样式有要求。
在这里插入图片描述

实现

利用uniapp官网的demo组件uni-swiper-dot,这个组件可以只用几行代码实现想要的效果,代码如下

  1. <template>
  2. <view class="content">
  3. <uni-swiper-dot :info="info" :current="current" :mode="mode" :dots-styles="dotsStyles" field="content">
  4. <swiper class="swiper-box" @change="change">
  5. <swiper-item v-for="(item ,index) in info" :key="index">
  6. <view :class="item.colorClass" class="swiper-item">
  7. <image :src="item.url" mode="aspectFill" />
  8. </view>
  9. </swiper-item>
  10. </swiper>
  11. </uni-swiper-dot>
  12. </view>
  13. </template>
  14. <script>
  15. import uniSwiperDot from '@/components/uni-swiper-dot/uni-swiper-dot.vue'
  16. export default {
  17. components: {
  18. uniSwiperDot
  19. },
  20. data() {
  21. return {
  22. info: [{
  23. colorClass: 'uni-bg-red',
  24. url: 'https://img-cdn-qiniu.dcloud.net.cn/uniapp/images/shuijiao.jpg',
  25. content: '内容 A'
  26. },
  27. {
  28. colorClass: 'uni-bg-green',
  29. url: 'https://img-cdn-qiniu.dcloud.net.cn/uniapp/images/muwu.jpg',
  30. content: '内容 B'
  31. },
  32. {
  33. colorClass: 'uni-bg-blue',
  34. url: 'https://img-cdn-qiniu.dcloud.net.cn/uniapp/images/cbd.jpg',
  35. content: '内容 C'
  36. }
  37. ],
  38. modeIndex: -1,
  39. styleIndex: -1,
  40. current: 0,
  41. mode: 'long',
  42. dotsStyles: {
  43. backgroundColor: 'rgba(83, 200, 249,0.3)',
  44. border: '1px rgba(83, 200, 249,0.3) solid',
  45. color: '#fff',
  46. selectedBackgroundColor: 'rgba(83, 200, 249,0.9)',
  47. selectedBorder: '1px rgba(83, 200, 249,0.9) solid',
  48. bottom:100
  49. }
  50. }
  51. },
  52. onLoad() {},
  53. methods: {
  54. change(e) {
  55. this.current = e.detail.current
  56. },
  57. }
  58. }
  59. </script>
  60. <style>
  61. page {
  62. display: flex;
  63. flex-direction: column;
  64. box-sizing: border-box;
  65. background-color: #fff
  66. }
  67. view {
  68. font-size: 28upx;
  69. line-height: inherit
  70. }
  71. .example {
  72. padding: 0 30upx 30upx
  73. }
  74. .example-title {
  75. font-size: 32upx;
  76. line-height: 32upx;
  77. color: #777;
  78. margin: 40upx 25upx;
  79. position: relative
  80. }
  81. .example .example-title {
  82. margin: 40upx 0
  83. }
  84. .example-body {
  85. padding: 0 40upx
  86. }
  87. .swiper-box {
  88. height: 400upx;
  89. }
  90. .swiper-item {
  91. display: flex;
  92. justify-content: center;
  93. align-items: center;
  94. height: 100%;
  95. background: #eee;
  96. color: #fff;
  97. }
  98. .swiper-item image {
  99. width: 100%;
  100. height: 100%;
  101. }
  102. .uni-bg-red {
  103. background: #ff5a5f;
  104. }
  105. .uni-bg-green {
  106. background: #09bb07;
  107. }
  108. .uni-bg-blue {
  109. background: #007aff;
  110. }
  111. .uni-swiper__box {
  112. margin-top: 30upx;
  113. }
  114. .uni-swiper__header {
  115. padding: 0 30upx;
  116. font-size: 32upx;
  117. color: #333;
  118. }
  119. .uni-swiper__info {
  120. display: flex;
  121. padding: 0 15upx;
  122. }
  123. .uni-swiper__info-item {
  124. display: flex;
  125. justify-content: center;
  126. align-items: center;
  127. margin: 15upx;
  128. height: 60upx;
  129. width: 100%;
  130. font-size: 28upx;
  131. color: #333;
  132. border: 1px #eee solid;
  133. border-radius: 10upx;
  134. }
  135. .uni-swiper__info-dots {
  136. width: 16upx;
  137. height: 16upx;
  138. border-radius: 50%;
  139. background: #333333;
  140. margin-left: 10upx;
  141. box-sizing: border-box;
  142. }
  143. .uni-swiper__info-dots:first-child {
  144. margin: 0;
  145. }
  146. .active {
  147. border: 1px #000 solid;
  148. }
  149. slider {
  150. width: 100%;
  151. }
  152. </style>

修改dot的距离底部的位置

增加一个bottom,默认值是10,这里我修改为了100(根据需要),dot的位置就上移了。

  1. dotsStyles: {
  2. backgroundColor: 'rgba(83, 200, 249,0.3)',
  3. border: '1px rgba(83, 200, 249,0.3) solid',
  4. color: '#fff',
  5. selectedBackgroundColor: 'rgba(83, 200, 249,0.9)',
  6. selectedBorder: '1px rgba(83, 200, 249,0.9) solid',
  7. bottom:100
  8. }

修改dot的样式

修改data里的mode,这里默认四种样式 default,long,nav,indexes,可以参考官方示例,如果还不满意,就自己修改就好了。

总结

通过这个组件可以节省不少时间,希望对大家有用

https://ext.dcloud.net.cn/plugin?id=284

发表评论

表情:
评论列表 (有 0 条评论,25人围观)

还没有评论,来说两句吧...

相关阅读