Laya UI使用技巧

项目配置
按F9出现配置

发布模式：
1.内嵌模式：生成场景类，包含属性，UI的皮肤数据都在里边。最简单粗暴，那这个类就可以使用。

2.加载模式：也会生成场景类，但是不包含uiView，所有uiView数据会单独生成到另外一个json文件，需要额外加载。
3.分离模式：和加载模式很像，区别是uiView会生成多个json数据文件，按需分开加载。
4.文件模式：只生成scene文件，用Scene.load加载。

UI相关功能：

1.设置图片属性：
可设置全局属性：比如九宫格，多态图等

2. 页面设置效果图
更换美术UI效果图时，将效果图放在背景图下面，对坐标，又不影响正常加载。打开.ui文件，修改如下：

"props":{"width":750,"height":1334,"sceneColor":"#000000","sceneBg":"laya/效果图/main.png"}

组件使用

List
将子级name命名为：render，才可显示。想加选中效果，将选中的图片命名为：selectBox即可，点击时会自动显示选中图片。

	//初始化
	private init():void{
	//设置为空字符，才可滚动，此时MouseMove事件的target是List对象
	this.ui.list.vScrollBarSkin="";
	//设置为空，则不滚动，此时MouseMove事件的target可以是cell对象
	this.ui.list.vScrollBarSkin=null;
	//每一条是否可选中
	this.ui.list.selectEnable = true;
	//设置渲染处理
	this.ui.list.renderHandler = Laya.Handler.create(this, this.onRender,null,false);
	//设置选择处理
	this.ui.list.selectHandler = Laya.Handler.create(this, this.onSelect,null,false);
	//设置数据
	this.ui.list.array = [];
	}
	//刷新
	private onUpdateItem(cell:any, index:number){
	    //console.log("update:", index);
	    cell.getChildByName("img").skin = "1.png";
	}
	
	//选择处理 
	private onSelect(index:number){
	    console.log("select:", index);
	}
	
	//获得格子
	this.ui.list.getCell(index);
	
	//this.ui.list.scrollBar.target 是this.ui.list.content
	//停止滚动
	this.ui.list.scrollBar.stopScroll();
	//可以滚动
	this.ui.list.scrollBar.startDrag();

设置 list.vScrollBarSkin=“”，滚动原因如下：

	//引擎源代码，其实是 新创建了一个VScrollBar 
	set vScrollBarSkin(value) {
        this._removePreScrollBar();
        var scrollBar = new VScrollBar();
        scrollBar.name = "scrollBar";
        scrollBar.right = 0;
        scrollBar.skin = value;
        scrollBar.elasticDistance = this._elasticEnabled ? 200 : 0;
        this.scrollBar = scrollBar;
        this.addChild(scrollBar);
        this._setCellChanged();
    }
    _removePreScrollBar() {
        var preNode = this.removeChildByName("scrollBar");
        if (preNode)
            preNode.destroy(true);
    }

ScrollBar

HTMLDivelement
可实现文字混合效果，官方文档
问题：在微信小游戏报错，无法正常显示
解决：需要开发者在game.js里单独的引入xml解析文件
下载： dom.js dom_parser.js sax.js

//game.js 导入
require("weapp-adapter.js");
//只需引用 dom_parser，但三个文件都需下载
window.Parser = require("./js/dom_parser");

//代码使用
let div:Laya.HTMLDivElement = new Laya.HTMLDivElement();

//基本设置都可满足
div.style.align="center";
div.style.color = "#ffff00";
div.style.fontSize=30;
div.style.bold = true;
div.style.wordWrap = true;

//width,height和line-height 只能在div字符串设置
div.innerHTML="<div style='width:500px;line-height:30px;height:0px;'>测试文字</div>";

//垂直剧中显示，div字符串height必须设置为0才可以。比如：总高100，那么垂直剧中需要按下面写
div.y = (100 - div.contextHeight) / 2;

Laya.Sprite

//判断鼠标是否在显示区域
let sprite:Laya.Sprite;
sprite.getBounds().contains(Laya.stage.mouseX, Laya.stage.mouseY);

Laya.Script

脚本组件
官方文档：点击这里

export default class ImageAlphaMono extends Laya.Script {
    /** @prop {name:color,tips:"图片颜色",type:string,default:"#000000"} */
    public color:string="#000000";
    /** @prop {name:alpha,tips:"图片透明",type:number,default:0.8} */
    public alpha:number = 0.8;
    constructor() { 
        super(); 
    }
    onEnable(): void {
    }
}

Laya如何加入视频？

		//创建Div，这个无需多说了
		let divElement = Laya.Browser.createElement("div");
        divElement.className = "div";
        Laya.Browser.document.body.appendChild(divElement);  
        //核心代码       
        Laya.Utils.fitDOMElementInArea(divElement,sp , 0, 0, 800,600); 
        this.divElement = divElement;
        //视频显示或隐藏，和Div控制一个样
        //this.divElement.style.display = "none";

        // 创建Video元素
        let videoElement = Laya.Browser.createElement("video");
        videoElement.setAttribute("id", "myvideo");
        this.videoElement = videoElement;      
        videoElement.controls = true;
        videoElement.autoPlay = false;
        // 阻止IOS视频全屏
        videoElement.setAttribute("webkit-playsinline", true);
        videoElement.setAttribute("playsinline", true);
        videoElement.setAttribute("x5-video-player-type",'h5');
        videoElement.setAttribute("x-webkit-airplay",true);
        videoElement.setAttribute("x5-video-orientation","portrait");
        
        videoElement.setAttribute('preload', 'auto');
        videoElement.setAttribute('width', '100%');
        videoElement.setAttribute('height', '100%');
         
        videoElement.style.zInddex = Laya.Render.canvas.style.zIndex + 1;      
        videoElement.type = "vedio/mp4";     
        videoElement.src = Define.CDN+"mp4/ad.mp4";
        divElement.appendChild(videoElement); 
		//自动播放，必须静音
		//videoElement.play();
		
		//视频播放事件 progress play  pause   seeking  seeked  ended  error  
		videoElement.addEventListener("loadstart",()=>{
        });