{"id":116,"date":"2017-04-13T11:33:00","date_gmt":"2017-04-13T03:33:00","guid":{"rendered":"http:\/\/zouyang1230.com\/blog\/?p=116"},"modified":"2020-10-28T22:46:01","modified_gmt":"2020-10-28T14:46:01","slug":"egret-h5-%e5%bc%95%e6%93%8e-%e8%87%aa%e5%ae%9a%e4%b9%89%e4%b8%8b%e6%8b%89%e8%8f%9c%e5%8d%95%e5%88%86%e4%ba%ab","status":"publish","type":"post","link":"http:\/\/www.imzouyang.com\/blog\/archives\/116.html","title":{"rendered":"Egret H5 \u5f15\u64ceTypescript\u5c01\u88c5\u63a7\u4ef6: \u81ea\u5b9a\u4e49\u4e0b\u62c9\u83dc\u5355"},"content":{"rendered":"<p>\u56e0\u4e3aegret\u5b98\u65b9\u5728\u65b0\u7248EUI\u5185\u5df2\u7ecf\u53bb\u9664\u4e86\u8001\u677fGUI\u4e2d\u7684\u4e0b\u62c9\u63a7\u4ef6\uff0c\u4e5f\u6ca1\u6709\u63d0\u4f9bEUI\u7684\u4e0b\u62c9\u83dc\u5355\u63a7\u4ef6\uff0c\u56e0\u6b64\u5c01\u88c5\u7684\u4e00\u4e2a\u4e0b\u62c9\u83dc\u5355\u63a7\u4ef6\uff0c\u53ef\u4ee5\u76f4\u63a5\u4f7f\u7528\uff0c\u4ee3\u7801\u5982\u4e0b\uff1a<\/p>\n<p>\u65b0\u5efa\u4e00\u4e2ats\u6587\u4ef6\uff0c\u8d34\u5165\u4e0b\u9762\u7684\u4ee3\u7801\uff0c\u7136\u540e\u5c31\u53ef\u4ee5\u5728\u5176\u4ed6\u7684\u7c7b\u91cc\u9762\u53bbnew \u51fa\u6765\uff0c\u4f20\u5165\u53c2\u6570\uff0c\u5c31\u662f\u4e00\u4e2a\u4e0b\u62c9\u83dc\u5355\u4e86\uff0c\u6bd4\u5982\uff1athis.exampleDroplist = new euiextendsion.DropDwonList(200,45,&#8221;&#8221;,&#8221;\u4e0b\u62c9\u6eda\u9009&#8221;,100,100,&#8221;5\u5206&#8221;,&#8221;10\u5206&#8221;,&#8221;15\u5206&#8221;,&#8221;20\u5206&#8221;);<\/p>\n<pre><code class=\"javascript\">\nmodule euiextendsion {\nexport class DropDwonList extends eui.Component {\n\/\/\u5c55\u5f00\u3001\u6536\u56de\u5217\u8868\u7684\u6309\u94ae\nprivate btn: eui.Button;\n\/\/\u6eda\u52a8\u7684\u5217\u8868\nprivate scroller: eui.Scroller;\n\/\/\u6eda\u52a8\u5217\u8868\u4e0a\u7684\u906e\u7f69\nprivate spMask: egret.Shape;\n\/\/\u5217\u8868\u662f\u5426\u5c55\u5f00\u4e86\nprivate isShow: boolean = false;\n\/\/\u6eda\u52a8\u533a\u57df\u6d88\u5931\u4f4d\u7f6e\u7684 y \u5750\u6807\nprivate posScrollerClose: number;\n\/\/list\nprivate list:eui.List;\n\/\/\u63d0\u4f9b\u7ed9\u5916\u90e8\u8c03\u7528\uff1a\u83b7\u53d6\u5f53\u524dlist\u6240\u9009\u7684\u503c\npublic selectedValue:string;\n\/\/\u63d0\u4f9b\u7ed9\u5916\u5c42\u7684\u5f53\u524d\u9009\u4e2d\u7684\u9879\u76ee\u7684index\u503c\npublic selectedIndex:number;\n\n\/\/ \u6784\u9020\u51fd\u6570\u53c2\u6570\u8bf4\u660e\uff1a\n\/\/ x\uff1a\u4e0b\u62c9\u83dc\u5355\u7684x\u5750\u6807\n\/\/ y\uff1a\u4e0b\u62c9\u83dc\u5355\u7684y\u5750\u6807\n\/\/ skin\uff1a\u4e0b\u62c9\u83dc\u5355\u5404\u83dc\u5355\u9879\u7684\u76ae\u80a4\uff0c\u76ae\u80a4\u9ad8\u5ea6\u5c31\u662f\u5404\u83dc\u5355\u9879\u7684\u9ad8\u5ea6 \u4f20\u5165\u76ae\u80a4\u540d\u5b57\u5b57\u7b26\u4e32\n\/\/ BtnValue\uff1a\u6309\u94ae\u6587\u5b57\n\/\/ scrollWidth\uff1a\u4e0b\u62c9\u6846\u663e\u793a\u7684\u5bbd\u5ea6\n\/\/ scrollHeight\uff1a\u4e0b\u62c9\u6846\u663e\u793a\u7684\u9ad8\u5ea6\n\/\/ ...rest\uff1a\u4e0b\u62c9\u83dc\u5355\u5404\u9879\u503c\nconstructor(x:number,y:number,skin:string = \"\",BtnValue:string,scrollWidth:number,scrollHeight:number,...rest) {\n    super();\n    \/\/\u521b\u5efa\u6eda\u52a8\u533a\u57df\u548c\u5217\u8868\n    var arr = [];\n    for (var i = 0; i &lt; rest.length; i++) {\n    arr.push(rest);\n}\nthis.list = new eui.List();\nthis.list.width = scrollWidth;\nthis.list.itemRendererSkinName = skin; \/\/ButtonSkin\nthis.list.dataProvider = new eui.ArrayCollection(arr);\nvar scroller = new eui.Scroller();\nscroller.height = scrollHeight;\nscroller.width = scrollWidth;\nscroller.viewport = this.list;\nthis.addChild(scroller);\n\/\/ scroller.verticalScrollBar.autoVisibility = false;\n\/\/ scroller.verticalScrollBar.visible = true;\n\/\/ this.scroller.autoHideScrollBars = false;\n\/\/ scroller.horizontalScrollBar\n\n\/\/\u5217\u8868\u4e0a\u9762\u7684\u906e\u7f69\nvar spMask = new egret.Shape();\nspMask.graphics.beginFill(0x000000);\nspMask.graphics.drawRect(0, 0, scrollWidth, scrollHeight);\nspMask.graphics.endFill();\nthis.addChild(spMask);\nscroller.mask = spMask;\n\nvar btn = new eui.Button();\nbtn.label = BtnValue;\nbtn.width = scrollWidth;\nbtn.height = 35;\nthis.addChild(btn);\n\nthis.btn = btn;\nthis.scroller = scroller;\nthis.spMask = spMask;\nthis.x = x;\nthis.y = y;\nthis.list.addEventListener(eui.ItemTapEvent.ITEM_TAP,this.onClickList,this);\n}\nprotected createChildren() {\n    super.createChildren();\n    this.spMask.y = this.btn.height;\n    \/\/\u8bbe\u7f6e\u6d88\u5931\u70b9\u5750\u6807\n    this.posScrollerClose = this.scroller.y = -this.scroller.height;\n    this.btn.addEventListener(egret.TouchEvent.TOUCH_TAP, this.changeListType, this);\n}\nprivate changeListType(): void {\nif (!this.isShow) {\n    egret.Tween.get(this.scroller).to({y:this.btn.height}, 300);\n    this.isShow = true;\n} \nelse \n{\n    egret.Tween.get(this.scroller).to({y:this.posScrollerClose}, 300);\n    this.isShow = false;\n}\n}\n\npublic onClickList(evt:eui.UIEvent) : void\n{\n    \/\/ console.log(this.list.selectedItem,this.list.selectedIndex)\n    this.selectedValue = this.btn.label = this.list.selectedItem;\nif (!this.isShow) {\n    egret.Tween.get(this.scroller).to({y:this.btn.height}, 300);\n    this.isShow = true;\n} else {\n    egret.Tween.get(this.scroller).to({y:this.posScrollerClose}, 300);\n    this.isShow = false;\n}\n    this.selectedIndex = this.list.selectedIndex; \/\/ this.selectedIndex \u66b4\u9732\u7ed9\u5916\u90e8\u8c03\u7528\u4ee5\u83b7\u53d6\u5f53\u524d\u9009\u62e9\u7684\u83dc\u5355\u9879\u76ee\u5e8f\u53f7\u3002\n}\n}\n}\n<\/code><\/pre>\n<p>&nbsp;<\/p>\n","protected":false},"excerpt":{"rendered":"<p>\u56e0\u4e3aegret\u5b98\u65b9\u5728\u65b0\u7248EUI\u5185\u5df2\u7ecf\u53bb\u9664\u4e86\u8001\u677fGUI\u4e2d\u7684\u4e0b\u62c9\u63a7\u4ef6\uff0c\u4e5f\u6ca1\u6709\u63d0\u4f9bEUI\u7684\u4e0b\u62c9\u83dc\u5355\u63a7\u4ef6\uff0c\u56e0\u6b64\u5c01\u88c5\u7684\u4e00 &hellip; <a href=\"http:\/\/www.imzouyang.com\/blog\/archives\/116.html\" class=\"read-more\">\u7ee7\u7eed\u9605\u8bfb <span class=\"screen-reader-text sr-only\">Egret H5 \u5f15\u64ceTypescript\u5c01\u88c5\u63a7\u4ef6: \u81ea\u5b9a\u4e49\u4e0b\u62c9\u83dc\u5355<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"aside","meta":[],"categories":[30],"tags":[],"_links":{"self":[{"href":"http:\/\/www.imzouyang.com\/blog\/wp-json\/wp\/v2\/posts\/116"}],"collection":[{"href":"http:\/\/www.imzouyang.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/www.imzouyang.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/www.imzouyang.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/www.imzouyang.com\/blog\/wp-json\/wp\/v2\/comments?post=116"}],"version-history":[{"count":1,"href":"http:\/\/www.imzouyang.com\/blog\/wp-json\/wp\/v2\/posts\/116\/revisions"}],"predecessor-version":[{"id":1650,"href":"http:\/\/www.imzouyang.com\/blog\/wp-json\/wp\/v2\/posts\/116\/revisions\/1650"}],"wp:attachment":[{"href":"http:\/\/www.imzouyang.com\/blog\/wp-json\/wp\/v2\/media?parent=116"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/www.imzouyang.com\/blog\/wp-json\/wp\/v2\/categories?post=116"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/www.imzouyang.com\/blog\/wp-json\/wp\/v2\/tags?post=116"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}