微信小程序wx.previewImage实用案例(交流QQ群:604788754)

时间:2021-11-01 23:50:08

本案例是可以滑动预览多张图片效果。(本案例在本地配置好之后,请扫描二维码到手机滑动预览。在开发者工具上预览,滑动不是很流畅)

图片必须选择远程图片,本地图片无法实现预览。

或是通过wx.chooseImage上传的图片数组。

微信开发者工具:0.18.182200

欢迎对小程序开发有兴趣的朋友加群(604788754)交流学习。

WXML:

<block  wx:for="{{pictures}}" wx:for-item='item' wx:for-index='idx'>
<view class="wrap">
<image class="wramimg" src="{{item}}" data-index="{{idx}}" bindtap="previewImage"></image>
</view>
</block>

WXSS:

.wrap{
width: 100px;
height: 100px;
float: left;
margin-right: 15px;
}
.wramimg{
width: 100px;
height: 100px;
}

JS:

Page({
data: {
pictures: [
'https://p0.meituan.net/movie/ea4ac75173a8273f3956e514a4c78018253143.jpeg',
'https://p0.meituan.net/movie/5d4fa35c6d1215b5689257307c461dd2541448.jpeg',
'https://p0.meituan.net/movie/0c49f98a93881b65b58c349eed219dba290900.jpg'
]
},
previewImage: function (e) {
var index = e.currentTarget.dataset.index;
var pictures = this.data.pictures;
wx.previewImage({
current: pictures[index],
urls: pictures
})
}
})

预览前效果:

微信小程序wx.previewImage实用案例(交流QQ群:604788754)

在手机端预览后效果:

微信小程序wx.previewImage实用案例(交流QQ群:604788754)

微信小程序wx.previewImage实用案例(交流QQ群:604788754)的更多相关文章

  1. 【微信小程序】微信小程序wx&period;previewImage预览图片

    一.小知识 二.例子,配合轮播图使用效果更佳!(如图1) 1.wxml <scroll-view scroll-y="true"> <swiper catchta ...

  2. 微信小程序知识总结及案例集锦

    微信小程序知识总结及案例集锦 微信小程序的发展会和微信公众号一样,在某个时间点爆发 学习路径 微信小程序最好的教程肯定是官方的文档啦,点击这里直达 微信官方文档 认真跟着文档看一遍,相信有vue前端经 ...

  3. 微信小程序wx&period;request接口

    微信小程序wx.request接口 wx.request是小程序客户端与服务器端交互的接口 HTTPS 请求 一个微信小程序,只能同时(同时不能大于5个)有5个网络请求 wx.request(OBJE ...

  4. 监控微信小程序wx&period;request请求失败

    在微信小程序里,与后台服务器交互的主要接口函数是wx.request(),用于发起 HTTPS 网络请求.其重要性不言而喻.然而,却经常遇到请求失败的问题,笔者特意谷歌"wx.request ...

  5. 微信小程序wx&period;showActionSheet调用客服信息功能

    微信小程序wx.showActionSheet调用客服消息功能 官方文档的代码: wx.showActionSheet({ itemList: ['A', 'B', 'C'], success (re ...

  6. 微信小程序wx&period;chooseImage和wx&period;previewImage的综合使用(图片上传可以限制个数)

    本例从微信小程序的组件扒下来的. WXML: <view class="weui-cell"> <view class="weui-cell__bd&q ...

  7. 微信小程序 wx&period;uploadFile在安卓手机上面the same task is working问题解决

    微信小程序上传图片的时候,如果是多图片上传,一般都是直接用一个循环进行wx.uploadFile 这个在电脑上面测试与苹果手机上面都不会有什么问题 但当用安卓测试的时候,你会发现小程序会提示一个the ...

  8. 微信小程序wx&period;navigateTo层叠5次限制,特殊情况的建议

    小程序页面的实例使用栈的数据结构存储,栈内元素最多5个(换一种方式说,就是用户最多能点击5次返回),微信小程序能在栈中相对高层某个页面调用其他相对低层的页面实例的方法. 小程序三种页面跳转API 的区 ...

  9. 微信小程序wx&period;request请求用POST后台得不到传递数据

    微信小程序的wx.request请求,method设为POST并向后台传递数据,但从后台返回的信息来看后台并没有获得传递的数据 wx.request({              url: 'url' ...

随机推荐

  1. js参数arguments的理解

    原文地址:js参数arguments的理解 对于函数的参数而言,如下例子 function say(name, msg){ alert(name + 'say' + msg); } say('xiao ...

  2. java简单日历

    一.使用java的calendar类写一个简单的日历 package com.calendar; import java.util.Calendar; import java.util.Date; i ...

  3. Andriod项目开发实战(2)——JSON和XML的区别

    详情见: 1.http://www.cnblogs.com/SanMaoSpace/p/3139186.html 2.http://www.cnblogs.com/yank/p/4028266.htm ...

  4. 12&period;java&period;lang&period;NoSuchMethodException

    java.lang.NoSuchMethodException 方法不存在异常 当程序试图通过反射来创建对象,访问(修改或读取)某个方法,但是该方法不存在就会引发异常

  5. MindManager 安装注册

    正版现在998元,对于个人用户来说是不是太贵了.直接下载的还不能打开,挺奇怪.

  6. MongoDB基础之七 用户管理

    MongoDB的用户管理 注意:A)在mongodb中,有一个admin数据库, 牵涉到服务器配置层面的操作,需要先切换到admin数据.即 use admin , -->相当于进入超级用户管理 ...

  7. BOM&comma;Dom 回顾

    加给元素: offsetLeft(距离定位父级的距离)/offsetTop(距离定位父级的距离)/offsetWidth(可视宽度)/offHeight(可视高度) clientLeft(左边框宽度) ...

  8. 记录Datagrid使用的一些事项

    1.将两个列的文本拼接到一起并显示,如列1为name,列2为code,需要显示name(code).如:小明(123) 则初始化datagrid时在columns[]里加入:列1添加formatter ...

  9. SQLServer&&num;160&semi;学习笔记之超详细基础SQL语句&&num;160&semi;Part&&num;160&semi;12(The&&num;160&semi;End&rpar;

    Sqlserver 学习笔记 by:授客 QQ:1033553122 -----------------------接Part 11------------------- 现在,我们希望从 &quot ...

  10. POJ 2923 Relocation(状压DP&plus;01背包)题解

    题意:给你汽车容积c1,c2,再给你n个包裹的体积,问你最少运几次能全运走 思路:用2进制表示每次运送时某物在不在此次运送之中,1在0不在.我们把运送次数抽象成物品价值,把状态抽象成体积,用一个dp[ ...