<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 显示图片计数 当前/总数的更多相关文章

  1. 微信小程序点击图片放大预览

    微信小程序点击图片放大预览使用到 wx.previewImage 接口,可以放大.上/下一张 上代码 wxml代码 <view class='content-img' wx:if="{ ...

  2. 微信小程序实现显示和隐藏控件-头像-取值-bindblur事件

    微信小程序实现显示和隐藏控件 .wxml: <view class=" {{showOrHidden?'show':'hidden'}}"></view> ...

  3. 微信小程序中显示html富文本的方法

    微信小程序中显示html富文本的方法 使用方法:git地址:https://github.com/icindy/wxParse 一.下载wxParse文件 二.在要引入的页面的js文件中,引入文件 j ...

  4. 微信小程序简单封装图片上传组件

    微信小程序简单封装图片上传组件 希望自己 "day day up" -----小陶 我从哪里来 在写小程序的时候需要上传图片,个人觉得官方提供的 Uploader 组件不是太好用, ...

  5. 微信小程序swiper实现 句子控app首页滑动卡片

    微信小程序swiper实现 句子控app首页滑动卡片 引言:最近看到句子控APP首页的效果很清新,可是发现他的微信小程序端没有实现这个功能,我看了一下难度不大,于是尝试着去实现. 实现效果如下: 1. ...

  6. 微信小程序开发之图片预览

    实现图片的展示和大图预览 使用wx.previewImage(OBJECT)来实现 OBJECT参数说明: 参数 类型 必填 说明 current String 否 当前显示图片的链接,不填则默认为 ...

  7. 微信小程序之裁剪图片成圆形

    前言 最近在开发小程序,产品经理提了一个需求,要求微信小程序换头像,用户剪裁图片必须是圆形,也在github上看了一些例子,一般剪裁图片用的都是方形,所以自己打算写一个小组件,可以把图片剪裁成圆形,主 ...

  8. 微信小程序之base64图片如何预览与一键保存到本地相册?

    需求:由于后台服务器各方面的限制,现在服务器返回的图片是base64格式的,小程序端需要支持预览图片和多个图片一键下载功能 一.如何预览base64位图片? WXML页面:item.src的值是bas ...

  9. 绑定bindchange事件的微信小程序swiper闪烁,抖动问题解决,(将微信小程序切换到后台一段时间,再打开微信小程序,会出现疯狂循环轮播,造成抖动现象)

    微信小程序开发文档-组件-swiper后面追加的新闻如上图所示: 如果在bindchange事件给swiper的current属性对应的值{{current}}赋值,就会造成抖动现象. bindcha ...

随机推荐

  1. Basic Mathematics You Should Mastered

    Basic Mathematics You Should Mastered 2017-08-17  21:22:40  1. Statistical distance  In statistics,  ...

  2. 案例2:用一条SQL查询出数学语文成绩都大于80分的学生姓名?

    方法1: 查出科目成绩有小于80分的学生姓名,再约束并去重学生不等于查出来的姓名 select distinct A.name from t_score A where A.name not in(s ...

  3. Images之Dockerfile中的命令2

    COPY COPY has two forms: COPY [--chown=<user>:<group>] <src>... <dest> COPY ...

  4. mybatis配置文件resultMap标签的使用

    本文为博主原创,未经允许不得转载: resultMap标签是为了映射select查询出来结果的集合,其主要作用是将实体类中的字段与 数据库表中的字段进行关联映射. 注意:当实体类中的字段与数据库表中的 ...

  5. VHDL 乐曲演奏电路设计

    前言 无源蜂鸣器在直流信号下不会响,需要方波驱动.输入不同频率的方波会发出不同音调的声音,方波的幅值决定了声音的响度. 目标 乐曲发生电路在节拍(4Hz)的控制下根据乐谱产生合适的分频系数.分频器根据 ...

  6. SpringBoot学习(二)

    spring-boot-starter-parent Maven的用户可以通过继承spring-boot-starter-parent项目来获得一些合理的默认配置.这个parent提供了以下特性: 默 ...

  7. HDU 4309 Seikimatsu Occult Tonneru(最大流+二进制枚举)

    http://acm.hdu.edu.cn/showproblem.php?pid=4309 题意: 有n个城市,每个城市有num[i]个居民,有敌人要进行地毯式轰击,居民们要逃到隧道去.现在有隧道, ...

  8. HDU 5573 Binary Tree(构造题)

    http://acm.hdu.edu.cn/showproblem.php?pid=5573 题意:给出一个满二叉树,根节点权值为1,左儿子为2*val,右儿子为2*val+1.现在有只青蛙从根节点出 ...

  9. HDU 5724 Chess(SG函数+状态压缩)

    http://acm.split.hdu.edu.cn/showproblem.php?pid=5724 题意: 现在有一个n*20的棋盘,上面有一些棋子,双方每次可以选择一个棋子把它移动到其右边第一 ...

  10. 前端面试题 | JS部分(附带答案)

    目前在找工作,所以各方收集了一堆面试题.其实刷面试题的过程也能更新自己对知识的认识,所以也提醒自己多看多理解.如果对下面题目有更深理解,会实时更新.遇到新题目,也会不定时更新.希望能帮助到部分朋友- ...