上面这个需求我说的似乎不太明白,之前也是没有碰到过,也是最近在搞小程序,涉及到小程序前后台数据交互,展示的部分!!不太明白没关系等会我给大家举个例子,就明白了说起来有点拗口,一看就明白了,其实如果是原生js开发,并不要这么做,就因为小程序它把一些东西绑到了视图层上了,例如:for循环,当你拿到的数据格式不对时,所以就会在展示数据的时候你就需要做一点点处理,当然了如果你们后台能给到你正好需要的格式那你就轻松,万一不是你需要的正好的格式那就需要你自己去做些处理!!

例子:

例如下面这个界面:

其实在wxml视图层就一个for循环就搞定了!

wxml:

<view class="page-header">
  <text class="page-header-text">{{title}}</text>
</view>
<scroll-view scroll-y="true">
  <navigator class="navigator" url="../audio/audio?id={{item.muId}}" wx:for="{{imagescoverArr}}">
    <view class="Name">
      <view style="color:red; display:inline-block;">{{item.faName}}</view>
      <view style="color: #F4F4F4; display:inline-block; margin-left:6rpx;">{{item.nickname}}</view>
    </view>
    <view>
      <image class="image" src="{{item.imcsrc}}"></image>
    </view>
    <view class="muName">{{item.muName}}</view>

  </navigator>

</scroll-view>

那么现在问题出现了:我从后台拿到的图片的路径是这样 "img/100230002/2017/3/13/9/201703130115070484063.jpg” ,看图:

  

问题出在那?(当时并没有imcsrc字段)

就是里面那个muCover没有办法直接用,而wxml里面for里面所展示的内容必须是for循环这一个数组里面的东西,不能掺杂别数组里面的东西;所以就要对这个字段处理一下!

如上图当时并没有imcsrc字段,imcsrc是我对muCover字段处理过后然后又给这个对象添加了imcsrc属性;处理方法如下:

//success是请求成功后的cb函数:

success: function(res) {
  for(var i=0; i<res.data.content.length; i++){

  arr.push("http://files.mchang.cn/"+res.data.content[i].muCover.replace(/.jpg/, '/100x100.jpg'))
  res.data.content[i].imcsrc=arr[i];
  }
  console.log(res.data.content)
  that.setData({
  imagescoverArr: res.data.content
  })
}

其实思路:先把数组对象里面这个属性给单独拿出来做一下字符串处理,处理成你想要的能直接用的格式,完了再把处理过后的东西作为一个属性返给这个对象,这样就可以直接用点语法直接用了!

附加提示:小程序设计图给的尺寸和rpx的转换:(rpx其实意思就是手机上的物理像素)苹果6手机屏幕宽是375px,750物理像素,顾750的量出来多少就是多少rpx;

      如果是750的量出来多少px就是多少rpx

      如果是640的,量出来的值需要乘以750/640得到rpx

看下图

