小程序图片预览wx.previewImage使用

1.wxml

<!-- 图片 -->
<view class='detailheda_pic'>
  <block wx:for="{{imglist}}" wx:for-item="img">
    <image class='detailheda_pic_img' src='{{img}}' data-src="{{img}}" bindtap="previewImage"></image>
  </block>
</view>
<!-- 图片张数展示 -->
<view class='detailheda_btn flex'>
  <view class='detailheda_btn_icon'></view>
  <view class='detailheda_btn_num'>{{imglist.length}}</view>
</view>

2.wxss

.detailheda_pic {
  width: 750rpx;
  height: 370rpx;
  overflow: hidden;
}

.detailheda_pic_img {
  width: 750rpx;
  height: 370rpx;
}

.detailheda_btn {
  padding: 0 17rpx;
  height: 40rpx;
  line-height: 40rpx;
  background-color: rgba(0, 0, 0, 0.5);
  border-radius: 40rpx;
  -webkit-border-radius: 40rpx;
  -moz-border-radius: 40rxp;
  position: absolute;
  top: 42rpx;
  right: 25rpx;
}

.flex {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  display: box;
  flex-wrap: wrap;
}

.detailheda_btn_icon {
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAaCAYAAACgoey0AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTM4IDc5LjE1OTgyNCwgMjAxNi8wOS8xNC0wMTowOTowMSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTcgKFdpbmRvd3MpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjhBMzUxNjcwODk5NzExRThBM0NEQzlDQ0I4N0ZEQ0JFIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjhBMzUxNjcxODk5NzExRThBM0NEQzlDQ0I4N0ZEQ0JFIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6OEEzNTE2NkU4OTk3MTFFOEEzQ0RDOUNDQjg3RkRDQkUiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6OEEzNTE2NkY4OTk3MTFFOEEzQ0RDOUNDQjg3RkRDQkUiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz7moPiJAAAB3UlEQVR42sTWSyhEURzH8TsM4xULKSGRHbLAhhIhj0gUyQI7GwtlaWVlx4qFoqRYKERIhFh6LEh57CzYiCLGIxPff/3V7TbDNOZepz4zZzj87j1zzv9cl9frNWhVGEEeIg17mg9n6Memi+ByOjtwGc60T7RI8AGdYhxjGK82BcagD0WS5ealQH8xhDmb7/YZ88iP4CXa9EO725u+R0YY/9TsCE4zzaIjwR4s4Rp3aHMquBNN2k/AONxOBCdbPieGGpwCKS5lyAgiWKbZa/kcsCb4u6JW3eillgs7RC/2A/yvc5SgA1eY+ukqpXJ9ar8RL9j6YfwH2rEQ4tfRgBV/U/2AG6yjDkn6XTVqgZcZmkbOXxeEdaqPkO5n3KpO8QlSMYFKLfi2F5BbDGq/Al0BxsksFSIznPt4EhfaH9OFFKVHajUWtXgc6QKT9/pwBMvi6tFDPR6zeMSTHO5otjxIyJ2vYdR63odSQPY04NZ0zsaZ1kiXFpNcXYiGbsPc3/ZxME22RBZqdbG96D4/NY25RzdmkI1L/Zs/BRtapRaDGLfh1LEY9HZ61368A3me7ydOtxYFedgbQKyl0IezxeoZIO30+/F228Fpl2rXLGG7qNE799kY6NNVL1nLXwIMAM6cafFc5tYfAAAAAElFTkSuQmCC);
  width: 30rpx;
  height: 40rpx;
  background-size: 30rpx 26rpx;
  background-repeat: no-repeat;
  background-position: center;
}

.detailheda_btn_num {
  color: #fff;
  font-size: 30rpx;
  margin-left: 10rpx;
}

3.js

// 5/5.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    // 查看图片地址集合
    imglist: ['http://demo.sc.chinaz.com/Files/DownLoad/webjs1/201801/jiaoben5647/img/5.jpg', 'http://demo.sc.chinaz.com/Files/DownLoad/webjs1/201801/jiaoben5647/img/1.jpg', 'http://demo.sc.chinaz.com/Files/DownLoad/webjs1/201801/jiaoben5647/img/2.jpg']
  },
  previewImage: function(e) {
    var current = e.target.dataset.src;
    wx.previewImage({
      current: current, // 当前显示图片的http链接  
      urls: this.data.imglist // 需要预览的图片http链接列表  
    })
  },

})

4.效果

5.说明

官方api地址：https://developers.weixin.qq.com/miniprogram/dev/api/media-picture.html#wxchooseimageobject

小程序图片预览wx.previewImage使用

猜你喜欢