APICloud如何实现轮播图的效果

╰+哭是因爲堅強的太久メ 2022-03-10 20:16 259阅读 0赞

js代码

一下的代码如果不知道是什么意思的可以看文档，文档里面很详细

[https://docs.apicloud.com/Client-API/UI-Layout/UIScrollPicture][https_docs.apicloud.com_Client-API_UI-Layout_UIScrollPicture]

//轮播图
    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: [
                'widget://res/img/lb0.jpg',
                'widget://res/img/lb1.jpg',
                'widget://res/img/lb2.jpg',
                'widget://res/img/lb3.jpg'
            ],
            //图形的说明文字，可有可无
            captions: ['', '', '', '']
        },
        //对文字属性的样式
        styles: {
            caption: {
                height: 35,
                color: '#E0FFFF',
                size: 13,
                bgColor: '#696969',
                position: 'bottom'
            },
            indicator: {
               dot:{
                 w:20,
                 h:10,
                 r:5,
                 margin:20
              },
                align: 'center',
                color: '#FFFFFF',
                activeColor: '#DA70D6'
            }
        },
        placeholderImg: 'widget://res/img/lb0.jpg',
        contentMode: 'scaleToFill',
        //切换的时间
        interval: 3,
        fixedOn:api.frameName,
        loop: true,
        fixed: false
    }, function(ret, err) {
        if (ret) {
    
        } else {
    
        }
    });
    }

注意：widget：项目的意思

我的图片位置是这样的

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NTkxNjM3_size_16_color_FFFFFF_t_70][]

html代码

<!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>
        <script type="text/javascript" src="../script/APICloud-rest.js"></script>
          <script type="text/javascript" src="../script/lbt.js"></script>
        <style>
            .empty {
                text-align: center;
                padding: 120px 0;
            }
        </style>
    </head>
    <body>
        <script>
    
        </script>
    </body>
    </html>

在手机上真机同步的效果如下

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NTkxNjM3_size_16_color_FFFFFF_t_70 1][]

[https_docs.apicloud.com_Client-API_UI-Layout_UIScrollPicture]: https://docs.apicloud.com/Client-API/UI-Layout/UIScrollPicture
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NTkxNjM3_size_16_color_FFFFFF_t_70]: /images/20220311/9c8f893a1dd946379ddb7caf3b344331.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NTkxNjM3_size_16_color_FFFFFF_t_70 1]: /images/20220311/79263843c7f34a668eebc665790e083b.png