原生版本图片轮播使用教程

分类：MUI

mui内置有H5版本的图片轮播组件，教程参考mui官网图片轮播；目前5+ runtime也支持了原生实现的图片轮播，先看最终效果：

相比MUI内置的H5模式的图片轮播，原生版本的图片轮播，具有如下特征：

原生实现滑动切换，点击全屏预览，双指缩放，体验更佳
暂不支持自定义点击事件，因此更适合类似商品详情场景，用户需要点击放大图片预览，而无需跳转的情况；
暂不支持自动轮播，用户滑动时才会触发图片切换；若有自动轮播需求，建议使用mui框架实现的DIV版本图片轮播

实现方案

假设从A页面打开B页面，B页面希望使用原生图片轮播，则需要经过如下两个步骤。

新建webview时设置subNViews

A页面打开B页面的代码示例：


var webview_style = {  
    popGesture: "close"  
}  

webview_style.titleNView = { //配置原生标题  
    'backgroundColor': '#f7f7f7',  
    'titleText': this.innerHTML.trim(),  
    'titleColor': '#000000',  
    autoBackButton: true,  
    splitLine: {  
        color: '#cccccc'  
    }  
};  

webview_style.subNViews = [{ //配置图片轮播  
    id: 'slider-native',  
    type: 'ImageSlider',  
    styles: {  
        left: 0,  
        right: 0,  
        top: 0,  
        height: '200px',//轮播组件高度  
        position: 'static',//原生轮播组件跟随页面内容一起滚动  
        loop: true,//允许循环播放  
        images: [{//轮播图片地址  
            src: '_www/images/yuantiao.jpg',  
            width: '100%'  
        }, {  
            src: '_www/images/shuijiao.jpg',  
            width: '100%',  
        }, {  
            src: '_www/images/muwu.jpg',  
            width: '100%',  
        }, {  
            src: '_www/images/cbd.jpg',  
            width: '100%',  
        }]  
    }  
}];  

var webview = plus.webview.create("B.html", "slider_native_demo", webview_style);  
webview.show(aniShow,300);//直接显示

目标页面预留图片轮播组件的高度

因为原生绘制的图片轮播已占据了部分屏幕，因此需要在目标页面（本示例中即为B页面）中预留出同等高度的空白区域，否则，原生轮播组件会遮挡部分webview的内容，如下为示例代码：

.mui-content{  
    padding-top: 215px;  
}

在如上代码中，因为原生轮播组件已占据了200px固定高度，轮播组件和下面内容之间有15px的间距，故padding-top设置为215px

Hello MUI中体验

最新版的Hello MUI已集成了原生图片轮播的示例，在HBuilder 8.1.4+ 版本中即可体验，体验路径：
访问http://ask.dcloud.net.cn/article/12553下载最新版HBuilder，新建Hello mui项目，Hello MUI首页--> gallery slider（图片轮播）--> 默认样式（native模式）