【微信小程序】小程序点击图片放大(图片预览)

这个强大的API( wx.previewImage() ),嘿嘿嘿!接下来我们来讲一下小程序>微信小程序图片点击放大预览的实现步骤!

思路:

1.点击事件

2.放大

3.左右滑动查看上、下一张

在绑定点击事件的时候我们需要同时获取到点击图片的url和这一组数据的ID(通过这个id从数据里面找到你点击的这一组数据然后从中取出这一组图片就可以了)

index.wxml


 <view class='topic_answerImg'>
              
    <block wx:for='{
  {item.answerImg}}' wx:key='index' wx:for-item='answerItem'>
        <image bindtap='topic_preview' data-id='{
  {item.id}}' data-url='{
  {answerItem}}' class='topic_answer_itemImg' src='{
  {answerItem}}'></image>
    </block>

</view>

 注意:上面获取的ID是这一组数据的id不是这个图片的id

index.wxss

.topic_answerImg{
  width: 100%;
  display: -webkit-box;

http://www.niftyadmin.cn/n/1499109.html

相关文章

《UG NX8.0中文版完全自学手册》一1.2 工作环境

本节书摘来自异步社区《UG NX8.0中文版完全自学手册》一书中的第1章&#xff0c;第1.2节&#xff0c;作者 刘昌丽 , 周进&#xff0c;更多章节内容可以访问云栖社区“异步社区”公众号查看 1.2 工作环境 UG NX8.0中文版完全自学手册本节介绍UG的主要工作界面及各部分功能&#…

【微信小程序】小程序获取元素的宽度高度

微信小程序不能进行DOM操作&#xff0c;所以获取元素的信息就不能按照常规手法来做了。首先需要借助微信给我们开发者提供的一个API来实现返回一个SelectorQuery 对象实例。 接下来就好办多了&#xff0c;话不多说&#xff0c;上代码&#xff01; API&#xff1a;wx.createSel…

《思科UCS服务器统一计算》一1.2 数据中心的演变

本节书摘来自异步社区《思科UCS服务器统一计算》一书中的第1章&#xff0c;第1.2节&#xff0c;作者 【美】Silvano Gai , Tommi Salli , Roger Andersson&#xff0c;更多章节内容可以访问云栖社区“异步社区”公众号查看 1.2 数据中心的演变 思科UCS服务器统一计算本节介绍数…

【微信小程序】小程序选择图片、上传、预览、删除

1.了解所需要用到的API 1.1wx.chooseImage(Object object) 从本地相册选择图片或使用相机拍照。 参数如下: count9最多可以选择的图片张数sizeType[original, compressed]所选的图片的尺寸sourceType[album, camera]选择图片的来源success 接口调用成功的回调函数fail 接口…

《数据库技术原理与应用教程第2版》——1.4数据管理

本节书摘来自华章出版社《数据库技术原理与应用教程第2版》一书中的第1章&#xff0c;第1.4节&#xff0c;作者 徐洁磐 操凤萍  &#xff0c;更多章节内容可以访问云栖社区“华章计算机”公众号查看。 1.4数据管理 人类社会有着巨大的数据资源&#xff0c;为有效地使用它们&am…

【CSS】css3绘制各种形状图形三角形,菱形,五角星,椭圆等

1.制作圆形&#xff1a; 要使用CSS来制作一个圆形&#xff0c;我们需要一个div&#xff0c;被给它设置一个ID <div id"ang"></div> 圆形在设置CSS时要设置宽度和高度相等&#xff0c;然后设置border-radius属性为宽度或高度的一半即可&#xff1a; …

面向机器智能的TensorFlow实践》一 2.6 安装Jupyter Notebook

本节书摘来自华章出版社《面向机器智能的TensorFlow实践》一书中的第2章&#xff0c;第2.6节&#xff0c;作者 山姆亚伯拉罕&#xff08;Sam Abrahams&#xff09;丹尼亚尔哈夫纳&#xff08;Danijar Hafner&#xff09;[美] 埃里克厄威特&#xff08;Erik Erwitt&#xff09;…

【微信小程序】微信小程序层级跳转限制

前面博文上面提到微信小程序有三种常见的跳转方式 navigateTo,redirectTo 和 reLaunch 10层的限制只是针对navigateTo ,redirectTo 和reLaunch不受此限制。 navigateTo :保留当前页面,跳转到应用内的某个页面,使用wx.navigateBack可以返回到原页面。 redirectTo :关闭…