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

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

在这里插入图片描述

总结

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

您可能感兴趣的文章:

小程序中实现获取全部数据的图文教程
最近在开发中遇到了一个需求,需要获取小程序的全部数据,所以这篇文章主要给大家介绍了关于小程序中实现获取全部数据的相关资料,需要的朋友可以参考下
2022-11-11
利用JavaScript实现春节倒计时效果(移动端和PC端)
这篇文章主要介绍了通过Html+Css+js如何实现春节倒计时效果，本文同时介绍了移动端和PC端两种效果，感兴趣的同学可以跟随小编一起动手试试
2022-01-01
JS实现屏蔽网页右键复制及ctrl+c复制的方法【2种方法】
这篇文章主要介绍了JS实现屏蔽网页右键复制及ctrl+c复制的方法,结合实例形式分析了2种比较常用的屏蔽复制功能的技巧,需要的朋友可以参考下
2016-09-09
JS+CSS实现网页加载中的动画效果
这篇文章主要为大家详细介绍了JS+CSS实现网页加载中的动画效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2017-10-10
微信小程序自定义顶部组件customHeader的示例代码
这篇文章主要介绍了微信小程序自定义顶部组件customHeader的相关知识，本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
2020-06-06
利用JavaScript模拟京东快递单号查询效果
这篇文章主要为大家介绍了如何通过JavaScript模拟实现京东的快递单号查询效果，文中的示例代码讲解详细，感兴趣的小伙伴可以动手试一试
2022-03-03
JavaScript如何动态监听DOM元素高度详解
这篇文章主要为大家详细介绍了JavaScript如何动态监听DOM元素高度，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助
2022-07-07
Javascript模仿淘宝信用评价实例(附源码)
这篇文章主要介绍了Javascript模仿淘宝信用评价功能实现方法,以完整实例形式分析了JavaScript响应鼠标事件动态改变页面元素的相关技巧,并附带了完整的实例代码供读者下载参考,需要的朋友可以参考下
2015-11-11
JS实现针对给定时间的倒计时功能示例
这篇文章主要介绍了JS实现针对给定时间的倒计时功能,结合具体实例形式分析了javascript日期时间的正则判定与动态运算相关操作技巧,需要的朋友可以参考下
2017-04-04
js有趣的非空判断函数 + ?? 实现
本文介绍了JS中空值合并操作符??的用法,包括如何使用它来判断数据是否为“合法数据”,即非空字符串、非undefined和非null,下面就一起来了解一下,感兴趣的可以了解一下
2024-09-09