使用ivx实现图片预览功能的经验总结

在实际案例中经常会需要展示一个图片列表,但是列表中由于图片数量比较多,所以每张图片都会比较小。这时我们需要一个功能,能够点击某一张图片就显示这张图片的大图,今天就是说一下ivx中如何实现这种预览效果。

1.图片列表
demo中的图片列表是用循环组件创建的,图片资源已经存放在对象数组里,for容器下的图片组件已经绑定了当前数据中的图片资源。父容器是一个行并且开启了自动换行,每行显示两张图片。



2.小图与大图
上面循环创建出来的就是小图,我们还需要用一个大的图片组件来显示我们点击后的大图。这里使用了一个横幅来放置大图。(横幅有两种px图标的横幅内部是绝对定位,%图标的横幅内部是相对定位)

给小图添加一个点击事件。当点击小图时,我们让图片预览这个横幅显示,并把小图的图片资源地址赋值给大图,然后让蒙层横幅也显示。

其实横幅组件本身有一个横幅效果,但是这个蒙层效果是不透明的。我们可以选择一个颜色试一下


所以这里的蒙层使用了另一个横幅,宽高设置100%占满整个屏幕,然后根据自己的需求设置好合适的透明度和颜色。

这里的层级结构就是最上层是图片预览横幅,然后是蒙层横幅,最下面是图片列表行。而两个横幅最开始是需要隐藏的,将对象树中的组件前的眼睛图标点灭。

最后是当我们点开大图后如何返回图片列表。此时屏幕上我们能点击到的区域只有图片和蒙层横幅这两处,所以给他们添加点击事件,动作都是使两个横幅重新隐藏并充值放缩比例这个变量。


3.通过鼠标滚轮放缩大图
大图是进行了数据绑定的,图宽的初始值是242,放缩比例的值是2,所以现在大图的初始宽度就是484。但是当我们改动其中一个变量的时候大图的宽度也会随之改变,这里我们改动的是缩放比例。


通过前台我们可以获取到鼠标的滚轮滚动动作。滚轮下滑,缩放比例减0.1,大图缩小,滚轮上滑,缩放比例加0.1,图片放大。要注意的是这里用了两个条件判断做了放大和缩小的边界处理。通过控制放缩比例值的范围来控制大图的宽高也始终在一个合适的范围内。


4.总结
实现一个案例需要的有两点,工具的熟练使用和清晰的案例逻辑。熟练使用ivx需要多钻研,多看文档,更重要的是多动手去做去尝试。而案例逻辑是我们要清楚自己想要做什么,设计好每一步的步骤,例如本案例,图片资源放入对象数组>>>for循环创建展示小图>>>小图添加点击事件让大图显示>>>通过滚轮改变大图宽高>>>大图添加点击事件让大图隐藏。只有对自己要做什么案例有一个清晰的认识,我们才能一步一步的去实现它。

原文地址:https://blog.51cto.com/14556317/2478893

时间: 2024-10-23 08:44:08

使用ivx实现图片预览功能的经验总结的相关文章

HTML5实现图片预览功能

两种方式实现 URL FileReader Index.jsp文件 <%@page contentType="text/html" pageEncoding="UTF-8"%> <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

实现图片预览功能

本来以为图片预览功能非常的简单,就是在file标签change时获取路径展示给用户,但是浏览器处于安全考虑并不会让脚本获得绝对路径(这会在一定程度上暴露用户的文件 目录),只能获取文件名.所以要通过和后台的配合,在file标签发生change事件时,将图片以ajax的方式发送到后台,后台将图片保存在服务器,然后讲文件地址返回回来,再由前端展示给用户,完成预览功能! 文件的ajax并不是太容易,所以使用了jquery的插件,jquery.form.js.一些参数性问题可以参考form插件. <fo

微信小程序的实现图片预览功能

index.wxml <image src="../../images/01.jpg"class="userinfo-avatar" bindtap="previewImg01" background-size="cover"mode="aspectFill"></image> index.js //图片预览功能 previewImg01: function (event) { va

原生js实现ajax的文件异步提交功能、图片预览功能.实例

<%-- Created by IntelliJ IDEA. User: yh Date: 2016/12/14 Time: 17:13 To change this template use File | Settings | File Templates. --%> <%@ page contentType="text/html;charset=UTF-8" language="java" %> <%@ include file=&

利用js加载本地图片预览功能

直接上代码: 经测试,除safari6包括6以下不支持,其他均可正常显示. 原因:safari6不支持filereader,同时不能使用IE滤镜导致失效. fix: 可以利用canvas,解决safari6的问题 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

JS实现的图片预览功能

之前的博文有实现过图片上传预览,但那种方法是预览时就将图片上传,会产生很大的浪费空间.找到了之前有人写的用JS实现的图片预览,就说用js将上传的图片显示,上传代码在之前的博文中有写到. 以下是实现的代码: body: <table width="100%" border="0" cellspacing="0" cellpadding="0"> <tbody> <tr> <td heig

JavaScript图片上传前的图片预览功能

JS代码: 1 //js本地图片预览,兼容ie[6-9].火狐.Chrome17+.Opera11+.Maxthon3 2 function PreviewImage(fileObj, imgPreviewId, divPreviewId) { 3 var allowExtention = ".jpg,.bmp,.gif,.png"; //允许上传文件的后缀名document.getElementById("hfAllowPicSuffix").value; 4 v

fileupload图片预览功能

FileUpload上传图片前首先预览一下 看看效果: 在专案中,创建aspx页面,拉上FileUpload控件一个Image,将用来预览上传时的图片. <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default2.aspx.cs" Inherits="Default2" %> <!DOCTYPE html> <html xmln

小程序实现图片预览功能

var current = e.target.dataset.src; //预览图片 wx.previewImage({ current: current, urls: this.data.product.photoUrls, }); current:表示当前需要预览的图片,(默认图片数组的第一张) urls:表示图片的数组 当然你需要在页面绑定事件 <image mode="widthFix" data-src="{{item}}" src="{{