微信小程序视图容器(swiper)组件创建轮播图
网络编程 2021-07-04 16:46www.168986.cn编程入门
这篇文章主要为大家详细介绍了微信小程序视图容器(swiper)组件创建轮播图,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
一、视图容器(Swiper)
1、swiper:滑块视图容器
二、swiper应用
1、页面逻辑(index.js)
Page({ data: { imgUrls: [ { link: '/pages/index/index', url: '/images/001.jpg' }, { link: '/pages/list/list', url: '/images/002.jpg' }, { link: '/pages/list/list', url: '/images/003.jpg' } ], indicatorDots: true, //小点 indicatorColor: "white",//指示点颜色 activeColor: "coral",//当前选中的指示点颜色 aulay: false, //是否自动轮播 interval: 3000, //间隔时间 duration: 3000, //滑动时间 }
其中 imgUrls 是我们轮播图中将要用到的 图片地址和 跳转链接
indicatgorDots 是否出现焦点
aulay 是否自动播放
interval 自动播放间隔时间
duration 滑动动画时间
2、页面结构(index.wxml)
<!--轮播图--> <swiper indicator-dots="{{indicatorDots}}" aulay="{{aulay}}" interval="{{interval}}" duration="{{duration}}" indicator-color="{{indicatorColor}}" indicator-active-color="{{activeColor}}"> <block wx:for="{{imgUrls}}"> <swiper-item> <navigator url="{{item.link}}" hover-class="navigator-hover"> <image src="{{item.url}}" class="slide-image" width="355" height="200" /> </navigator> </swiper-item> </block> </swiper>
注意:swiper 千万不要在外面 加上任何标签 例如 <view> 之类的 ,如果加了可能会导致轮播图出不来
3、页面样式(index.wxss)
/*轮播图*/ .slide-image { width: 100%; }
三、小程序效果图
赶快动手实践就可以看到如图所示效果图:
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持狼蚁SEO。
编程语言
- 机械手焊接机器人编程 机械手焊接设备编程
- vb数据库编程实例,vb做数据库
- tiobe世界编程语言排行榜,全球编程语言排行
- 成都java编程培训 成都it编程培训中心
- 编程基础培训,编程基础知识培训
- flash游戏编程基础教程,flash游戏开发教程
- 不会英语能学编程吗 不会英语可以学程序员吗
- 爱心代码编程C语言 爱心代码编程c语言公式
- c语言编程学习入门 c语言编程快速入门
- 西门子plc编程培训 西门子plc编程培训班
- 哪里可以学编程 台州哪里可以学编程
- 少儿编程哪个好 少儿编程哪个品牌好
- 编程是什么意思,图形编程是什么意思
- c语言编程软件下载,c语言编程软件在哪下载
- java编程软件下载,java编程下载手机版
- ug编程培训学校,ug编程培训教程