Apicloud 给UIListView的data动态赋值

前提

1、app项目添加了UIListView模块

2、ajax可以和后台连上，并且可以返回数据

注意

这里的title、subTitle是固定的，如果后台要返回json类型的数组，里面的属性名要和这里一致，不然就不显示

js代码如下

//ajax连接第三方的地址
var purl = 'http://47.93.217.112:8080/jiekou';
var pp = 'http://192.168.0.107:8080/jiekou';
//ajax连接第三方的地址
apiready = function() {
        //ajax把我的帖子查询出来，显示在以下的部分
         getvalue();
    }
    //获取后台的值
function getvalue() {
    //获取当前的用户名
    var name = $api.getStorage('username');
    var listdata = new Array();
    //获取当前的用户名
    api.ajax({
        url: pp + '/mypost.action',
        method: 'post',
        data: {
            values: {
                name: name
            },
        }
    }, function(ret, err) {
        if (ret) {
            console.log(JSON.stringify(ret));
            for (i = 0; i < ret.length; i++) {
                var tem = {
                    uid: ret[i].post_id, //标识号
                    imgPath: ret[i].post_img, //图片
                    title: ret[i].post_title, //标题
                    subTitle: ret[i].post_content, //内容
                    remark: '', //备注
                    icon: '',
                }
                listdata.push(tem);
            }
         showlist(listdata);
        }
    });
}

function showlist(listdata) {
    //ajax把我的帖子查询出来，显示在以下的部分
    var UIListView = api.require('UIListView');
    UIListView.open({
        rect: {
            x: 0,
            y: 40,
            w: api.winWidth,
            h: api.frameHeight
        },
        data: listdata,
        rightBtns: [{
            bgColor: '#a31515',
            activeBgColor: '',
            width: 70,
            title: '删除',
            titleSize: 12,
            titleColor: '#ffffff',
            icon: '',
            iconWidth: 20
        }],
        styles: {
            borderColor: '#696969',
            item: {
              bgColor: '#f4f4f4',
              activeBgColor: '#F5F5F5',
              height: 120.0,
              imgWidth: api.winWidth/2,
              imgHeight: 100,
              imgCorner: 4,
              placeholderImg: '',
              titleSize: 16.0,
              titleColor: '#000',
              subTitleSize: 12.0,
              subTitleColor: '#000',
              remarkColor: '#000',
              remarkSize: 16,
              remarkIconWidth: 30
            }
        },
        fixedOn: api.frameName
    }, function(ret, err) {
        if (ret) {
            alert(JSON.stringify(ret));
        }
    });
    //ajax把我的帖子查询出来，显示在以下的部分
}

html代码如下

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0, minimum-scale=1.0, user-scalable=0, initial-scale=1.0, width=device-width" />
    <meta name="format-detection" content="telephone=no, email=no, date=no, address=no">
    <title>我的-购物车</title>
    <script src="../script/jquery-1.10.2.js"></script>
    <script src="../script/api.js"></script>
    <script src="../script/vue.js"></script>
    <script src="../script/bootstrap.js"></script>
    <script src="../script/mpost.js"></script>
    <link rel="stylesheet" href="../css/bootstrap.min.css" />
    <link rel="stylesheet" type="text/css" href="../css/api.css" />
</head>
<style>
.shead{
    height: 40px;
    font-size: 17px;
    background-color: #324c31;
    color: white;
    padding-top: 3%;
    text-align: center;
    margin-top: 0%;
}
</style>
<body>
  <!--商城的头部--->
  <div class="container-fluid  shead">共享农场>论坛>我发布的帖子</div>
    <!--商城的头部--->
</body>
<!-- JavaScript 代码需要放在尾部（指定的HTML元素之后） -->
</html>

效果图如下·

Apicloud 给UIListView的data动态赋值

前提

注意

猜你喜欢