微信小程序的src图片加载多张就不渲染
  <view wx:if="{{item.commentPics.length>0}}">
            <image src="{{item.commentPics}}" data-list='{{item.commentPics}}' data-src="{{item.commentPics}}" bindtap="imgOpen" data-index='{{index}}' mode="aspectFill"/>
          </view> 

两个数据图片链接拿到数据错误图片说明

单个没问题


//图片点击预览事件
 imgOpen: function (e) {
   var src = e.currentTarget.dataset.src;//获取data-src
   var imgList = e.currentTarget.dataset.list;//获取data-list
   var str = ""; 
   var newArr = [];
   str = src + "," + imgList 
   console.log(str)
   newArr = str.split(',')

wx.previewImage({
  current: newArr,
  urls:newArr,
  success: function(res) {

  },
}) 
 },
1

3个回答

图片没做循环获取吧

0
weixin_43584356
小小笔记本 少了一层for循环,昨天解决了
10 个月之前 回复

var src = e.currentTarget.dataset.src;//获取data-src
var imgList = e.currentTarget.dataset.list;//获取data-list

2
weixin_43584356
小小笔记本 不是一样吗
10 个月之前 回复

图片加上 bindload 事件

0
Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
其他相关推荐
微信小程序——渲染
数据设置动态数据用双大括号表示,数据在js的data中设置<text>{{text}}</text> data: { text: "这是文本内容" }动态修改数据this.setData({text:"这是一个新的内容..."})条件渲染wx:if在框架中,使用 wx:if="{{condition}}"来判断是否需要渲染该代码块:<view wx:if="{{condition}}"> T
微信小程序:多张图片上传
最近在写小程序的相册,需要多张图片的上传。因为小程序不支持数组的多张图片同时上传,然后根据自己的需求+借鉴网上各位大神的案例,总算搞定。分享下,不足之处,多多指教哦 页面wxml: &amp;lt;form bindsubmit=&quot;formSumbmit&quot; bindreset=&quot;formReset&quot;&amp;gt; &amp;lt;view class=&quot;modal-content&quot;&amp;gt; &amp;lt;vi...
多张图片上传 微信小程序
// 选择图片 choose_pic: function() { var that = this; var choose_pics = []; wx.chooseImage({ count: 9, // 默认9 sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图,默认二者都有 sourceType: ['camera']
微信小程序多张图片上传
微信小程序上传图片每次只能上传一张,所有很多朋友就会问想要多张图片上传怎么办? 首先,我们来看一看wx.chooseImage(object)和wx.uploadFile(OBJECT)这两个个api      示例代码是这样的: wx.chooseImage({ success: function(res) { var tempFil
微信小程序图片加载失败渲染层网络层错误
微信小程序图片加载失败 Failed to load image /pages/index/image/index.jpg : the server responded with a status of 404 (HTTP/1.1 404 Not Found)
微信小程序的条件渲染
1,wx.if 在微信小程序中,小程序是使用wx.if="{{条件}}"来判断是否渲染该代码块,用法如下: True 也可以用wx.elif和wx.else来添加一个else块,事例如下: 1}}"> 1 2}}"> 2 3 2,block wx:if wx:if是一个控制属性,需要将它添加到标签上,但是如果我们想要一次性判断多个标签,我用可以使用将多个组件包装起来,并在上
微信小程序之渲染标签
微信小程序之渲染标签 这里我只写最简单的用法,详细内容请见官方文档(嘿嘿嘿~~~) 官方文档https://mp.weixin.qq.com/debug/wxadoc/dev/framework/view/wxml/list.html ①条件渲染 前面一篇博客显示隐藏已经写了条件渲染的实际用法,不在赘述 ②列表渲染 wx:for 在组件上使用 wx:for 控制属性绑定一个数组,即可...
微信小程序视图与渲染
导入外部模板: 写好外部模板(header.xwml) 这里是头部的组件 其他页面调用: 如果一个模板页面中有两个模板,可以利用name值调用 外部模板(footer.xwml) 这是底部内容1 这是底部内容2 其他页面调用
微信小程序-列表渲染
模板弄好了,就要遍历数据了 数据是模拟好的,在datas文件夹中有list-data.js文件,这就是提前准备好的数据: list-data.js: let list_data = [ { date: 'may 19 2018', title: '教育理念', detail_img: '/images/detail/carousel/02.jpg', ...
微信小程序条件渲染
在框架中,我们用 wx:if="{{condition}}" 来判断是否需要渲染该代码块: True 也可以用 wx:elif 和 wx:else 来添加一个 else 块: 5}}"> 1 2}}"> 2 3
微信小程序--列表渲染
HTML:view class="content" wx:for="{{oneList}}" wx:key = "id" bindtap="changeText"> image src="../../images/piao1.jpeg">image> view class="txt1">{{item.act_name}}view> view>{{it
微信小程序的视图与渲染
1.组件的基本使用 &lt;button type="default" &gt; default &lt;/button&gt; &lt;button type="primary" size="{{primarySize}}" loading="{{loading}}" plain="{{plain}}" disabled="{{di...
微信小程序数据渲染
onLoad: function (options) { this.setData({ just:wx.getStorageSync("text").textarea2 }) 这种方式设置变量的话,在每一次页面刷新的话, 如果有just值有心的变化,将会更新。在触发时间中,一般都需要调用此方法对页面进行及时的渲染。 data:{ just:wx.getStorageSync("text...
微信小程序-if条件渲染
#index.wxml &lt;view&gt;今天吃啥&lt;/view&gt; &lt;view wx:if="{{condition==1}}"&gt; 饺子 &lt;/view&gt; &lt;view wx:elif="{{condition ==2}}"&gt; 馒头 &lt;/view&gt; &lt;view wx:else&gt; 面条&lt;/vie...
微信小程序-模版渲染
微信小程序的界面程序支持html语法,多加了一部分标签,如view、block、templete等。 模版渲染 index.wxml<view> <p>{{helloWord}}</p> </view>其中{{}}里面包含的内容你可以理解为一个变量,怎么让程序解析出{{helloWord}}变量在index.js 中注册这个变量var json = { data:{
微信小程序 --- for循环渲染
循环标签:wx:for &lt;view wx:for="{{['aa','bb','cc']}}"&gt; {{index}} {{item}} &lt;/view&gt; 这里的 index 和 item是微信默认的,可以自定义: &lt;view wx:for="{{['aa','bb','cc']}}" wx:for-index="a" wx:for-item="x"...
微信小程序-微信小程序渲染html
wx-mina-html-view 微信小程序渲染html 支持的特性: 大部分的普通HTML标签(未全部测试) <img>, &lt;video&gt;, &lt;audio&gt; <table>, <tr>, <th>, <td>等表格标签 <a>标签转`` HTML entities 七牛图片裁剪 自定义插件 不支持&lt;form&gt;, ,等表单元素. 使用方法 请参考pages/index目录里的文件. 拷贝html-view目录到你的项目. 在页面的js/wxml/wxss中, 引入代码: index.js // 引入HtmlParser const HtmlParser = require('../../html-view/index') // ... // 解析HTML字符串 const html = new HtmlParser('<p>hello world</p>').nodes this.setData({ html }) index.wxml index.wxss @import "../../html-view/index.wxss"; API new HtmlParse
微信小程序 - 七牛云CDN图片加载空白
由于七牛云的系统有防盗链域名白名单限制,所以微信请求时域名是微信服务器那边的。和上一篇跨域的文章一样,将七牛云增加微信服务器的白名单 参考链接: https://www.macrr.com/wechat-applet-image-404.html ...
微信小程序image图片加载完成监听
需求    在应用中显示的图片很多情况不满足业务需求,我们需要动态根据图片的宽高进行缩放或加载中显示的缺省图片,这是我没就需要监听图片加载完成回调,来看看微信小程序怎么实现图片加载完成回调。实现  1. 绑定回调    通过image标签的bindload属性绑定图片加载完成回调函数,src根据图片加载是否完成绑定是否显示缺省图:&amp;lt;image src='{{loadComplete?srcI...
微信小程序添加多张图片的问题
没有后台的微信小程序,做着练练手,想实现一个添加多张图片的功能,思路卡住了,望指教,下面是代码rnindex.jsrn//添加照片按钮点击事件rn,[code=javascript]rn addphoto: function()rn console.log('addphoto');rn var that = this;rn wx.chooseImage(rn count: 9,rn sizeType: ['original', 'compressed'],rn success: function (res) rn console.log(res);rn var tempFilePaths = res.tempFilePaths;rn console.log(res.tempFilePaths);rn // for (var i = 0; i <= tempFilePaths.length; i++)rn // that.setData( imageList: tempFilePaths[i] );rn // rn that.setData( imageList: tempFilePaths[0] );rn \rn[/code]rnrnindex.wxmlrn[code=text]rnrnrn rn 相册rn 添加图片rnrnrn[/code]
微信小程序:能否上传多张图片
微信小程序用地柜上传多张图片
微信小程序 上传多张图片
小程序会用到一些上传的模块,这里分享一下小程序原生上传的插件,转自朋友的博客。 HTML部分: &amp;lt;!-- 选择图片 --&amp;gt; &amp;lt;view class='up-pic'&amp;gt; &amp;lt;view class='flex pic-box'&amp;gt; &amp;lt;block wx:key=&quot;imgbox&quot; wx:fo...
微信小程序多张图片上传、预览
WXML部分: &lt;view class='margin-t-15 store-imgs'&gt; &lt;view class="weui_cells weui_cells_access border-b-1"&gt; &lt;a class="weui_cell font-size-14"&gt; &lt;view class="weui_cell_bd weui_cel...
微信小程序 - Promise 封装多张图片上传
前言 最近,项目需要新加一个用户发布文章的功能,因为小程序选取的图片都是临时路径,所以需要上传到服务器转为网络图片路径再发布出去。但是小程序上传图片只支持单张图片,在这种情况下图片的上传完成后输出的顺序、判断图片是否全部上传完成等,都是一些需要注意的点。在 Promise 的中有一个Promise.all的方法(简单来说就是当所有的异步请求成功后才会执行),在这个方法的帮助下,这些问题都迎刃...
微信小程序多张图片上传功能
1.首先打开相册选择图片 将图片的本地临时路径保存起来 wx.chooseImage({ count:2, success(res) { const tempFilePaths = res.tempFilePaths console.log(tempFilePaths,’__’) me.setData({ path: tempFilePaths }) } }) 2.自定义方法上传图片 ...
微信小程序之上传多张图片
之前写过一篇小程序商品发布的博客,里面有上传多张图片的功能,这里单独拿出来实现以下,小程序的upLoadFile一次只能上传一张图片,需要循环调这个接口来实现 for (var i = 0; i &lt; that.data.banner.length; i++) { wx.uploadFile({ url: app.globalData.baseUrl ...
微信小程序同时上传多张图片
1.图片选择后,路径已经存入list中: data: { images: [], //选择的图片 }, 2.调用递归上传的方法: wx.chooseImage({ var that = this count: 9, sizeType: ['original', 'compressed'], sourceType...
微信小程序中的两类渲染:条件渲染、列表渲染
1.微信小程序条件渲染 (1)wx:if判断单个组件 在微信小程序框架里,使用wx:if=”{{contition}}”来判断是否需要渲染该代码块。 &lt;view wx:if = “{{condition}}”&gt; True &lt;/view&gt; &lt;view wx:if = “{{length &gt;5}}”&gt; 1 &lt;/view&gt; &lt;view wx:e...
微信小程序video的src地址问题
1.直接从腾讯视频上审查元素获取的地址放在小程序上第二天就会失效,网上查好像是盗链问题;rn2.通过视频vid及接口获取一个json,然后再进行拼接的方法也不好用;rn3.再一个方法就是把视频上传到自己的服务器上,但是总结网上的回复在安卓和开发工具上好使,但在ios上就会黑屏;rnrn现在求方法,如何获取一个可靠的视频地址???rn
js 多张图片加载 环形进度条
css 部分使用 svg 绘制环形 1 svg{width:100px; height: 100px; margin:15% auto 25%; box-sizing:border-box; display: block;} 2 svg circle{fill:none;cx:50;cy:50;} 3 /* svg text{x:40;y:55;} 不起作用 原因不知*/ 4 sv...
微信小程序上传多张图
js 文件 // commercial/pages/message/message.js var app = getApp(); Page({ data: { shopid: '', vipower: true, //二维码中的图片框是否显示 tempFilePathsArr: [], //轮播图数组 tempFilePaths: [], //二维码 textarea: '', ...
微信小程序上传多张图片
微信小程序官方文档上传图片贼简单 wx.chooseImage({ success (res) { const tempFilePaths = res.tempFilePaths wx.uploadFile({ url: 'https://example.weixin.qq.com/upload', //仅为示例,非真实的接口地址 filePath: t...
微信小程序-初入json渲染页面
最近在弄小程序,感觉资料很少,自己是后端开发,之前自己玩过一点安卓,感觉还行挺像的 首先看一下目录吧 在pages下的是页面,js,css文件, utils目录下是工具类的js 可以引入 app全局的,app.json如下,里面的pages配置页面的新添加的页面需要配置在里面 现在我们在index.js里访问接口 我写在了onload方法里,wx.request
微信小程序 列表渲染 wx:for
wx:for 在组件上使用wx:for控制属性绑定一个数组,即可使用数组中各项的数据重复渲染该组件。 默认数组的当前项的下标变量名默认为index,数组当前项的变量名默认为item view wx:for="{{items}}"> {{index}}: {{item.message}} view> Page({    data:{       items:
微信小程序--13wxs辅助渲染
wxs是小程序的一套脚本语言,专门提供给页面进行辅助的渲染,类似于javsscript语言,这一节学习如何去使用它。 1新建一个tool.wxs文件,定义变量names 2.在index.wxml定义如下   要注意的是,wxs和js并不一样,比如说不支持es6的语法 ...
微信小程序 模板和列表渲染
今天在开发小程序的时候,需要实现一个列表文章,而且每个item的布局都一样,所以我用了模板来实现:.wxml文件&amp;lt;!--列表模板--&amp;gt; &amp;lt;template name=&quot;msgItem&quot;&amp;gt; &amp;lt;view class='content_head'&amp;gt; &amp;lt;view class='content_title'&amp;gt...
在微信小程序中渲染HTML内容
大部分Web应用的富文本内容都是以HTML字符串的形式存储的,通过HTML文档去展示HTML内容自然没有问题。但是,在微信小程序(下文简称为「小程序」)中,应当如何渲染这部分内容呢? 解决方案 wxParse 小程序刚上线那会儿,是无法直接渲染HTML内容的,于是就诞生了一个叫做「 wxParse 」的库。它的原理就是把HTML代码解析成树结构的数据,再通过小程序的模板把该数据渲染出来。 ...
关于微信小程序的列表渲染
先看一个简单的例子 wx:for 用来渲染列表,绑定的是一个数组 使用数组中各项的数据重复渲染该组件,从而形成一个列表。 index 是数组newsList的下标,newsList[index],获取当前对象 再来一个例子 item 表示当前项的变量名 以上是我用到的三个知识点,记录一下; 转载于:https://www.cnblo...
【微信小程序】二维数组列表渲染
Page({ mapData:[ [{id:11},{id:12}], [{id:21},{id:22}], [{id:31},{id:32},{id:33}] ] }) &lt;view class="container"&gt; &lt;view class="map"&gt; &lt;view wx:for="{{mapData}}"&gt; &lt;view wx:for="{{i...
微信小程序学习--基础--列表渲染
列表渲染是指将一个数组中的所有数据依次展示在页面中。&amp;lt;view wx:for=&quot;{{array}}&quot;&amp;gt; {{index}}:{{item.message}} &amp;lt;/view&amp;gt;