赞
踩
显示提示信息或者用于用户交互
导入模块 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) }
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%')
@Extend
封装某个组件:调用方式 .
@Extend(Text)
function textStyle(){
.fontSize(50)
.fontColor('#ff6700')
}
//.textStyle
@Styles
封装公共组件,调用方式: .
@Styles
function comStyle(){
.width('200')
.height('200')
.shadow({radius:20,color:Color.Blue,offsetX:-10,offsetY:-10})
}
//.comStyle
@Builder
封装组件的内容和样式:调用方式this.
@Builder
ButtomCom(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 httpRequest=http.createHttp()
httpRequest.request(
//url
"http://apis.juhe.cn/simpleWeather/query?key=c06ff16464ae3abf6a8aabac50cafe6a&city="+value,
{
method:http.RequestMethod.GET,
header:{
'Content-Type':'application/json'
}
},(err,data)=>{
console.log(data.result.toString())
}
)
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)
堆叠容器,子组件按照先后顺序依次退爹,覆盖前一个子组件
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)
})
}
通过文本显示及时信息并控制计时器状态的组件
接口:
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()
})
}
日期选择器组件,创建日期滑动选择器
属性: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%') }
Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。