js怎么把一个数组里面的值作为一个属性添加到另一数组包含的对象里(小程序)的更多相关文章

  1. PHP 使用用户自定义的比较函数对数组中的值进行排序

    原文:PHP 使用用户自定义的比较函数对数组中的值进行排序 usort (PHP 4, PHP 5) usort —      使用用户自定义的比较函数对数组中的值进行排序 说明       bool ...

  2. PHP usort 使用用户自定义的比较函数对数组中的值进行排序

    From: http://www.php100.com/cover/php/2395.html usort (PHP 4, PHP 5) usort — 使用用户自定义的比较函数对数组中的值进行排序 ...

  3. PHP二维数组按照键值排序

    在开发过程中,我们常常需要对二维数组按照数组的某个键来排序,这里提供两个封装好的方法,可以放到公共函数模块里以后需要的时候直接调用即可. /** * 二维数组按照键值降序排序 * @param arr ...

  4. Shell系列(38)- 数组操作→取值、遍历、替换、删除

    引言 在Linux平台上工作,我们经常需要使用shell来编写一些有用.有意义的脚本程序.有时,会经常使用shell数组.那么,shell中的数组是怎么表现的呢,又是怎么定义的呢?接下来逐一的进行讲解 ...

  5. 两天快速开发一个自己的微信小程序

    p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 12.0px "Songti SC" } p.p2 { margin: 0.0px 0. ...

  6. 快速开发一个自己的微信小程序

    一.写在前面 1.为什么要学小程序开发? 对于前端开发而言,微信小程序因为其简单快速.开发成本低.用户流量巨大等特点,也就成了前端开发工程师必会的一个技能. 2.先看看小程序效果 (1)欢迎页 (2) ...

  7. 微信小程序 WXML、WXSS 和JS介绍及详解

    前几天折腾了下.然后列出一些实验结果,供大家参考. 百牛信息技术bainiu.ltd整理发布于博客园 0. 使用开发工具模拟的和真机差异还是比较大的.也建议大家还是真机调试比较靠谱. 1. WXML( ...

  8. 移动端 | Vue.js对比微信小程序基础语法

    (1)vue 自定义组件与父组件的通信,props:[abb],可以看成自组建的一个自定义属性 (2)vue 模版语法{{}} 只能是在DOM中插入,<div>{{acc}}</di ...

  9. 微信小程序开发入门:10分钟从0开始写一个hello-world

    小程序开发需要三个描述整体程序的app文件 和 一个描述多个页面的 pages文件夹. (1)三个app文件分别是app.js,app.json,app.wxss. app.js文件是脚本文件处理一些 ...

随机推荐

  1. fjwc2019 D1T3 不同的缩写(dinic+trie+dfs)

    #180. 「2019冬令营提高组」不同的缩写 乍看之下没有什么好的方法鸭.......于是考虑暴力. 长度?二分似乎可行. 于是我们二分最长子串的长度(设为$len$),蓝后暴力查找. 先在每个串内 ...

  2. Python3 Pandas的DataFrame数据的增、删、改、查

    Python3 Pandas的DataFrame数据的增.删.改.查 一.DataFrame数据准备 增.删.改.查的方法有很多很多种,这里只展示出常用的几种. 参数inplace默认为False,只 ...

  3. 写给大忙人的Elasticsearch架构与概念(未完待续)

    最新版本官方文档https://www.elastic.co/guide/en/elasticsearch/reference/current/index.html文档增删改参考https://www ...

  4. centos6下jbd2进程占用大量IO处理

    刚在尝试重现一个bug时,好像在killed mysql一段时间之后,io一直很高,如下: 12:40:01 PM CPU %user %nice %system %iowait %steal %id ...

  5. k8s API sample

    Declarative API k8s: cluster-api Introduction to Kubernetes Cluster-API Project Declarative Manageme ...

  6. 识别简单的答题卡(Bubble sheet multiple choice scanner and test grader using OMR, Python and OpenCV——jsxyhelu重新整编)

    该博客转自www.pyimagesearch.com,进行了相关修改补充. Over the past few months I've gotten quite the number of reque ...

  7. Stanford CS231n实践笔记(课时22卷积神经网络工程实践技巧与注意点 cnn in practise 上)

    本课主要2个实践内容: 1.keras中数据集丰富,从数据集中提取更多特征(Data augmentation) 2.迁移学习(Tranform learning) 代码:https://github ...

  8. NOIP 2016 蚯蚓 (luogu 2827 & uoj 264) - 鬼畜的优化

    题目描述 本题中,我们将用符号\lfloor c \rfloor⌊c⌋表示对c向下取整,例如:\lfloor 3.0 \rfloor= \lfloor 3.1 \rfloor=\lfloor 3.9 ...

  9. extjs使用笔记-21

    yii是后台php框架 而yui是前端界面框架,是ajax框架 Extjs是建立在yui基础上的.不要搞混了. jquery的ready方法,是在文档已经加载完毕\图像完全显示后, 才载入执行的. 由 ...

  10. 大数乘法|2012年蓝桥杯B组题解析第六题-fishers

    (9')大数乘法 对于32位字长的机器,大约超过20亿,用int类型就无法表示了,我们可以选择int64类型,但无论怎样扩展,固定的整数类型总是有表达的极限!如果对超级大整数进行精确运算呢?一个简单的 ...