zoukankan      html  css  js  c++  java
  • 微信小程序开发之页面wxml里面实现循环 wx:for

    js代码:

    Page({

    data:{

    upploadimagelist:{},    //上报图片列表 js数组

    }})

    后台数据库保存的格式:{"imageList":[{"fileUrl":"http://218.87.254.137:7999/uploads/20170528/48e11aa9-88ef-449e-b617-513c83a09f40.jpg"},{"fileUrl":"http://218.87.254.137:7999/uploads/20170528/4050ceaa-1673-42e8-97ea-56991290ad76.png"},{"fileUrl":"http://218.87.254.137:7999/uploads/20170528/59403872-0f18-43a6-93e4-53a0816bd047.jpg"}]}

    var uploadimageObj=JSON.parse(res.data.feedback.fbimages);  //将后台传过来的json字符串转换为js数组,res为wx.request({})请求成功的返回对象

    wxml代码:<view wx:for="{{upploadimagelist}}" wx:key="id">
     <image class="uploadimageclass" src="{{item.fileUrl}}"></image>
     </view>

    循环语句默认的循环变量是item,故使用item来取数据,可以说是对象也可以是某个字段,取决于upploadimagelist里面的数据有几层

    <view class="listcontain" bindtap="getInfoDetial" id="{{item.id}}">。。。</view>                 //可以在视图里绑上id,配合事件getInfoDetial,可以获取到列表数据的id,对后续用id进行进一步查询或排序有着重要的意义

    事件getInfoDetial写法

    getInfoDetial:function(e){
        //获取列表ID
        var id=e.currentTarget.id;
      wx.navigateTo({
        url: 'detailinfo/index?id='+ id,  //带参数页面跳转,在目的页面的onLoad方法里面就能取到id,进行进一步处理(比如获取该id下的详细信息)
        success: function(res){
          // success
        },
        fail: function(res) {
          // fail
        },
        complete: function(res) {
          // complete
        }
      })
      },

  • 相关阅读:
    程序安装打包
    sql 2005 分页存储过程
    带线的无限级下拉树列表
    MapXtreme 2005 学习心得 概述(一)
    存储过程中用到的年,月,周的函数
    委托/事件/线程传参简单理解
    清除svn/vss小工具
    查看数据库连接数
    MapXtreme 2005 学习心得 使用WebTool工具(七)
    C#日期格式化
  • 原文地址:https://www.cnblogs.com/min-min-min/p/6869575.html
Copyright © 2011-2022 走看看