微信小程序开发实现图片滚动效果

效果：左右滑动可以切换展示图片

代码：

<!--pages/test/test.wxml-->
<!-- 组件 -->
<swiper><swiper-item wx:for="{{imgUrls}}"><image src='{{item}}' width="335" height="150" mode='widthFix' class='img' /></swiper-item>
</swiper>

// pages/test/test.js
Page({data: {imgUrls:['http://dl.bizhi.sogou.com/images/1440x900/2014/05/14/611368.jpg','http://dl.bizhi.sogou.com/images/1440x900/2013/10/19/394877.jpg',                'http://img04.sogoucdn.com/app/a/100520093/ca86e620b9e623ff-d72d635343d5bade-dcf2acda7a45cb44f172db138bdf8d2d.jpg',]},//事件处理函数toupper:function(){console.log("触发了toupper");}
})

/* pages/test/test.wxss */
.img{width: 100%;
}

运行结果：（jif图片展示）

心得：

swiper组件：滑块视图容器。
可以为swiper添加autoplay属性，是之自动播放，例如：autoplay=”true”
制衣swiper组件中使用的是image单标签，而不是双标签（否则报错）。

-END-

微信小程序开发实现图片滚动效果相关推荐

微信小程序开发(二)图片上传
更新2017-08-24 更新七牛SDK只最新7.0.5版本. 在之前的博客<Node.js+express+MySQL使用七牛云实现的用户头像修改>,已经实现了在MUI框架或者< ...
微信小程序开发：实现毛玻璃效果
前言在微信小程序开发的时候,也会遇到一些和在前端开发一样的样式需求,二者的相通类似性非常的高,就拿样式相关的需求来说,可以说是一模一样的操作.那么本文就来分享一个关于实现高斯模糊效果的需求,微信小程 ...
微信小程序开发—背景图片全屏（无白条）
目录错误示例正确示例正确代码段错误示例微信小程序开发过程中,为了增加界面的美观程度,可以尝试将一张图片设置为背景.在网上最主要的方法为: index.wxml <view class= ...
微信小程序开发实现轮番图效果swiper 组件
轮番效果在很多的网站主页或者手机应用端都能看到,在微信小程序中使用swiper组件来实现图片轮番,今天的小例子效果如下: 为了方便演示我将动画切换的间隔调整为3s,现实项目中一般为5s,具体看项目需求 ...
微信小程序开发之图片上传+Java服务端接收
闲言少叙直入正题前端代码在网上一搜一大堆,且搜出来的结果基本上是正确的,没啥好说的,我连代码都不想贴(如果有时间的话明天整理下贴在文章结尾,没时间的话就不贴了).但是,但是,但是,靠谱的,不用改动就 ...
微信小程序开发基础图片与声音
设计一个小程序,小程序运行后显示一张图,点击图片会发出声音. 实现效果: 各页面源代码:  <view class="box"& ...
微信小程序开发之图片压缩方案
目录前言: 问题:现有的压缩方案支付宝小程序不生效解决方案: uni.createCanvasContext(canvasId, this) 核心代码展示:
【微信小程序开发】— 图片显示错误：VM24966:2
VM24966:2 Failed to load image http://1042065718.debug.open.weixin.qq.com/pages/detail/detail/detail ...
解决微信小程序开发中wxss中不能用本地图片
微信小程序开发中wxss中不能用本地图片,我们可以用将我们的图片传到服务器上,然后直接引用在线地址.但是当我们没有服务器时,我们可以用"图床",这个具体可以百度.这里我们用第二种方 ...

微信小程序开发实现图片滚动效果

微信小程序开发实现图片滚动效果

微信小程序开发实现图片滚动效果相关推荐

最新文章

热门文章