• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    迪恩网络公众号

微信小程序 选择图片及放大预览

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

小程序点击图片放大实现方式:使用微信小程序图片预览接口。

今天用到了上传图片的功能,在真机上测试时发现有的图片实际没有显示,有个小小的坑,分享出来,希望大家可以避免。共勉!

wxml:

<button bindtap="addPic">添加图片</button>
  <view class="imgBox" wx:for="{{imgBox}}" wx:key="index">
    <image src="{{item}}"  data-src="{{item}}" mode="aspectFill" bindtap="previewImage"></image>
  </view>

wxss:

.imgBox{width:300rpx;height:300rpx; float: left; margin:0 20rpx;}
.imgBox image { width:100%;height:100%;}

js:

Page({
  data: {
    imgBox:[],
  },
  addPic:function(){
    var _this=this;
    var imgBox=[];
    wx.chooseImage({
      count: 4, // 默认9
      sizeType: [\'original\', \'compressed\'], // 可以指定是原图还是压缩图,默认二者都有
      sourceType: [\'album\', \'camera\'], // 可以指定来源是相册还是相机,默认二者都有
      success: function (res) {
        // 返回选定照片的本地文件路径列表,tempFilePath可以作为img标签的src属性显示图片
        var tempFilePaths = res.tempFilePaths;
        for (var i = 0; i < tempFilePaths.length;i++){
          imgBox.push(tempFilePaths[i]);
        }
        _this.setData({
          imgBox: _this.data.imgBox.concat(imgBox)
        })
      }
    })
  },
  previewImage: function (e) {
    wx.previewImage({
      current: e.currentTarget.dataset.src, // 当前显示图片的http链接
      urls: this.data.imgBox // 需要预览的图片http链接列表
    })
  },
})

手动设置图片就不赘述了,就是设置imgBox,这里只用真机测试,取实际的图片。

在这里要注意,res.tempFilePaths实际返回的是一个数组,在选择多张图片时,数组的长度就是实际选择的照片张数,必须要进行循环,拿到全部的数据,页面图片才能正常全部显示。


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
微信小程序----canvas实现刮刮乐效果发布时间:2022-07-18
下一篇:
微信小程序的setData发布时间:2022-07-18
热门推荐
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap