当前位置:   article > 正文

uni-app 微信小程序之swiper轮播图_uniapp swiper

uniapp swiper

1. 实现效果

2. 完成代码

  1. <template>
  2. <view class="components-home">
  3. <view style="margin-top:-50rpx;height: 486rpx; position: relative;margin-bottom: 80rpx;">
  4. <image src='https://xxx.com/img/wccQQP.png' mode='widthFix' class='png' style='width:100%;height:486rpx'></image>
  5. </view>
  6. <swiper class="card-swiper round-dot" previous-margin="1rpx" :indicator-dots="false" :circular="true" :autoplay="true" interval="5000"
  7. duration="500" @change="cardSwiper" indicator-color="#ffffff" indicator-active-color="#ffffff" style="margin-top: -320upx;">
  8. <swiper-item v-for="(item,index) in swiperList" :key="index" :class="cardCur == index ? 'cur':''">
  9. <view class="swiper-item shadow-shop" style="border-radius: 20rpx 20rpx 22rpx 22rpx;">
  10. <image :src="item.url" v-if="item.type=='image'" mode="aspectFill" class=""></image>
  11. </view>
  12. </swiper-item>
  13. </swiper>
  14. </view>
  15. </template>
  16. <script>
  17. export default {
  18. name: 'Components',
  19. data() {
  20. return {
  21. swiperList: [{
  22. id: 0,
  23. type: 'image',
  24. url: 'https://xxx.com/img/qdpz/phone1.png',
  25. }, {
  26. id: 1,
  27. type: 'image',
  28. url: 'https://xxx.com/img/qdpz/phone2.png'
  29. }, {
  30. id: 2,
  31. type: 'image',
  32. url: 'https://xxx.com/img/qdpz/phone3.png'
  33. },{
  34. id: 3,
  35. type: 'image',
  36. url: 'https://xxx.com/img/qdpz/phone4.png'
  37. }],
  38. cardCur: 0,
  39. }
  40. },
  41. methods: {
  42. cardSwiper(e) {
  43. this.cardCur = e.detail.current
  44. },
  45. }
  46. }
  47. </script>
  48. <style>
  49. .components-home{
  50. background: #eee;
  51. }
  52. .card-swiper {
  53. height: 550upx !important;
  54. }
  55. .card-swiper swiper-item {
  56. width: 260upx !important;
  57. left: 245upx;
  58. box-sizing: border-box;
  59. padding: 0upx 15upx 50upx 15upx;
  60. overflow: initial;
  61. /* margin: 100rpx 0; */
  62. }
  63. .card-swiper swiper-item .swiper-item {
  64. width: 100%;
  65. display: block;
  66. height: 100%;
  67. border-radius: 10upx;
  68. transform: scale(0.7);
  69. transition: all 0.2s ease-in 0s;
  70. overflow: hidden;
  71. }
  72. .card-swiper swiper-item.cur .swiper-item {
  73. transform: none;
  74. transition: all 0.2s ease-in 0s;
  75. }
  76. </style>

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/酷酷是懒虫/article/detail/879526
推荐阅读
相关标签
  

闽ICP备14008679号