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

原生微信小程序轮播图点击放大<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)
全栈程序员-站长的头像全栈程序员-站长


相关推荐

  • css float属性用法_不属于float的常用属性

    css float属性用法_不属于float的常用属性clear:both表示不允许左右两边的floatclear:left表示不允许左边floatclear:right表示不允许右边float

    2025年8月30日
    6
  • vector释放内存之swap方法

    相信大家看到swap这个词都一定不会感到陌生,就是简单的元素交换。但swap在C++STL中散发着无穷的魅力。下面将详细的说明泛型算法swap和容器中的swap成员函数的使用!1.泛型算法swa

    2021年12月28日
    44
  • 网络传输的两种方式——同步传输和异步传输的区别[通俗易懂]

    网络传输的两种方式——同步传输和异步传输的区别[通俗易懂]在网络通信过程中,通信双方要交换数据,需要高度的协同工作。为了正确的解释信号,接收方必须确切地知道信号应当何时接收和处理,因此定时是至关重要的。在计算机网络中,定时的因素称为位同步。同步是要接收方按照发送方发送的每个位的起止时刻和速率来接收数据,否则会产生误差。通常可以采用同步或异步的传输方式对位进行同步处理。1.异步传输(AsynchronousTransmission):异步传输…

    2022年4月19日
    273
  • JDBC+Servlet+JSP整合开发之28-JSP_标准标签(JSTL)

    JDBC+Servlet+JSP整合开发之28-JSP_标准标签(JSTL)

    2021年8月6日
    54
  • java webservice服务端和客户端创建(JAX-WS)[通俗易懂]

    java webservice服务端和客户端创建(JAX-WS)[通俗易懂]idea:2020jdk:1.8目录1.搭建webservice服务端1.1新建一个java空项目1.2项目建好后,右键项目,选择“AddFrameworkSupport…”1.3生成wsdl,右键类的时候可能没有WebServices这个选项了,可以在Tools中找到这个功能1.4启动服务,右键HelloWorld启动项目1.5访问web服务1.6增加一个方法看看效果2.搭建webservice客户端2.1新建一个java空项目2.2项目生成好后会弹框出来,把wsdl地址放

    2022年7月13日
    21
  • Linux renice_free linux

    Linux renice_free linuxLinuxnice和renice命令教程(7个示例)Linux命令行的威力可以从以下事实来衡量:您甚至可以使用命令行工具轻松调整进程的调度优先级。是的,这是可能的,在本教程中,我们将讨论如何使用nice和renice实用程序来实现这一点。但在这之前,值得一提的是本文中的所有示例都已在Ubuntu16.04LTS系统上进行了测试。Linuxnice和renice命令尽管nice命令允许您以修…

    2025年6月8日
    3

发表回复

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

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