JavaScript中自定义swiper组件详解

发布时间:2022-04-16 发布网站:脚本宝典
脚本宝典收集整理的这篇文章主要介绍了JavaScript中自定义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 &#8203; ​​​​
 	侵删
 	*/
      "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"
    ],
  },

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

在这里插入图片描述

总结

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

脚本宝典总结

以上是脚本宝典为你收集整理的JavaScript中自定义swiper组件详解全部内容,希望文章能够帮你解决JavaScript中自定义swiper组件详解所遇到的问题。

如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。
标签:swiper