DCloud_UNI_CHB
DCloud_UNI_CHB
  • 发布:2017-05-31 23:04
  • 更新:2019-06-22 18:02
  • 阅读:11546

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

分类: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模式)

6 关注 分享
ali Trust mackes 18768156@qq.com 田云 漠

要回复文章请先登录注册

优乐美

优乐美

轮播图底部的点 能修改样式嘛?
2019-06-22 18:02
优乐美

优乐美

回复 DCloud_UNI_CHB :
能看下 ios下 h5+ ImageSlider 图片不能正常展示
2019-05-05 11:43
辛德瑞拉

辛德瑞拉

安卓上轮播图片模糊解决了吗?
2019-05-04 16:36
优乐美

优乐美

h5+ ImageSlider
2019-05-04 08:42
优乐美

优乐美

大佬 能看下嘛?
2019-05-04 08:42
优乐美

优乐美

ios 图片不能正常展示,点击预览是能正常显示
2019-05-03 16:19
Yizhiyu

Yizhiyu

回复 DCloud_UNI_CHB :
我直接改的mui.previewimage.js
2018-05-28 12:11
Yizhiyu

Yizhiyu

回复 DCloud_UNI_CHB :
可以怎么动态添加悬浮文字呢?而且添加的文字第一次滚动不出现,只有滚动过去一次后才会出现
2018-05-28 12:08
DCloud_UNI_CHB

DCloud_UNI_CHB (作者)

回复 377762305@qq.com :
已知详情ID的情况下,发起ajax请求就可以了
2017-07-24 15:19
377762305@qq.com

377762305@qq.com

如何在列表页从服务器获取详情页对应的图片路径呢?
2017-07-22 19:00