mpvue微信小程序怎么写轮播图,和官方微信代码的差别
目前用mpvue很多第三方的ui库是引入不了的,因为它不支持含有dom操作。
那我们要做轮播图的话一个是手写另外一个就是用小程序的swiper组件了:
官方代码:
<swiper indicator-dots="{{indicatorDots}}"
autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}">
<block wx:for="{{imgUrls}}">
<swiper-item>
<image src="{{item}}" class="slide-image" width="355" height="150"/>
</swiper-item>
</block>
</swiper>
mpvue微信代码:
<swiper class="swiper" indicator-dots="true" autoplay="true" interval="5000" duration="1000">
<block v-for="(item, index) in movies" :index="index" :key="key">
<swiper-item>
<image :src="item.url" class="slide-image" mode="aspectFill"/>
</swiper-item>
</block>
</swiper>
注意我们改动的几个地方:
1.所有双括号是要去掉的,否则报错
2.wx:for要改成v-for(后面一定要有:index和:key不然报错)
3.src的绑定要加冒号
4.最好加个:key="key",不加不会报错,但是有警告,看着不舒服。
原文链接:https://blog.csdn.net/weixin_39818813/article/details/80636875
mpvue微信小程序怎么写轮播图,和官方微信代码的差别的更多相关文章
- 微信小程序之swiper轮播图中的图片自适应高度
小程序中的轮播图很简单,官方都有例子的,但是唯一的缺陷就是swiper是固定死的150px高度,这样如果传入的图片大于这个高度就会被隐藏.辣么,怎样让图片自适应不同分辨率捏. 我的思路是:获取屏幕宽度 ...
- 微信小程序-swiper(轮播图)抖动问题
ps:问题 组件swiper(轮播图)真机上不自动滚动 一直卡在那里抖动 以前遇到这个问题,官方一直没有正面回复.就搁置了,不过有大半年没写小程序了也没去关注,今天就去看了下官方文档,发觉更新了点好东 ...
- 【微信小程序】获取轮播图当前图片下标、滑动展示对应的位数、点击位数展示对应图片
业务需求: 3个图片轮番播放,可以左右滑动,点击指示点可以切换图片 index.wxml: 这里使用小程序提供的<swiper>组件autoplay:自动播放interval:自动切换时 ...
- 如何使用微信小程序制作banner轮播图?
在前端工程师的工作中,banner是必不可少的,那缺少了DOM的小程序是如何实现banner图的呢?如同其他的框架封装了不同的banner图的方法,小程序也封装了banner的方法,来让我一一道来: ...
- 全栈项目|小书架|微信小程序-首页水平轮播实现
首页效果 首页功能主要有 搜索(下篇文章介绍) 图书列表 图书列表 分析一波: 列表是水平滑动 点击列表会有按压效果:布局整体缩小 每个布局的信息从上到下排列分别是:图片.书名.作者.出版社 每个布局 ...
- 微信小程序之 3d轮播(swiper来实现)
以前写过一篇3d轮播,就是这篇,使用的方法比较笨拙,而且代码不简洁.这次发现swiper也能实现同样的效果.故记录一下. 先看看效果: wxml: <swiper previous-margin ...
- 微信小程序自运营器 微信小程序自动运营器(让你的微信小程序,公众号零运营成本,24小时全自动运营)
自动发单,自动评价,自动评论,自动推广 微信小程序自运营器 微信小程序自动运营器(让你的微信小程序,公众号零运营成本,24小时全自动运营) 我们会根据你的微信公众号或微信小程序定制开发带有一定AI智 ...
- 微信小程序初探--写个扫雷分享给你玩
闲暇里,想学一下微信小程序, 于是,用微信小程序原生做了个扫雷玩. 以下略作总结,分享给大家. 微信里下拉,输入[mini计算器], 看到这个图标的就是了: 说好的扫雷,怎么变成计算器了?原因后面解释 ...
- 原生JavaScript(js)手把手教你写轮播图插件(banner)
---恢复内容开始--- 1.轮播图插件 1.什么是插件: 为已有的程序增加功能 2.插件的特点(为什么要做成一个插件)与注意事项: 1.通用性,可移植性强 2.兼容性:不会对其他代码产生影响 3.创 ...
随机推荐
- 【Java实用工具】——使用oshi获取主机信息
最近在筹划做一个监控系统.其中就要获取主机信息,其中遇到一些问题.在此做个记录,以便以后查阅. 在该监控系统中,想要做到主机的CPU.内存.磁盘.网络.线程.JVM内存.JVM GC 等维度的监控,J ...
- Java 添加、读取、删除Excel文本框
本文介绍通过Java程序添加文本框到Excel的方法,添加文本框时,可以添加文本.设置文本方向.文本对齐方式.设置文本框大小.位置.填充色/填充图片.文本框旋转角度.文本框名称.可选文本.文本框隐藏或 ...
- Python xlsxwriter模块
1.简介: xlsxWriter支持多种excle功能:与excel完美兼容:写大文件,速度快且只占用很小的内存空间不支持读或者改现有的excel文件 2.安装: pip install xlsxwr ...
- 机器学习——详解经典聚类算法Kmeans
本文始发于个人公众号:TechFlow,原创不易,求个关注 今天是机器学习专题的第12篇文章,我们一起来看下Kmeans聚类算法. 在上一篇文章当中我们讨论了KNN算法,KNN算法非常形象,通过距离公 ...
- (转)嵌入式linux系统开发过程中遇到的——volatile
原文地址:http://blog.csdn.net/HumorRat/article/details/5631023 对于不同的计算机体系结构,设备可能是端口映射,也可能是内存映射的.如果系统结构支持 ...
- (转)协议森林08 不放弃 (TCP协议与流通信)
协议森林08 不放弃 (TCP协议与流通信) 作者:Vamei 出处:http://www.cnblogs.com/vamei 欢迎转载,也请保留这段声明.谢谢! TCP(Transportation ...
- IPFS(星际文件系统)-初步接触
〇.IPFS介绍 从HTTP到IPFS,星际文件系统能变革信息传播的方式吗? 戴嘉乐:详解IPFS的本质.技术架构以及应用 以下为实现相关摘要 1.存储 在IPFS中,信息可以存储进IPFS系统中的块 ...
- 组件/ 外层数据初始化时候,不应该触发 on-change 事件
组件/ 外层数据初始化时候,不应该触发 on-change 事件 watch: { value (value) { this.noOnChange = true // 外层传值 不触发on-chang ...
- JavaScript初学者
学习如逆水行舟,不进则退.要逆流而上,逆战! 学习JavaScript这门语言,作为一个初学者,最重要的就是扎实的基础. 只要有了扎实的功底,在后期的学习中才能来去自如的应对各种逻辑难题 下面我们就来 ...
- 从一个小例子引发的Java内存可见性的简单思考和猜想以及DCL单例模式中的volatile的核心作用
环境 OS Win10 CPU 4核8线程 IDE IntelliJ IDEA 2019.3 JDK 1.8 -server模式 场景 最初的代码 一个线程A根据flag的值执行死循环,另一个线程B只 ...