原生微信小程序轮播图点击放大

原生微信小程序轮播图点击放大<swiperclass=”index-adcs-sqiper”indicator-dots=”{{indicatorDots}}”interval=”{{interval}}”duration=”{{duration}}”circular=”{{circular}}”style…

大家好,又见面了,我是你们的朋友全栈君。

  <swiper class="index-adcs-sqiper" 
         indicator-dots="{ 
   {indicatorDots}}" 
         interval="{ 
   {interval}}"
         duration="{ 
   {duration}}" 
         circular="{ 
   {circular}}" 
         style="width:100%;height:{ 
   {advHeight}}rpx;" >
          <block wx:for="{ 
   {goods.thumbs}}" wx:for-index="idx" wx:for-item="item" wx:key="thumb_key">
            <swiper-item >
                  <image bindload="{ 
   {idx == 0 ? 'imageLoad' : ''}}" src="{ 
   {item}}" class="goodsadvimg "  data-src='{ 
   {item}}' data-list='{ 
   {goods.thumbs}}'  bindtap="previewImage"></image>
            </swiper-item>          
          </block>
    </swiper>

image标签中的 data-src=’{
{item}}’ data-list=’{
{goods.thumbs}}’ bindtap=“previewImage” 是解决轮播图片可点击放大的解决代码。
参见微信小程序中的图片预览api~

    previewImage:function(e){ 
      
        var current=e.target.dataset.src;
    var imgList=e.target.dataset.list
        console.log(123,e,imgList,current)
    //图片预览
    wx.previewImage({ 
   
      current: current, // 当前显示图片的http链接
      urls: imgList // 需要预览的图片http链接列表
    })
    },
版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请联系我们举报,一经查实,本站将立刻删除。

发布者:全栈程序员-站长,转载请注明出处:https://javaforall.net/143678.html原文链接:https://javaforall.net

(0)
全栈程序员-站长的头像全栈程序员-站长


相关推荐

  • 什么叫一层交换机,二层交换机,三层交换机?

    什么叫一层交换机,二层交换机,三层交换机?

    2021年12月1日
    103
  • 音视频传输基本知识[通俗易懂]

    音视频传输基本知识[通俗易懂]音视频传输时的基本步骤:1.发起会话(Sip协议)2.编码(硬件编码、软件编码)3.传输(RTP)4.解码(硬件解码、软件解码)5结束会话(Sip协议)视频格式视频格式可以分为适合本地播放的本地影像视频和适合在网络中播放的网络流媒体影像视频两大类。尽管后者在播放的稳定性和播放画面质量上可能没有前者优秀,但网络流媒体影像视频的广泛传播性使之正被广泛应用于视频点播、网络演示

    2022年10月3日
    0
  • sigterm信号_一文吃透 PHP 进程信号处理

    sigterm信号_一文吃透 PHP 进程信号处理背景前两周老大给安排了一个任务,写一个监听信号的包。因为我司的项目是运行在容器里边的,每次上线,需要重新打包镜像,然后启动。在重新打包之前,Dokcer会先给容器发送一个信号,然后等待一段超时时间(默认10s)后,再发送SIGKILL信号来终止容器现在有一种情况,容器中有一个常驻进程,该常驻进程的任务是不断的消费队列里的消息。假设现在要上线,需要关杀掉容器,Docker给容器里跑的常驻进程发送一个…

    2022年10月23日
    0
  • setfacl 命令[通俗易懂]

    setfacl 命令[通俗易懂]setfacl命令是用来在命令行里设置ACL(访问控制列表)。在命令行里,一系列的命令跟随以一系列的文件名。选项-b,–remove-all:删除所有扩展的acl规则,基本的acl规则(所有者,群组,其他)将被保留。-k,–remove-default:删除缺省的acl规则。如果没有缺省规则,将不提示。-n,–no-mask:不要重新计算有效权限。setfacl…

    2022年6月16日
    53
  • Linux之telnet命令[通俗易懂]

    Linux之telnet命令[通俗易懂]telnet命令通常用来远程登录,默认端口是23。telnet程序是基于TELNET协议的远程登录客户端程序。Telnet协议是TCP/IP协议族中的一员,是Internet远程登陆服务的标准协议和主

    2022年7月3日
    24
  • BigDecimal 除法

    BigDecimal 除法文章目录BigDecimal除法除法常用方法示例舍入模式ROUND_UPROUND_DOWNROUND_CEILINGROUND_FLOORROUND_HALF_UPROUND_HALF_DOWNROUND_HALF_EVENROUND_UNNECESSARYBigDecimal除法除法常用方法divide(BigDecimaldivisor,intscale,introundingMode)参数释义divisor被除数scale保留小数位roun

    2022年6月14日
    27

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

关注全栈程序员社区公众号