精华内容
下载资源
问答
  • LayaBox -- List组件的使用

    万次阅读 2018-03-27 17:31:05
    本节我们使用LayaBox 自带List组件实现了一个排行榜界面,由于List组件限制很多,我们下篇自己实现一个类似Unity ScrollView的效果。list滑动效果如下: 排行榜里面的数据,头像等都是随便写上去的,而且分数也没有...

    本节我们使用LayaBox 自带List组件实现了一个排行榜界面,由于List组件限制很多,我们下篇自己实现一个类似Unity ScrollView的效果。list滑动效果如下:这里写图片描述

    排行榜里面的数据,头像等都是随便写上去的,而且分数也没有实现从高到低的排序,我们现在只是做出上图的效果。

    一、UI效果制作
    a. 创建一个View类型的UI页面,RankList.ui。

    b. 制作返回按钮和上面的标签

    这里写图片描述
    注:图片可以使用九宫格切割,这样的话一张圆图可以制作椭圆形按钮或者长条Image。选中Image->常用->sizeGrid
    这里写图片描述
    c. 制作一个单元格样式
    这里写图片描述
    最后效果如下:这里写图片描述
    这里面组件的相互位置,需要自己设置。具体数值没有意义,所以自己动手完成。
    d. 将C中所有资源选中,然后右键(Crit + B)生成一个Box容器,该容器就是你List中的一个单元格,并将renderType设置为render,
    e. 选中生成的Box容器,然后右键(Crit + B)生成一个List容器,该List就是我们最后生成的List,调整List位置到合适的位置,同时调整Box的width,height,x,y等属性,将其对齐。最后层级结构如下:
    这里写图片描述
    f. 这一步我们来看看list中一些常用属性的设置
    这里写图片描述
    repeatX,repeatY: 为5的话会将Box单元格重复5次,并且依次排列渲染。
    spaceX,spaceY: 两个Box单元格之间的间隔距离。
    vScrollBarSkin,hScrollBarSkin:横竖滚动皮肤。
    其它一些根据自己情况设置,更多的是从代码中设置。

    好了,选择导出->清理并导出或者(Crit + F12)。将生成Ui的导出,不然代码中找不到相应的UI。

    二、代码部分。

    好了,现在终于到重点了。下面我直接贴出项目中的代码。

    
    /**
     * 排行榜UI
     */
    class TMRankListUI extends ui.gameUI.RankListUI implements TMBaseUI {
        rankListBtns: Array<Laya.Button> =  [
            this.backBtn
        ];
    
        constructor() {
            super();
            for (var button of this.rankListBtns) {
                let buttons: Array<string> = [button.name]
                button.clickHandler = new Laya.Handler(this, this.addButtonEvent, buttons);
                this.addMouseOverEvent(button);
                this.addMouseOutEvent(button);
            }
            this.initList();
        }
    
        /**
         * 添加按钮点击事件
         * @param buttons 
         */
        private addButtonEvent(buttons: string) {
            if (buttons == "backBtn") {
                gameUIInstance.showUI(UIType.mainMenu);
            }
        }
    
        /**
         * 鼠标进入到按钮,按钮效果
         * @param button 
         */
        private addMouseOverEvent(button: Laya.Button) {
            button.on(Laya.Event.MOUSE_OVER, button, function() {
                button.scale(1.2, 1.2);
            });
        }
    
        /**
         * 鼠标离开到按钮,按钮效果
         * @param button 
         */
        private addMouseOutEvent(button: Laya.Button) {
            button.on(Laya.Event.MOUSE_OUT, button, function() {
                button.scale(1, 1);
            });
        }
    
        /**
         * 初始化ListUI
         */
        private initList() {
            var rankDatas = this.getRankDatas();
            this.rankList.vScrollBarSkin = '';
            this.rankList.repeatY = rankDatas.length;
            this.rankList.array = rankDatas;
            this.rankList.renderHandler = new Laya.Handler(this, this.onListRender);
        }
    
        /**
         * 排行榜渲染
         */
        private onListRender(cell: Box, index: number): void {
            if (index > this.rankList.array.length) {
                return;
            }
            var data: RankData = this.rankList.array[index];
            var headImg: Laya.Image = cell.getChildByName("touXiangImg") as Laya.Image;
            var nickNameLab: Laya.Label = cell.getChildByName("niChengLab") as Laya.Label;
            var orderLab: Laya.Label = cell.getChildByName("paiMingLab") as Laya.Label;
            var scoreLab: Laya.Label = cell.getChildByName("fenShuLab") as Laya.Label;
            var paiMingImg: Laya.Image = cell.getChildByName("paiMingImg") as Laya.Image;
            headImg.skin = "ui/" + data.headImg + ".png";
            nickNameLab.changeText(data.nickName);
            orderLab.changeText((index + 1).toString());
            scoreLab.changeText(data.score.toString());
            if (index == 0) {
                paiMingImg.skin = "ui/ranking01.png";
            } else if (index == 1) {
                paiMingImg.skin = "ui/ranking02.png";
            } else if (index == 2) {
                paiMingImg.skin = "ui/ranking03.png";
            } else {
                paiMingImg.skin = "ui/ranking04.png";
            }
        }
    
        /**
         * 获取排行榜数据
         */
        private getRankDatas(): Array<RankData> {
            var rankDatas = TMParsingThythm.ParsingRank();
            return this.sortRankByScore(rankDatas);
        }
    
        /**
         * 将排行榜按照分数排序 
         * @param Array 
         */
        private sortRankByScore(rankDatas: Array<RankData>): Array<RankData> {
            return rankDatas;
        }
    
        public showUI() {
            this.visible = true;
            var rankDatas = this.getRankDatas();
            this.rankList.repeatY = rankDatas.length;
            this.rankList.array = rankDatas;
            this.rankList.scrollTo(0);
        }
    
        public hideUI() {
            this.visible = false;
        }
    }
    
    /**
     * 排行数据 
     */
    class RankData {
        // 头像
        headImg: string;
        // 分数
        score: number;
        // 昵称
        nickName: string;
        constructor(headImg: string, nickname: string, score: number) {
            this.headImg = headImg;
            this.nickName = nickname;
            this.score = score;
        }
    }

    上面一些函数我并没有实现,但是并不影响使用。重点部分在两个函数中:initList,onListRender。代码比较简单,加上一些注释,看起来肯定没问题的。

    上面效果倒是实现了,但是呢,list有很多问题在。比如无法将其中某一项放大使用,将其中某一项居中使用,总之问题多多,下一篇,我自己实现了一个类似于ScrollView的效果,不知道怎么处理的可以去看看。

    展开全文
  • layabox list item居中

    千次阅读 2018-12-23 18:49:13
    项目开发中,经常遇到list的渲染item需要居中的需求,刚开始做这个的时候,很傻逼地用chrome一个个调好坐标,然后在代码里面再根据item的数量设置list的坐标,这样做不仅费时,而且肉眼比较难看出一两个像素的布局中...

    项目开发中,经常遇到list的渲染item需要居中的需求,刚开始做这个的时候,很傻逼地用chrome一个个调好坐标,然后在代码里面再根据item的数量设置list的坐标,这样做不仅费时,而且肉眼比较难看出一两个像素的布局中差距。

    比较好的做法是,直接用代码实现居中,不写死坐标值

    var len:int = list.length;

    var spaceNum:int = len - 1;

    len = len>4?4:len;

    var _w:int = item.width*len + spaceNum*list.spaceX;

        list.x = (576 - _w)/2;

    //4为每一行需要显示的item数量,576为项目统一规定的width尺寸(不同的开发项目,值可能不一样,根据具体项目赋值即可)

    ############2019-3-11再次编辑##################

    更精简更通用的list居中代码

    //每一行允许同时显示在界面的最大item数量

    var maxCell:int = 5;

    var len:int = list.arrat.length>=maxCell?maxCell:list.array.length;

    var spaceNum:int = len - 1;

    //containe为list的直接父容器,item为list用于渲染的cell

    list.x = container.x + (container.width - (len*item.width + spaceNum*list.spaceX))/2;

     

    下面直接上封装好的接口,项目中需要用到的LIST居中效果太多了

    /**
    * 注意,这里写的是横向局中的,纵向的居中逻辑一样,稍作修改即可
    * lis-list组件
    * parentW-list组件的父容器的宽度
    *childW-list组件渲染子对象的宽度
    *maxNum-list一行最多显示几个子对象
    */
    function layoutList(lis:List,parentW:int,childW:maxNum:int):void{
        //list实际一行显示的子对象个数
        var len:int = list.length > maxNum?maxNum:lis.length;
        //list组件缝隙个数
        var spaceNum:int = len > 1?len-1:0;
        //list组件的宽度
        var _w:int = len*childW + spaceNum*lis.spaceX;
        //小数点太多就直接取整了,0.5像素看不出差别
        lis.x = Math.floor((parentW - _w)/2);
    }

     

    展开全文
  • layabox list渲染优化

    千次阅读 2018-10-17 00:36:47
    前面已经说过一种方法了,就是先加载图片,再渲染list,但是对于存在较多list时,这种方法存在问题, 用户虽然能迅速看到界面,这比只能看到加载时的黑色界面体验要好,但是,用户打开界面后,会看到很多的listitem...

    前面已经说过一种方法了,就是先加载图片,再渲染list,但是对于存在较多list时,这种方法存在问题,

    用户虽然能迅速看到界面,这比只能看到加载时的黑色界面体验要好,但是,用户打开界面后,会看到很多的listitem

    没有数据进行渲染,看到的是UI文件中的界面。

    进一步优化的方法是,渲染item时选择先渲染图片,至于其他数据,走之前的渲染流程。

    具体做法是,

    1.在item中封装公有方法setSkin

    2.在list所在类的onreload方法中,获取item,然后调用item中的setSkin方法

    注意,这里有坑

    1.getCell之后要用 as强制转换一次类型为待渲染的item类型

    2.getCell的值可能为null,导致报错,所以要判断是否为null,不为null才能调用setSkin

     

    list渲染补充:(2018-10-29)

    前面说过getCell的值可能为空,那么,这样就会导致通过getCell充值list中的item时,为null的那些cell不会被重置,

    举个例子,list中可见的有4个item,但是list总共有6个item,只有当前可见的cell才能通过getCell获取,需求时当前选中的item加特效突出显示,切换点击下一个item,当前高亮显示的特效清楚,下一个被点击的item加高亮特效,如果用户点击第一个item,然后滑动到最后一个item,点击最后一个item,这时候,通过getCell重置时,由于第一个item的getCell的返回值为null,不会执行重置方法,强制执行,值为null,会报错,当用户再滑动回第一个item时,会发现第一个item的高粱特效仍然存在,并没有被清除掉。

    解决方法:除了需要在panel中执行item中的public方法重置高亮特效,还需要在item中set dataSource时直接执行一遍重置高亮特效。因为在滑动list,某个item将要出现时,会进行一次渲染。这样就可以重置了,实际上,list中的渲染并不是一次渲染完成的,当list较多,可视区以外存在item时,只会渲染可视区外的第一个item,虽然用户看上去像是一次渲染完成。这样做的优点是性能较好,按需加载,预加载,而不至于页面有较多item会感觉卡顿。

     

    展开全文
  • 纯css实现左右滑动(-webkit-box使用)

    千次阅读 2019-04-19 19:57:28
    <!DOCTYPE html> <html> <head>...meta charset="utf-8">...meta name="viewport" content="width=device-width,initial-scale=1.0">...纯css实现左右滑动</title> <...
    <!DOCTYPE html>
    <html>
    
    <head>
    	<meta charset="utf-8">
    	<meta name="viewport" content="width=device-width,initial-scale=1.0">
    	<title>纯css实现左右滑动</title>
    	<style type="text/css">
    	ul,
    	li {
    		list-style: none;
    	}
    
    	.slide-box {
    		margin-top: 50px;
    		display: -webkit-box;
    		overflow-x: auto;
    		/*适应苹果*/
    		-webkit-overflow-scrolling: touch;
    	}
    
    	.slide-item {
    		width: 300px;
    		height: 300px;
    		border: 1px solid #ccc;
    		margin-right: 30px;
    		background: pink;
    	}
    
    	/*隐藏掉滚动条*/
    	.slide-box::-webkit-scrollbar {
    		display: none;
    	}
    	</style>
    </head>
    
    <body>
    	<ul class="slide-box">
    		<li class="slide-item">1</li>
    		<li class="slide-item">2</li>
    		<li class="slide-item">3</li>
    		<li class="slide-item">4</li>
    		<li class="slide-item">5</li>
    	</ul>
    	<p>测试文字,左右滚动时,这里不会动</p>
    </body>
    
    </html>
    
    展开全文
  • layabox list里添加点击事件

    千次阅读 2018-08-27 16:29:52
    cell.getChildByName('btnBuyProps').on(laya.events.Event.CLICK, this,function(){ this.event(ShopLimitTimeView.PROPS_ID,data.shop_list[index].id) })  
  • layabox
  • 本文实例为大家分享了jQuery实现鼠标滑动切换图片的具体代码,供大家参考,具体内容如下手风琴.bigbox{width: 610px;height: 270px;border: 1px solid #ccc;margin: 0 auto;}ul{margin: 0;padding: 0;float: left;...
  • 滑动门技术

    2021-07-18 10:18:54
    滑动门技术 滑动门技术的实现主要是通过两个父子标签互相嵌套来实现的 例给a标签嵌套了一个span标签 分别给a和span...div class="box"> <div class="list"> <ul class="clearfix"> <!-- li做布
  • //滑动 function tabSlide(boxid,listid,previd,nextid,lwidth,cwidth,n,pageNo){ var box = $("... listLen = box.find("li").length, prevBtn = $("#"+previd), nextBtn = $...
  • 滑动验证

    2017-03-15 21:58:49
    滑动布局验证
  • css滑动穿透问题

    千次阅读 2018-04-04 14:52:13
    问题描述:移动端当有 fixed 遮罩背景和弹出层时,在屏幕上滑动能够滑动背景下面的内容,这就是著名的滚动穿透问题。示例demo:样式:&lt;style&gt; .box{ width: 100%; height: 100%; position: relative; ...
  • 小程序横向滑动

    2018-11-03 18:41:47
    {{item.name}} /* 分类滑动 */ .scroll-box { width: 100%; height: 40rpx; overflow: hidden; background: #fff; white-space: nowrap; padding: 20rpx; } .l...
  • 滑动图片验证码

    2019-07-22 08:07:44
    HTML: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">...滑动拼图验证码</title> <link rel="stylesheet" href="css/jigsaw.css"> </head>...
  • .branch_nav{width: 100%;height: rem(80);position: relative;overflow:hidden;border-top:rem(2) solid #D2D2...box-shadow: rem(670) 0 rem(80) rem(0)#F5F5F5 inset;padding-left:rem(25);}.branch_nav ul{displ...
  • 滑动

    2019-01-04 09:31:41
    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>切换</title> <style type="text/css">... .box{width: 601px;height: 500px;...
  • 滑动删除组件

    2019-07-26 14:22:19
    HTML <div class="container" v-if="this.checkIndex==0"> <!-- <div class="page-title">滑动组件</div> --> <ul> <li class="list-item " v-if="li...
  • 滑动门切换

    2012-09-14 22:22:46
    昨天写一个标签式页面切换的代码写得我十分纠结,也就是昨天,我才知道这种切换的专业名字叫做“滑动门切换”。下面就写写实现它的代码,以后就方便使用了。特殊的一般要改的地方我做了一些标记(用红色字体): 它...
  • 微信小程序开发交流qq群 ...微信小程序实现滑动翻页效果 效果图: 源码: <view class="mainFrame"> <swiper class="container" indicator-dots="{{indicatorDots}}" indicator-dots="{{indi...
  • 先看效果 : .concent { width:100%; .box { white-space:nowrap; // 注释1 overflow-x:auto; margin: 0; padding: 0; li {...
  • js滑动验证

    2020-07-19 22:03:34
    <style> * { margin: 0; padding: 0; list-style: none; } #box { width: 650px; height: 400px; margin: 50px auto; border: 1px solid red;
  • 前端滑动验证+拼图滑动验证效果

    千次阅读 2020-02-18 12:17:28
    相信大家都玩过B站,B站在登陆的...拖动滑动验证(无背景图片) <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>拖动...
  • js滑动解锁

    2020-07-19 22:04:47
    <style> * { margin: 0;... list-style: none; } #box { width: 400px; height: 500px; border: 1px solid red; position: relative; margin: 50px auto; } #block { width: 100
  • Document...}body{width: 100%;height:100%;margin:0;overflow: hidden;}.wrap{position: relative;overflow: hidden;}.box{position: absolute;list-style: none;left:0;top:0;padding:0;margin:0;}....
  • 小程序滑动切换页面

    千次阅读 2018-08-07 16:34:04
    点击切换和滑动切换,只适用于上面导航个数固定的情况。比如2个,4个。 如果导航个数不是死的,是接口出的,不知道有多少个。那请看我之前发的这个...swiper-tab-list {{currentTab==0 ? 'on' : ''}}" data...
  • jquery滑动导航diy

    2015-11-09 17:19:59
    jquery滑动导航 *{margin: 0;padding: 0;box-sizing: border-box;-moz-box-sizing: border-box;} body { font: 16px/20px 'Microsoft yahei,微软雅黑'; color: #AFBBBB;
  • 45.菜单悬停滑动特效

    千次阅读 2020-06-12 17:15:04
    「前端编程实战 45」HTML+CSS3 实现菜单悬停滑动特效 视频地址一:https://www.bilibili.com/video/BV1Sp4y1S7y7/ 视频地址二 :https://www.ixigua.com/i6836281379467035147/ 源码 index.html <!DOCTYPE ...
  • CSS 滑动

    2019-06-03 22:33:12
    先来体会下现实中的滑动门,或者你可以叫做推拉门: 滑动门出现的背景 制作网页时,为了美观,常常需要为网页元素设置特殊形状的背景,比如微信导航栏,有凸起和凹下去的感觉,最大的问题是里面的字数不一样多,咋办...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 9,960
精华内容 3,984
关键字:

box滑动list