【微信小程序|组件库】自定义swiper组件
前言
Hello!小伙伴!
非常感谢您阅读海轰的文章,倘若文中有错误的地方,欢迎您指出~
自我介绍 ଘ(੭ˊᵕˋ)੭
昵称:海轰
标签:程序猿|C++选手|学生
简介:因C语言结识编程,随后转入计算机专业,有幸拿过国奖、省奖等,已保研。目前正在学习C++/Linux(真的真的太难了~)
学习经验:扎实基础 + 多做笔记 + 多敲代码 + 多思考 + 学好英语!
效果展示
组件设置
步骤1
在pages目录下,新建文件夹components
步骤2
在components下建立新文件夹swiper
在swiper目录下,新建4个文件,分别为
- swiper.js
- swiper.json
- swiper.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"],},
最后只需要编译代码 就可以得到效果图了
结语
文章仅作为学习笔记,记录从0到1的一个过程
希望对您有所帮助,如有错误欢迎小伙伴指正~
可复制粘贴代码位见
【微信小程序|组件库】自定义swiper组件相关推荐
- 利用微信小程序weui库的SearchBar组件实现简易搜索功能
鉴于搜索对象的数据类型简单,简单list就可以处理,故直接存在下面的hosList里面:当然一般还是应该单拿出个文件来存数据: 先上index.js代码: var value = ''; var ho ...
- 《微信小程序-进阶篇》Lin-ui组件库源码分析-列表组件List(一)
大家好,这是小程序系列的第二十篇文章,在这一个阶段,我们的目标是 由简单入手,逐渐的可以较为深入的了解组件化开发,从本文开始,将记录分享lin-ui的源码分析,期望通过对lin-ui源码的学习能加深组 ...
- 微信小程序简易搭建之框架/组件库
微信小程序简易搭建之框架/组件库 Vant weapp 下面看看如何导入 https://github.com/youzan/vant-weapp 使用教程: 1.下载后找到dist 2. 在你的项目 ...
- 微信小程序如何封装自己的组件?
在现在前端领域,最常见的话语就是组件化.工程化的内容.所有的框架都在朝着这方面发展.作为前端生态中的新兴热人物小程序的出现,同样支持组件化开发. 在我们的日常开发中,可以封装一些常用的组件达到复用效果 ...
- 微信小程序 select 下拉框组件
一.源码地址 GitHub - imxiaoer/WeChatMiniSelect: 微信小程序 select 下拉框组件 二.效果图 录屏图片质量较差,所以大家会看到残影(捂脸) 三.组件源码 1. ...
- 微信小程序用vant自定义tabbar页面并跳转相应页面
0.前置安装 步骤一 安装 vant 组件库 npm i @vant/weapp -S --production 下载完后要npm构建才能使用 步骤二 修改 app.json 将 app.json 中 ...
- 微信小程序之callout自定义气泡
最近闲着踩踩地图的坑,一脚下去差点没从坑里爬起来,然后由于某个原因,去研究了微信小程序里面地图callout 这个属性 callout呢,是在标记的点上面显示 一个 气泡,作为提示用 最后展示下 效果 ...
- 微信小程序底部实现自定义动态Tabbar
多图警告!!! 最近在工作中遇到这样一个需求:微信小程序底部的Tab需要通过判断登录人的角色动态进行改变,想要实现这个功能依靠小程序原生的Tabbar是不可能实现的了,所以研究了一下自定义Tab,这里 ...
- 微信小程序scroll-view实现自定义刷新
微信小程序scroll-view实现自定义刷新@TOC 先说原生页面级的刷新 通常我们可以利用微信小程序的onPullDownRefresh函数(下拉刷新监听函数)和onReachBottom函数(上 ...
- ZanUI-WeApp -- 一个颜值高、好用、易扩展的微信小程序 UI 库
ZanUI-WeApp -- 一个颜值高.好用.易扩展的微信小程序 UI 库:https://cnodejs.org/topic/589d625a5c8036f7019e7a4a 微信小程序之官方UI ...
最新文章
- [umeditor] 多图片一次上传功能
- .net 基元类型,引用类型和值类型
- C语言 __STDC__ - C语言零基础入门教程
- 腾讯QQ看点信息流推荐业务:内容分发场景的多目标架构实践
- [转载] python画柱状图-Python绘制精美图表之双柱形图
- HTTP权威指南 笔记
- 二分图完全匹配算法之匈牙利算法
- dwg如何转换成pdf?
- Python-开根号的几种方式
- mysql 加权_mysql/stats:加权平均值以突出平均值的差异
- 3.计蒜客ACM题库.A1597 结果填空:年龄
- 本地html图片载入很慢,打开网页时图片加载很慢怎么办?网页图片打开慢的解决方法...
- zabbix3.4绘制网络拓扑图
- 微信小程序手把手教你实现类似Android中ViewPager控件效果
- android 电量性能优化
- MFC中使用OpenCasCade示例
- OWA动态密码短信认证方案,解决outlook邮件双因子认证问题
- requests.session()会话保持
- 武汉工商简单校园导游系统
- 移动通信的语音与数据漫游