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

最新推荐文章于 2020-05-08 07:24:51 发布

tian_jiangnan

最新推荐文章于 2020-05-08 07:24:51 发布

阅读量402

点赞数

分类专栏：开发apicloud项目的点点滴滴

本文链接：https://blog.csdn.net/tian_jiangnan/article/details/105469063

版权

开发apicloud项目的点点滴滴专栏收录该内容

6 篇文章 0 订阅

订阅专栏

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>

效果如下

tian_jiangnan

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
apicloud项目用UIScrollPicture模块来显示轮播图

1、真机上的图片地址设置是这样的'widget://image/1.jpg',2、在海马玩上是这样的 '../image/1.png',记住在app应用上添加模块；不然用不了代码如下<!DOCTYPE html><html><head> <meta charset="UTF-8"> <meta ...
复制链接

扫一扫

专栏目录