zoukankan      html  css  js  c++  java
  • 小程序点击图片放大效果 单张图片 多张图片

    <block wx:for="{{effect_pic}}" wx:key="*this"  >
          <swiper-item wx:key="*this">
            <image bindtap='previewImg' data-effect_pic='{{effect_pic}}'  data-src='{{item}}' src="{{item}}" mode="aspectFill" class="slide-image" class='img' />
          </swiper-item>
        </block>
      // 图片点击放大 
      previewImg: function (e) {
        var src = e.currentTarget.dataset.src;//获取data-src  循环单个图片链接
        var imgList = e.currentTarget.dataset.effect_pic;//获取data-effect_pic   图片列表
        //图片预览
        wx.previewImage({
          current: src, // 当前显示图片的http链接
          urls: imgList // 需要预览的图片http链接列表
        })
      },

     单张图片点击放大效果

    urls必须是一个数组  且 第一个值不能为空
    <view class='honourBox'>
          <view class='honourList' wx:for="{{honor_id}}" wx:key="*this" bindtap='viewbigimg' data-licence='{{licence}}' data-name='{{item.name}}'>
            <image  class='img-honour' src='{{item.honor_pic}}'></image>
            <view>{{item.name}}</view>
          </view>
        </view>
    // 点击平台荣誉下的列表图片放大
      viewbigimg: function(e) {
        var that = this; 
        console.log(e.currentTarget.dataset.name)
        console.log(e.currentTarget.dataset.licence)
        if (e.currentTarget.dataset.name == "持证") { 
          var imgArr = [];
          imgArr[0] = e.currentTarget.dataset.licence 
          wx.previewImage({
            current: e.currentTarget.dataset.licence, //当前图片地址
            urls: imgArr
          })
        }
      }
  • 相关阅读:
    支付方法及注意事项
    网站负载均衡策略
    工作成长
    java内存机制
    关于前途的一些思考
    git记录
    关于博客
    如何为公司创造价值?
    遍历集合方法总结
    二叉树和红黑二叉树
  • 原文地址:https://www.cnblogs.com/xiaoxiao2017/p/10443359.html
Copyright © 2011-2022 走看看