swiper组件自定义swiper组件详解

海轰Pro 2021-08-24 我要评论

想了解自定义swiper组件详解的相关内容吗，海轰Pro在本文为您仔细讲解swiper组件的相关知识和一些Code实例，欢迎阅读和指正，我们先划重点：swiper,swiper组件，下面大家一起来学习吧。

效果展示

在这里插入图片描述

组件设置

步骤1

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

步骤2

在components下建立新文件夹swiper

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

swiper.
jsswiper.
jsonswiper.wxml
swiper.wxss

各文件位置示意图如下：

在这里插入图片描述

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

步骤3

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

swiper.js

在这里插入图片描述

swiper.json

在这里插入图片描述

swiper.wxml

在这里插入图片描述

swiper.wxss

在这里插入图片描述

使用组件

步骤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"
    ],
  },

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

在这里插入图片描述

总结

本篇文章就到这里了，希望能给你带来帮助，也希望您能够多多关注的更多内容！

swiper组件自定义swiper组件详解

效果展示

组件设置

步骤1

步骤2

步骤3

使用组件

步骤1

步骤2

步骤3

总结

相关文章

猜您喜欢

今日热门

swiper组件 自定义swiper组件详解

效果展示

组件设置

步骤1

步骤2

步骤3

使用组件

步骤1

步骤2

步骤3

总结

相关文章

猜您喜欢

今日热门

swiper组件自定义swiper组件详解