微信小程序 swiper 显示图片计数 当前/总数
<view class="swiperContainer">
<swiper bindchange="swiperChange" autoplay="{{autoplay}}" duration="{{duration}}" style='height: 380rpx;'>
<block wx:for="{{imgUrls}}" wx:key="*this">
<swiper-item wx:key="*this">
<image src="{{item}}" class="slide-image" class='img' />
</swiper-item>
</block>
</swiper>
<view class="imageCount">{{current+}}/{{imgUrls.length}}</view>
</view>
.swiperContainer {
position: relative;
}
.img {
width: %;
height:100%;
}
.imageCount {
width:120rpx;
height:50rpx;
background-color: rgba(, , , 0.3);
border-radius:40rpx;
line-height:50rpx;
color:#fff;
text-align:center;
font-size:26rpx;
position:absolute;
left:13px;
bottom:20rpx;
}
Page({
data: {
duration:"",
imgUrls: [
'https://cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/b51889744910df7979a2f672434da84e.jpg?thumb=1&w=720&h=360',
'https://cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/37dfdc929ee9a4313facb0b23ebcd721.jpg?thumb=1&w=720&h=360',
'https://cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/a0ff3dc30027f3b615bfe03f1d306ee5.jpg?thumb=1&w=720&h=360',
'https://cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/2320573b3be643e29f5270a97e1a9c1d.jpg?thumb=1&w=720&h=360'
],
current:
},
swiperChange: function (e) {
var that = this;
if (e.detail.source == 'touch') {
that.setData({
current: e.detail.current
})
}
},
onLoad: function (options) {
var that = this;
},
onReady: function () { },
onShow: function () { }, /**
* 用户点击右上角分享
*/
onShareAppMessage: function () { }
})
微信小程序 swiper 显示图片计数 当前/总数的更多相关文章
- 微信小程序点击图片放大预览
微信小程序点击图片放大预览使用到 wx.previewImage 接口,可以放大.上/下一张 上代码 wxml代码 <view class='content-img' wx:if="{ ...
- 微信小程序实现显示和隐藏控件-头像-取值-bindblur事件
微信小程序实现显示和隐藏控件 .wxml: <view class=" {{showOrHidden?'show':'hidden'}}"></view> ...
- 微信小程序中显示html富文本的方法
微信小程序中显示html富文本的方法 使用方法:git地址:https://github.com/icindy/wxParse 一.下载wxParse文件 二.在要引入的页面的js文件中,引入文件 j ...
- 微信小程序简单封装图片上传组件
微信小程序简单封装图片上传组件 希望自己 "day day up" -----小陶 我从哪里来 在写小程序的时候需要上传图片,个人觉得官方提供的 Uploader 组件不是太好用, ...
- 微信小程序swiper实现 句子控app首页滑动卡片
微信小程序swiper实现 句子控app首页滑动卡片 引言:最近看到句子控APP首页的效果很清新,可是发现他的微信小程序端没有实现这个功能,我看了一下难度不大,于是尝试着去实现. 实现效果如下: 1. ...
- 微信小程序开发之图片预览
实现图片的展示和大图预览 使用wx.previewImage(OBJECT)来实现 OBJECT参数说明: 参数 类型 必填 说明 current String 否 当前显示图片的链接,不填则默认为 ...
- 微信小程序之裁剪图片成圆形
前言 最近在开发小程序,产品经理提了一个需求,要求微信小程序换头像,用户剪裁图片必须是圆形,也在github上看了一些例子,一般剪裁图片用的都是方形,所以自己打算写一个小组件,可以把图片剪裁成圆形,主 ...
- 微信小程序之base64图片如何预览与一键保存到本地相册?
需求:由于后台服务器各方面的限制,现在服务器返回的图片是base64格式的,小程序端需要支持预览图片和多个图片一键下载功能 一.如何预览base64位图片? WXML页面:item.src的值是bas ...
- 绑定bindchange事件的微信小程序swiper闪烁,抖动问题解决,(将微信小程序切换到后台一段时间,再打开微信小程序,会出现疯狂循环轮播,造成抖动现象)
微信小程序开发文档-组件-swiper后面追加的新闻如上图所示: 如果在bindchange事件给swiper的current属性对应的值{{current}}赋值,就会造成抖动现象. bindcha ...
随机推荐
- Python3 tkinter基础 event keysym 查看按键的按键名
Python : 3.7.0 OS : Ubuntu 18.04.1 LTS IDE : PyCharm 2018.2.4 Conda ...
- 【做题】CF196E. Opening Portals 排除无用边&最小生成树
题意:给出一个有\(n\)个结点,\(m\)条边的连通无向图,边有边权,等于经过这条边所需的时间.有\(k\)个点设有传送门.一开始,所有传送门关闭.你从\(1\)号点出发,每当你到达一个有传送门的点 ...
- activiti 5.13流程图连线名称不显示bug修复
使用modeler设计器,流程图连线名称是有显示的,但是运行结果却没显示.找到网上2遍文章,说是activiti框架中的一个bug,要修改 DefaultProcessDiagramGenerator ...
- C盘清理
魔方清理大师 “清理大师”->清理界面 一键清理=>开始扫描=>立刻清理 注册表清理=>开始扫描=>立刻清理 深度清理=>开始扫描=>立刻清理 C:\User ...
- sql server数据库自动备份
SqlServer 数据库自动备份的两种解决方案 SQL Server中的角色(服务器级别和数据库级别角色) SqlServer服务器角色和数据库角色相关操作
- 【Web Service】
Restful: (Representational State Transfer 表现层[指客户端]状态[指服务器端]转化) RPC: RPC 风格的开发关注于服务器/客户端之间的方法调用, 而并 ...
- P1182 数列分段`Section II`
传送门 思路: 求数列每段和的最大值的最小值,很明显是用二分法求解,加贪心检验.本题关键是要怎么去高效的check,可以考虑一个贪心的思路,能加的就加上,不能则新开一段,so对于二分的值 u ,我们从 ...
- 详细解说Tomcat 设置虚拟路径的几种方法及为什么设置虚拟路径
说明:此次使用的是Tomcat 7.0 很多朋友都会很疑惑,既然我们都知道在Tomcat服务器上部署项目只要将项目打包,然后放到webapps目录下就可以了,为什么还需要配置虚拟路径?的确,把项目放到 ...
- Centos7默认自带了Python2.7版本,但是因为项目需要使用Python3.x,这里提供一种比较快捷方便的安装方式
安装必要工具 yum-utils: $ sudo yum install yum-utils 使用yum-builddep为Python3构建环境,安装缺失的软件依赖,使用下面的命令会自动处理.$ s ...
- scala函数式编程(一)
scala函数编程特点: 1.Scala函数使用命名参数: 即函数参数传递的实参与函数名相对应,与函数位置不对应. object Test { def main(args: Array[String] ...