点击预览大图功能

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. 第2层交换和生成树协议(STP)__MAC地址表

    1.MAC(Media Access Control, 介质访问控制)地址是识别LAN节点的标识.网卡的物理地址通常是由网卡生产厂家烧入网卡的EPROM(一种闪存芯片,通常可以通过程序擦写),它存储的 ...

  2. 如何为Kafka集群确定合适的分区数以及分区数过多带来的弊端

    通过之前的文章<Kafka分区分配策略>和<Kafka高性能揭秘>,我们了解到:Kafka高吞吐量的原因之一就是通过partition将topic中的消息保存到Kafka集群中 ...

  3. Java程序操作HBase

    package com.zy.test; import java.io.IOException; import org.apache.hadoop.conf.Configuration; import ...

  4. B - How Many Tables (多少桌)

    题目大致意思: 有n个人在一起吃饭,有些人互相认识.认识的人想坐在一起,不想跟陌生人坐.例如A认识B,B认识C,那么A.B.C会坐在一张桌子上. 给出认识的人,问需要多少张桌子 Today is Ig ...

  5. PAT(乙级)2020年秋季考试

    比赛链接:https://pintia.cn/market/item/1302816969611366400 7-1 多二了一点 (15分) 题解 模拟. 代码 #include <bits/s ...

  6. 阅读笔记:ImageNet Classification with Deep Convolutional Neural Networks

    概要: 本文中的Alexnet神经网络在LSVRC-2010图像分类比赛中得到了第一名和第五名,将120万高分辨率的图像分到1000不同的类别中,分类结果比以往的神经网络的分类都要好.为了训练更快,使 ...

  7. Educational Codeforces Round 102 (Rated for Div. 2) D. Program (思维,前缀和)

    题意:给你一个只含\(+\)和\(-\)的字符串,给你一个数\(x\),\(x\)初始为\(0\),随着字符串的遍历会加一减一,现在有\(m\)个询问,每个询问给出一个区间\([l,r]\)表示将这个 ...

  8. Codeforces 1144F Graph Without Long Directed Paths DFS染色

    题意: 输入一张有向图,无自回路和重边,判断能否将它变为有向图,使得图中任意一条路径长度都小于2. 如果可以,按照输入的边的顺序输出构造的每条边的方向,构造的边与输入的方向一致就输出1,否则输出0. ...

  9. SPI/QSPI通信协议详解和应用

    SPi是高速全双工的串行总线,通常应用在通讯速率较高的场合. SS:从设备选择信号线,也称片选信号线 每个从设备都有一个独立的SS信号线,信号线独占主机的一个引脚,及有多少个从设备就有多少个片选信号线 ...

  10. 二进制安装kubernetes(四) kube-scheduler组件安装

    介绍资料转载地址:https://www.jianshu.com/p/c4c60ccda8d0 kube-scheduler在集群中的作用 kube-scheduler是以插件形式存在的组件,正因为以 ...