美文网首页
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