博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
微信小程序wx.previewImage实用案例(交流QQ群:604788754)
阅读量:6291 次
发布时间:2019-06-22

本文共 831 字,大约阅读时间需要 2 分钟。

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

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

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

微信开发者工具:0.18.182200

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

WXML:

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    })  }})

预览前效果:

在手机端预览后效果:

转载地址:http://ajkta.baihongyu.com/

你可能感兴趣的文章
sql操作命令
查看>>
zip 数据压缩
查看>>
Python爬虫学习系列教程
查看>>
【数据库优化专题】MySQL视图优化(二)
查看>>
【转载】每个程序员都应该学习使用Python或Ruby
查看>>
PHP高级编程之守护进程,实现优雅重启
查看>>
PHP字符编码转换类3
查看>>
rsync同步服务配置手记
查看>>
http缓存知识
查看>>
Go 时间交并集小工具
查看>>
iOS 多线程总结
查看>>
webpack是如何实现前端模块化的
查看>>
TCP的三次握手四次挥手
查看>>
关于redis的几件小事(六)redis的持久化
查看>>
webpack4+babel7+eslint+editorconfig+react-hot-loader 搭建react开发环境
查看>>
Maven 插件
查看>>
初探Angular6.x---进入用户编辑模块
查看>>
计算机基础知识复习
查看>>
【前端词典】实现 Canvas 下雪背景引发的性能思考
查看>>
大佬是怎么思考设计MySQL优化方案的?
查看>>