mui中plus.nativeUI.previewImage的使用详情，点击图片放大且左右滑动以及图片下载

最新推荐文章于 2025-11-15 17:56:14 发布

原创最新推荐文章于 2025-11-15 17:56:14 发布 · 1.4k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#前端

mui 专栏收录该内容

1 篇文章

订阅专栏

本文详细介绍了如何在mui框架下使用plus.nativeUI.previewImage方法来实现图片的预览，包括点击图片放大、左右滑动切换图片，并添加了长按图片触发下载的功能。通过设置参数如current、background、indicator和loop，可以自定义预览效果。同时，通过监听onLongPress事件，弹出下载菜单，利用plus.downloader创建下载任务并保存到相册。

mui中plus.nativeUI.previewImage的使用详情
点击图片放大且左右滑动以及图片下载
根据mui的previewImage文档得知
plus.nativeUI.previewImage(ig,{
current:i, //点击图片时显示图片的索引值
background:’#000’, //图片的背景颜色，值为RGB
indicator: ‘number’, //当前图片显示格式
loop:true ,
//如果需要出发图片长按事件可以添加onlongpress

})

下面展示一些 代码实例可以直接使用，帮助到你的话拜托点个赞哦

// An highlighted block
//点击图片放大且左右滑动
			function displayLargeImage(ig,i) {
				plus.nativeUI.previewImage(ig,{ 
				     current:i,   //点击图片时显示图片的索引值    
				     background:'#000',  //图片的背景颜色，值为RGB
				     indicator: 'number', 
				     loop:true  ,
					onLongPress:function(e){
						var path = e.url;
						var bts=[{title:"图片下载"}];
						plus.nativeUI.actionSheet({title:"利+",cancel:"取消",buttons:bts},
							function(e){
								if(e.index>0){
									var dtask = plus.downloader.createDownload(path,{},function(d,status){
										if(status==200){
											plus.gallery.save(d.filename,function() {//保存到相册方法
											plus.nativeUI.closeWaiting();
											mui.toast('已保存到手机相册');
											},function() {
												plus.nativeUI.closeWaiting();
												mui.toast('保存失败，请重试！');
												});		
										}else {
											// alert( "Download failed: " + status );
											mui.toast("下载失败");
										}
									});
									dtask.start();//开始下载
								}
							}
						);
					}
				})
			}