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

原生微信小程序轮播图点击放大<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链接列表
    })
    },
版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

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

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • 回归分析模型推广_案例分析的意义

    回归分析模型推广_案例分析的意义这个项目呢,就不需要我们做很多的数据清洗的工作了,因为我们手里的数据基本已经做好数据清洗了,我们主要需要做的就是数据可视化和文本挖掘工作。下面我们来一一介绍一下。目录1业务背景1.1分析流程概述1.2市场分类1.3产品生命周期1.4产品结构-波士顿矩阵(BCGMatrix)1.5处理项目需求的基本思路1.6项目需求例子1.7项目背景&产品架构1.8数据说明2驱虫市场的潜力分析2.1分析目的&加载数据2.1.1分析目的2.1.2加载数据2.2清洗&补全数

  • mount命令详解

    mount命令详解原文链接:https://blog.csdn.net/happy_teemo/article/details/80026906挂接命令(mount)首先,介绍一下挂接(mount)命令的使用方法,

  • android画廊无限轮播,ViewPager无限循环实现画廊式banner

    android画廊无限轮播,ViewPager无限循环实现画廊式banner先看一下效果两边显示上一个和下一个item部分布局,可以自动滚动实现:布局主要属性:android:clipChildren=”false”//允许子布局超出父布局显示xml代码:Adapter没什么特别的只要getCount()返回一个很大的值如:returnInteger.MAX_VALUE;适配器代码:packagecom.guzhc.module_demo;importandr…

  • c语言中u8,u16,u32和int区别[通俗易懂]

    c语言中u8,u16,u32和int区别[通俗易懂]c语言中u8,u16,u32和int区别为符号不同、数据范围不同、内存占用的空间不同。一、符号不同1、u8:u8表示无符1653号char字符类型。2、u16:u16表示无符号short短整数类型。3、u32:u32表示无符号int基本整数类型。4、int:int表示带符号int基本整数类型。二、数据范围不同1、u8:u8的数据范围为0~+127[0~2^8-1]。2、u16:u16的数据范围为0~+65535[0~2^16-1]。3、u32:u32的数据范围为0+2147483647[0

    2022年10月15日
  • Google资深工程师深度讲解Go语言-channel 通道 (十)

    Google资深工程师深度讲解Go语言-channel 通道 (十)

  • 安全帽识别系统的基本参数「建议收藏」

    安全帽识别系统的基本参数「建议收藏」随着鹰眸安全帽识别系统的不断落地,应用的领域不断扩大,部分客户对产品的认知还不够,下面就给大家详细介绍一下安全帽识别系统的主要参数和性能:鹰眸安全帽识别系统对监控摄像机的品牌没有要求,只要分配率不低于720P的网络彩色摄像机(支持RTSP协议)即可,兼容市面上99%的摄像机。摄像机安装高度建议在2-2.5m,水平角度大于15度,识别效果更理想识别目标距离,这个主要是跟监控摄像机的镜头参数有关,…

发表回复

您的电子邮箱地址不会被公开。

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