JavaScript中自定义swiper组件详解

更新时间：2021年08月24日 15:43:28 作者：海轰Pro

这篇文章主要介绍了微信小程序 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"
    ],
  },

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

在这里插入图片描述

总结

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

您可能感兴趣的文章:

自己的js工具 Event封装
说到浏览器中的event,相信不少人都很头疼,ie的event大部分时候都可以获取到
2009-08-08
微信小程序实现聊天室功能
这篇文章主要为大家详细介绍了微信小程序实现聊天室功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2021-06-06
关于B/S判断浏览器断开的问题讨论
前台页面五分钟，自己刷新一次，所以最多只有五分钟的差错。
2008-10-10
JS关键字变色实现思路及代码
JS关键字变色详细很多朋友都很想实现吧接下来将执行以下几个步骤：1.替换关键字，对字体变色2.用正则，CSS背景变色;该方法可结合前台JS调用，感兴趣的朋友可以参考下，希望可以帮助到你
2013-02-02
js常用的继承--组合式继承
本篇文章主要介绍了js常用的继承--组合式继承的相关知识，具有很好的参考价值。下面跟着小编一起来看下吧
2017-03-03
JavaScript 模拟用户单击事件
单击一个按钮或超链接，然后会出现其他的超链接，这时要让其中的一个超链接被单击，以显示一个初始页面。（公司页面使用了frameset）很显然，之后的超链接单击事件需要通过JavaScript来触发。
2009-12-12
javascript中创建对象的几种方法总结
以下几种，是javascript中最常用的创建对象的方式。初学者看到后，可能会晕掉，甚至会觉得担心。其实完全不用担心，这些种方式，只需要掌握一两种，对其他的几种只需要理解就好了
2013-11-11
JavaScript中数组随机排序的实现详解
这篇文章主要为大家详细介绍了JavaScript中数组随机排序的实现，主要是利用原地算法和sort/shuffle算法，感兴趣的小伙伴可以跟随小编一起学习一下
2022-11-11
微信小程序列表渲染功能之列表下拉刷新及上拉加载的实现方法分析
这篇文章主要介绍了微信小程序列表渲染功能之列表下拉刷新及上拉加载的实现方法,结合实例形式分析了微信小程序列表下拉刷新及上拉加载的相关实现方法与技巧操作,需要的朋友可以参考下
2017-11-11
JS网页播放声音实现代码兼容各种浏览器
JS网页播放声音有多种方法可以实现，不过兼容各种浏览器的就没有几个了，不过本文的这个示例或许对大家有所帮助
2013-09-09