上面这个需求我说的似乎不太明白,之前也是没有碰到过,也是最近在搞小程序,涉及到小程序前后台数据交互,展示的部分!!不太明白没关系等会我给大家举个例子,就明白了说起来有点拗口,一看就明白了,其实如果是原生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. Web视频播放之video.js

    h5这么火是有它的理由的,支持原生视频播放,但是目前兼容性还不是很好,因此使用js框架支持网站视频播放是比较不错的选择. 下载video.js,我们可以通过官网去下,但是官网在国外,我尝试了几次均下载 ...

  2. amqp 抓包

    1. wireshark 2. tcpick -yR -r  file.name

  3. 关于sql中in 和 exists 的效率问题

    在用in的地方可以使用freemark标签代替,例如: 将 <#if assistantList??&& (assistantList?size > 0)> AND ...

  4. [c/c++] programming之路(6)、ASCII码,数据类型、随机数、字符转换及拼接等

    一.变量 #include<stdio.h> #include<stdlib.h> void main0(){ //数据使用必须在范围内,否则产生溢出 unsigned +;/ ...

  5. Codeforces 675E Trains and Statistic - 线段树 - 动态规划

    题目传送门 快速的vjudge通道 快速的Codeforces通道 题目大意 有$n$个火车站,第$i$个火车站出售第$i + 1$到第$a_{i}$个火车站的车票,特殊地,第$n$个火车站不出售车票 ...

  6. 用uniGUI做B/S下业务系统的产品原型体验

    从10月份到重庆工作后,一直忙于工作,感兴趣的几个方面的技术都处于暂停. 一个多月来,按照公司要求在做B/S集中式基卫产品的原型,主要是画原型图,开始是用Axure,弄来弄去感觉功能还是弱了些,尤其是 ...

  7. 闪存中的NorFlash、NandFlash及eMMC三者的区别【转】

    本文转载自:https://blog.csdn.net/Blazar/article/details/77843655 快闪存储器(英语:Flash Memory),是一种电子式可清除程序化只读存储器 ...

  8. Ubuntu 使用unzip解压乱码的问题

    由于win使用的是GBK编码,在win下打包zip的压缩文件在ubuntu下使用unzip解压会出现乱码的问题. 解决方案: 换软件,不用unzip,使用unar 18.04是默认安装的,如果没有默认 ...

  9. 待续未完- 自己写后台内容管理程序 - 用tp框架 和 前台 jquery ui等写的

    在日常开发中,我们主要使用的还是 php 的 内部的 语言本身提供的函数/常量,系统内部数组等. 为了和后面的tp框架提供的 "系统函数.系统常量"相区别,把php提供的东西叫语言 ...

  10. P4172 [WC2006]水管局长

    P4172 [WC2006]水管局长 前言 luogu数据太小 去bzoj,他的数据大一些 思路 正着删不好维护 那就倒着加,没了 LCT维护他的最小生成树MST 树上加一条边肯定会有一个环 看看环上 ...