点击预览大图功能

1、 给轮播图swiper-item绑定点击事件

2、 预览功能的本质是调用了小程序的api:previewImage

微信公众号----文档----开发----API----媒体----图片----wx.previewImage

输入wx-previewImage,删除后面三个参数。

先构造要预览的图片数组，数组中的值为pics数组中pics_mid,但是此时在handlePreviewImage方法中拿不到goodsObj,为了方便获取属性，我们可以设置一个全局对象，

然后在请求成功之后给goodsInfo赋值即可。

然后通过map方法获取数组中的特定属性重新组成的数组

点击事件触发，接收传递过来的图片url,通过自定义属性的方式传参。

微信小程序：点击预览大图功能的更多相关文章

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

    需求:当点击图片时,当前图片放大预览,且可以左右滑动 实现方式:使用微信小程序图片预览接口 我们可以看到api需要两个参数,分别通过下面的data-list和data-src来传到js中 wxml代码 ...

  2. 原创：跳坑指南——微信小程序真机预览跟本地不同的问题

    微信小程序中出现最多的一个问题,就是真机跟本地不同:我简单列举一些我发现的原因,给大家参考,大家也可以把自己发现的东西回复给我,给我参考:本地看不到数据,就先让本地能看到数据,再看本帖.... 1:本 ...

  3. 微信小程序真机预览跟本地不同的问题。原文地址：https://blog.csdn.net/qq_27187991/article/details/69664247/

    微信小程序中出现最多的一个问题,就是真机跟本地不同:我简单列举一些我发现的原因,给大家参考,大家也可以把自己发现的东西回复给我,给我参考: 本地看不到数据,就先让本地能看到数据,再看本帖....特别提 ...

  4. 【微信小程序】微信小程序wx.previewImage预览图片

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

  5. 微信小程序：图片预览

    wxml页面: <image src='{{UPLOAD_IMAGES_URL}}{{vv.img_s}}' data-src="{{vv.img}}" bindtap=&q ...

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

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

  7. 微信小程序点击控制元素的显示与隐藏

    微信小程序点击控制元素的显示与隐藏 首先我们先来看一下单个点击效果 我们来看一下wxml中的代码: <view class="conten"> <view cla ...

  8. 微信小程序0.11.122100版本新功能解析

    微信小程序0.11.122100版本新功能解析   新版本就不再吐槽了,整的自己跟个愤青似的.人老了,喷不动了,把机会留给年轻人吧.下午随着新版本开放,微信居然破天荒的开放了开发者论坛.我很是担心官方 ...

  9. 微信小程序点击保存图片到本地相册——踩坑

    在微信小程序中要保存图片到本地相册,需要获取相册权限. 总之整个功能实现下来需要如下几个小程序的API:wx.getSetting,wx.authorize,wx.openSetting,wx.dow ...

随机推荐

  1. SpringMVC系列（一）核心：处理请求流程

    http://blog.csdn.net/zhaolijing2012/article/details/41596803

  2. AcWing 238.银河英雄传说 (边带权并查集)

    题意:有\(n\)列,有\(T\)条指令,若指令格式为\(M\),则将第\(i\)号的所有战舰移到第\(j\)号所在列的后面,若指令格式为\(C\),询问\(i\)和\(j\)是否在同一列,如果在,问 ...

  3. python爬虫笔记Day01

    python爬虫笔记第一天 Requests库的安装 先在cmd中pip install requests 再打开Python IDM写入import requests 完成requests在.py文 ...

  4. java通过HttpClient调用接口总结

    2.HttpClient 2.1简介: 最近看项目的代码,看到工程中有两个jar包张的很像,一个是commons.httpclient-3.1.jar,一个是httpclient4.2.1.jar,很 ...

  5. HTTP笔记4--HTTP 状态码

    状态码作用.组成 HTTP 状态码负责表示客户端 HTTP 请求的返回结果.标记服务器端的处理是否正常.通知出现的错误等工作.状态码的职责是当客户端向服务器端发送请求时,描述返回的请求结果. 状态码如 ...

  6. 【转】Docker 核心技术与实现原理

    转自:https://draveness.me/docker 提到虚拟化技术,我们首先想到的一定是 Docker,经过四年的快速发展 Docker 已经成为了很多公司的标配,也不再是一个只能在开发阶段 ...

  7. PAT l2-010 排座位 【并查集】

    L2-010. 排座位 时间限制 150 ms 内存限制 65536 kB 代码长度限制 8000 B 判题程序 Standard 作者 陈越 布置宴席最微妙的事情,就是给前来参宴的各位宾客安排座位. ...

  8. Object & prototype & __proto__ All In One

    Object & prototype & proto All In One js 原型,原型链,原型对象 const obj ={}; // {} const obj = new Ob ...

  9. play games for learning web skills

    play games for learning web skills CSS flexbox https://codepip.com/games/flexbox-froggy/ CSS grid ht ...

  10. whiteboard & coding interview practice

    whiteboard & coding interview practice 白板 & 面试 & 编码练习 Algorithm https://www.freecodecamp ...