mpvue微信小程序怎么写轮播图,和官方微信代码的差别
2020-02-01 21:36
435 查看
目前用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
转载于:https://www.cnblogs.com/Webzhoushifa/p/9557300.html
- 点赞
- 收藏
- 分享
- 文章举报
相关文章推荐
- 微信小程序3D轮播实现代码
- 微信小程序怎么上传代码
- 微信小程序实现两边小中间大的轮播效果的示例代码
- 微信小程序,求绘制图片阴影的代码怎么写
- 微信官方小程序基础教程 - 代码构成
- 微信小程序「官方示例代码」剖析【下】:运行机制
- 微信小程序实现两边小中间大的轮播效果的示例代码
- 微信小程序代码怎么用工具打开看
- 微信小程序代码怎么用工具打开看
- 微信小程序入门——怎么建多个项目?(导入官方Demo程序进行学习)
- 微信小程序「官方示例代码」浅析【上】
- 微信小程序图片轮播
- 微信小程序怎么申请 从零开始做一个微信小程序教程
- 微信小程序代码上传、审核发布小程序
- 微信小程序支付PHP代码
- 微信小程序--使用微信官方demo解密userinfo加密数据
- 微信小程序之判断页面滚动方向的示例代码
- 微信小程序之视图容器(swiper)组件创建轮播图
- 微信小程序bindtap事件怎么获取当前点击标签?
- 学习微信官方代码---关键字自动回复