apicloud项目用UIScrollPicture模块来显示轮播图

1、真机上的图片地址设置是这样的

'widget://image/1.jpg',

2、在海马玩上是这样的

  '../image/1.png',


记住在app应用上添加模块;不然用不了

代码如下

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>云API</title>
    <link rel="stylesheet" type="text/css" href="../css/api.css" />
    <link rel="stylesheet" type="text/css" href="../css/style.css" />
    <script type="text/javascript" src="../script/api.js"></script>
</head>
<body>
    <script>

    </script>
</body>
<script type="text/javascript">
//轮播图
apiready = function(){//没有这个的话,就会报错api is not defined
var UIScrollPicture = api.require('UIScrollPicture');
UIScrollPicture.open({
  //轮播的区域
    rect: {
        x: 0,//距离x(左上角的距离)
        y: 0,
        w: api.winWidth,
        h: api.winHeight / 4
    },
    data: {
        paths: [
          '../image/1.png',
          '../image/2.png',
          '../image/3.png',
          '../image/4.png',
          '../image/5.png',
            // 'widget://image/1.jpg',真机上是这样的;
            // 'widget://image/2.jpg',
            // 'widget://image/3.jpg',
            // 'widget://image/4.jpg'
        ],
    },
    placeholderImg: '../image/1.jpg',
    contentMode: 'scaleToFill',
    //切换的时间
    interval: 3,
    fixedOn:api.frameName,
    loop: true,
    fixed: false
}, function(ret, err) {
    if (ret) {

    } else {

    }
});
}
</script>

</html>

效果如下

发布了123 篇原创文章 · 获赞 4 · 访问量 5676

猜你喜欢

转载自blog.csdn.net/tian_jiangnan/article/details/105469063