推广网官方推广网站,网站收录提交入口,wordpress自动加内链,如何自己开发小程序文章目录 1、弹窗2、走马灯#xff08;实现轮播图效果#xff09;3、注解6、多选框、单选框7、Stack8、TextTimer9、DatePicker 1、弹窗 显示提示信息或者用于用户交互 导入模块 prompt 接口 showToast:显示toast showDialog:显示对话框 showContextMenu:显示上下文菜单 sh… 文章目录 1、弹窗2、走马灯实现轮播图效果3、注解6、多选框、单选框7、Stack8、TextTimer9、DatePicker 1、弹窗 显示提示信息或者用于用户交互 导入模块 prompt 接口 showToast:显示toast showDialog:显示对话框 showContextMenu:显示上下文菜单 showLoading:显示loading 提示框 hideLoading:关闭loading提示框 //showToast用法用于显示提示信息
Button(reset).backgroundColor(#A0CFFF).fontColor(Color.White).fontSize(25).onClick((){prompt.showToast({message:nihao,duration:10000,/*image:* gravity:center*/})})//showDialog :用于信息交互Button().backgroundColor(#A0CFFF).fontColor(Color.White).fontSize(25).onClick((){prompt.showDialog({title:title,message:message,buttons:[{text:sure,color:#33dd44},{text:no,color:#33dd44}]})}).height(500)}2、走马灯实现轮播图效果 Swipper组件滑块视图容器子组件滑动轮播 用法 Swiper(){ForEach(this.swiperList,(item,index){Image(item)})}//自动播放.autoPlay(true)//自动播放时间间隔.interval(8000).backgroundColor(Color.Black)//指示点.indicator(true)//指示点样式.indicatorStyle({top:45,left:0,size:50,color:Color.Yellow,selectedColor:Color.Green})}.height(100%).width(100%)3、注解 Extend 封装某个组件调用方式 . Extend(Text)
function textStyle(){.fontSize(50).fontColor(#ff6700)
}
//.textStyleStyles 封装公共组件调用方式 . Styles
function comStyle(){.width(200).height(200).shadow({radius:20,color:Color.Blue,offsetX:-10,offsetY:-10})
}
//.comStyleBuilder 封装组件的内容和样式调用方式this. BuilderButtomCom(name:string){Button(name).width(200)
}
//this.ButtomCom(登录)####4、搜索框 Search搜索框组件适用于浏览器的搜索输入内容输入框等应用场景 接口 value:当前显示的文本搜索内容 placeholder:无输入时的提示文本 icon:设置搜索图标路径 属性 searchButton:搜索框末尾搜索按钮文本内容 placeholderColor:placeholder文本颜色 placeholderFont:placeholder文本样式 textTont:搜索框内文本样式 textAlign:搜索框对齐方式 copyOption:输入文本是否可复制 Search({placeholder:请输入城市名称,value:this.searchcontent,icon:,}).searchButton(查询).height(40).textFont({size:25,weight:400})####5、HttpRequest 请求
用法
let httpRequesthttp.createHttp()httpRequest.request(//urlhttp://apis.juhe.cn/simpleWeather/query?keyc06ff16464ae3abf6a8aabac50cafe6acityvalue,{method:http.RequestMethod.GET,header:{Content-Type:application/json}},(err,data){console.log(data.result.toString())})6、多选框、单选框 Checkbox:提供多选框组件 接口 name:多选框名称 group:多选框群组名称
用法
CheckboxGroup({group:hobbys}).selectAll(true).onChange((itemName:CheckboxGroupResult){console.log(JSON.stringify(itemName))})Checkbox({name:hobby,group:hobbys}).select(true).selectedColor(Color.Orange)Checkbox({name:hobby,group:hobbys}).selectedColor(Color.Brown)7、Stack 堆叠容器子组件按照先后顺序依次退爹覆盖前一个子组件 Stack(){Image(timer01.jpg).height(300)TextTimer({ isCountDown: false, controller: this.textTimerController }).format(this.format).fontColor(Color.Black).fontSize(40)//.position({x:400,y:400}).onTimer((utc: number, elapsedTime: number) {console.info(textTimer notCountDown utc is utc , elapsedTime: elapsedTime)})}8、TextTimer 通过文本显示及时信息并控制计时器状态的组件 接口 isCountDown:是否倒计时 count:倒计时时间 controller:TextTImer控制器 属性 format:自定义格式 TextTimerController start():计时开始 pause():计时暂停 reset():重置计时器 Row() {Button(start).onClick(() {this.textTimerController.start()})Button(pause).onClick(() {this.textTimerController.pause()})Button(reset).onClick(() {this.textTimerController.reset()})}9、DatePicker 日期选择器组件创建日期滑动选择器 属性lunar:日期是否显示农历 接口 start:指定选择日期的起始日期 end:结束日期 selected:设置选中项日期 build() {Column() {Button(切换公历农历).margin({ top: 30, bottom: 30 }).onClick(() {this.isLunar !this.isLunar})DatePicker({start: new Date(1970-1-1),end: new Date(2100-1-1),selected: this.selectedDate}).lunar(this.isLunar).onChange((value: DatePickerResult) {this.selectedDate.setFullYear(value.year, value.month, value.day)console.info(select current date is: JSON.stringify(value))})}.width(100%)}
