效果展示

组件设置

步骤1

在pages目录下，新建文件夹components

步骤2

在components下建立新文件夹swiper

在swiper目录下，新建4个文件，分别为

• swiper.js
• swiper.json
• swiper.wxml
• swiper.wxss

各文件位置示意图如下：

❝

注：此时编译会报错 错误显示在json那里 先不用管 后面把代码复制粘贴上去再编译就好了

步骤3

分别把下面代码复制进swiper目录中的四个文件

swiper.js

Component({
  /**
   * 组件的属性列表
   */
  properties: {
    imgUrls: Array,
  },

  /**
   * 组件的初始数据
   */
  data: {
    currentIndex: 0
  },
  /**
   * 组件的方法列表
   */
  methods: {
    swiperChange(e) {
      this.setData({
        currentIndex: e.detail.current
      });
    }
  }
});

swiper.json

{
  "component": true,
  "usingComponents": {}
}

swiper.wxml

<swiper indicator-dots="false" autoplay="{{true}}" interval="2000" indicator-dots="{{false}}" indicator-color='#8a8a8a'
  indicator-active-color='#333' circular="true" class="swiper-block" bindchange="swiperChange" previous-margin="100rpx"
  next-margin="100rpx" current="{{0}}">
  <block wx:for="{{imgUrls}}" wx:index="{{index}}" wx:key="{{index}}">
    <swiper-item class="swiper-item ">
      <image mode="aspectFill" src="{{item}}" class="slide-image {{currentIndex == index ? 'active' : 'common'}}" />
    </swiper-item>
  </block>
</swiper>

swiper.wxss

page {
  background-color: #fff;
}

.swiper-block {
  background: #fff;
  height: 500rpx;
  width: 100%;
}

.swiper-item {
  display: flex;
  flex-direction: column;
  justify-content: start;
  align-items: flex-start;
  overflow: unset;
  width: 550rpx;
  height: 450rpx;
  padding-top: 70rpx;
  padding-bottom: 20rpx;
  box-sizing: border-box;
}

.slide-image {
  height: 300rpx;
  width: 450rpx;
  border-radius: 10rpx;
  margin: 0rpx 50rpx;
  z-index: 1;
  box-shadow: 10rpx 5px 40rpx rgba(0, 0, 0, 0.5);
}

.active {
  transform: scale(1.3);
  transition: all .5s ease-in 0s;
  z-index: 20;
  opacity: 1;
}

.common {
  transform: scale(1);
  transition: all .5s ease-in 0s;
  z-index: 0;
  opacity: 0.4;
}

.dots-box {
  display: flex;
  justify-content: center;
  align-items: center;
}

使用组件

步骤1

在需要使用swiper组件的页面的json文件中引入组件

{
  "usingComponents": {
    "custom-swiper": "../components/swiper/swiper"
  }
}

❝

注意：../components/swiper/swiper表示组件的位置 这里根据自己实际设置的位置关系进行替换即可

步骤2

在页面的wxml页面中，使用组件代码

<custom-swiper imgUrls="{{carouselImgUrls}}" />

carouselImgUrls

• 类型：数组
• 作用：用于存储轮播图图片的地址（网络地址 or 本地地址）

步骤3

在页面的js文件的data中，添加carouselImgUrls变量

  data: {
    carouselImgUrls: [
    /*
    图片的个数自定义
    图片来源：围脖
 作者：少女兔iiilass  
  侵删
  */
      "https://wx1.sinaimg.cn/mw2000/7f97a73fly1gsgixv69f6j20j60j60ui.jpg",
      "https://wx1.sinaimg.cn/mw2000/7f97a73fly1gsgixvage4j20j60j6tah.jpg",
      "https://wx1.sinaimg.cn/mw2000/7f97a73fly1gsgixvadfnj20j60j60uk.jpg",
      "https://wx1.sinaimg.cn/mw2000/7f97a73fly1gsgixvdcswj20j60j6jt6.jpg",
      "https://wx1.sinaimg.cn/mw2000/7f97a73fly1gsgixv6kmbj20j60j6dhg.jpg"
    ],
  },

最后只需要编译代码 就可以得到效果图了

结语

注：测试图片来源网络，侵删

创作不易

如果您觉得写的不错的话

点赞+在看+收藏 ❤️