微信小程序五（创建轮播图）

应用中最常见的就是轮播图了，今儿个就讲讲微信小程序中轮播图的使用

轮播图，不外乎俩个要素，跳转链接和图片地址

1. 设置数据

我在 pages/test/test.js中添加如下数据

//test.js
//获取应用实例
var app = getApp()
Page({data: {imgUrls: [{link:'/pages/index/index',url:'http://img02.tooopen.com/images/20150928/tooopen_sy_143912755726.jpg' },{link:'/pages/logs/logs',url:'http://img06.tooopen.com/images/20160818/tooopen_sy_175866434296.jpg' },{link:'/pages/test/test',url:'http://img06.tooopen.com/images/20160818/tooopen_sy_175833047715.jpg' } ],indicatorDots: true,autoplay: true,interval: 5000,duration: 1000,userInfo: {}},onLoad: function () {console.log('onLoad test');}
})

其中 imgUrls 是我们轮播图中将要用到的图片地址和跳转链接

indicatgorRots 是否出现焦点

autoplay 是否自动播放

interval 自动播放间隔时间

duration 滑动动画时间

更多样式编辑请参看文档 https://mp.weixin.qq.com/debug/wxadoc/dev/component/swiper.html?t=1475052054228

2. 部署到页面

找到文件 pages/test/test.wxml

<swiper indicator-dots="{{indicatorDots}}"autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}"><block wx:for="{{imgUrls}}"><swiper-item><navigator url="{{item.link}}" hover-class="navigator-hover"><image src="{{item.url}}" class="slide-image" width="355" height="150"/></navigator> </swiper-item></block>
</swiper>

注意： swiper 千万不要在外面加上任何标签例如 <view> 之类的，如果加了可能会导致轮播图出不来

3. 添加页面样式

创建文件 pages/test/test.wxss

.slide-image{width: 100%;
}

加上上面的样式可以使轮播图的宽度达到100% 然后更漂亮点，当然可以根据自己的喜好罗！

看效果

微信小程序五（创建轮播图）相关推荐

php实现轮播图代码,微信小程序实例：轮播图的代码实现与分析
本篇文章给大家带来的内容是关于微信小程序实例:轮播图的代码实现与分析,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 本文来说说轮播图,最常见的一个轮播图,中间带小圆点,自动轮播. S ...
微信小程序：swiper轮播图添加外层圆角
微信小程序:swiper轮播图添加外层圆角 .swiper-wrap{overflow: hidden;border-radius: 8rpx;box-sizing: border-box;width ...
微信小程序的swiper轮播图中的图片设置自适应高度的一种方法
微信小程序的swiper轮播图中的图片设置自适应高度的一种方法小程序中的轮播图很简单,但是唯一的缺陷就是 swiper 是固定的150px 高度(320px 宽度),这样如果传入的图片大于这个高度就 ...
微信小程序swiper图片尺寸_微信小程序之swiper轮播图中的图片自适应高度的方法...
小程序中的轮播图很简单,官方都有例子的,但是唯一的缺陷就是swiper是固定死的150px高度,这样如果传入的图片大于这个高度就会被隐藏.辣么,怎样让图片自适应不同分辨率捏. 我的思路是:获取屏幕宽度 ...
微信小程序swiper图片尺寸_微信小程序之swiper轮播图中的图片自适应高度
小程序中的轮播图很简单,官方都有例子的,但是唯一的缺陷就是swiper是固定死的150px高度,这样如果传入的图片大于这个高度就会被隐藏.辣么,怎样让图片自适应不同分辨率捏. 我的思路是:获取屏幕宽度 ...
微信小程序实现3D轮播图
在写微信小程序时,有写到实现3D轮播图的效果,可以直接使用微信小程序中自带的组件swiper来实现效果图如下: 1.swiper的相关属性 indicator-dots 是否显示小圆点,也可以自己重 ...
微信小程序开发 | 02 - 轮播图实现（swiper组件）
一.实现思路轮播图基于微信小程序提供的swiper组件(文档)实现. swiper组件中使用到下列属性: display-multiple-items:同时显示的滑块数量 current:当前所在滑 ...
微信小程序之swiper轮播图
微信小程序,一个不是app胜似app的开发工具,更加准确的说是开发途径,给非专业开发app的同学们提供了一个绝妙的选择轮播图几乎是每一个网站.app必有得一个展示区,用于醒目自己的特点.特色.了解微 ...
微信小程序自定义swiper轮播图面板指示点|小圆点|进度条
描述: 在工作中开发一个页面,多少都会用到轮播图,但是由于微信官方提供的轮播图swiper组件局限性太大了,所以接下来我会教大家怎么去自定义轮播图的进度条. 简单修改: 如果你的项目只是简单的修改小圆 ...
微信小程序点击轮播图跳转到微信公众号文章
一.获取微信公众号文章列表要想获取微信公众号的文章列表,需要登录公众号运行账号,进行一下相关的设置. 1.1微信公众号获取文章列表 api接口文档: https://developers.weixi ...

微信小程序五（创建轮播图）

1. 设置数据

2. 部署到页面

3. 添加页面样式

微信小程序五（创建轮播图）相关推荐

最新文章

热门文章