美文网首页
APICloud+Vue.js商城实战-2.使用APICloud

APICloud+Vue.js商城实战-2.使用APICloud

作者: 挤时间学习的阿龙 | 来源:发表于2019-04-30 17:48 被阅读0次

    1、UIScrollPicture 轮播图组件
    (1)文档地址
    https://docs.apicloud.com/Client-API/UI-Layout/UIScrollPicture
    (2)示例代码

    var UIScrollPicture = api.require('UIScrollPicture');
    UIScrollPicture.open({
        rect: {
            x: 0,
            y: 0,
            w: api.winWidth,
            h: api.winHeight / 2
        },
        data: {
            paths: [
                'widget://res/img/apicloud.png',
                'widget://res/img/apicloud-gray.png',
                'widget://res/img/apicloud.png',
                'widget://res/img/apicloud-gray.png'
            ],
            captions: ['apicloud', 'apicloud', 'apicloud', 'apicloud']
        },
        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/slide1.jpg',
        contentMode: 'scaleToFill',
        interval: 3,
        fixedOn: api.frameName,
        loop: true,
        fixed: false
    }, function(ret, err) {
        if (ret) {
            alert(JSON.stringify(ret));
        } else {
            alert(JSON.stringify(err));
        }
    });
    
    2、

    相关文章

      网友评论

          本文标题:APICloud+Vue.js商城实战-2.使用APICloud

          本文链接:https://www.haomeiwen.com/subject/kcbmnqtx.html