网站开发公司怎么接单子,河南网站关键词优化,自己做的网站怎么让别人访问,网站302跳转目录
一、轮播组件 Swiper
二、列表-List 1、简单的List
2、嵌套的List
三、Tabs容器组件
1、系统自带tabs案例
2、自定义导航栏#xff1a; 一、轮播组件 Swiper
Entry
Component
struct PageSwiper {State message: string Hello Worldprivate SwCon: SwiperControl…目录
一、轮播组件 Swiper
二、列表-List 1、简单的List
2、嵌套的List
三、Tabs容器组件
1、系统自带tabs案例
2、自定义导航栏 一、轮播组件 Swiper
Entry
Component
struct PageSwiper {State message: string Hello Worldprivate SwCon: SwiperController new SwiperController()build() {Column() {Swiper(this.SwCon) {Text(龙).backgroundColor(Color.Red).textStyle()Text(兔).backgroundColor(Color.Yellow).textStyle()Text(神).backgroundColor(Color.Orange).textStyle()}// .autoPlay(true).interval(2000).indicatorStyle({color: Color.White,selectedColor: Color.Pink,size: 20}).onChange(index{console.log(${index})})// .vertical(true)Row() {Button(上一个).onClick(v {this.SwCon.showPrevious();}).margin({ top: 10, right: 10 })Button(下一个).onClick(v {this.SwCon.showNext()}).margin({ left: 10, top: 10 })}.width(100%).justifyContent(FlexAlign.Center)}.height(100%)}
}Extend(Text) function textStyle() {.width(100%).height(200)
}
二、列表-List
列表是一种复杂的容器当列表项达到一定数量内容超过屏幕大小时可以自动提供滚动功能。它适合用于呈现同类数据类型或数据类型集例如图片和文本。在列表中显示数据集合是许多应用程序中的常见要求(如通讯录.音乐列表、购物清单等)。 ListltemGroup用于列表数据的分组展示其子组件也是Listltem。Listltem表示单个列表项可以包含单个子组件。 1、简单的List
Entry
Component
struct PageList {State message: string Hello WorldState list: string[] [子鼠, 丑牛, 寅虎, 卯兔, 辰龙, 巳蛇, 午马, 未羊, 申猴, 酉鸡, 戌狗, 亥猪]ScrollList: Scroller new Scroller()State isNoBottom:booleantrue;build() {Row() {Column() {List({ scroller: this.ScrollList }) {ForEach(this.list, (item, index) {ListItem() {Text(item).fontSize(25)}.height(100).width(100%).backgroundColor(Color.Pink).align(Alignment.Center) //控制item的字体位置.margin({ top: 10 }).swipeAction({ //侧滑删除的样式end: this.Delete(index)})})}.width(100%).height(50%).backgroundColor(Color.Gray)// .listDirection(Axis.Horizontal)//控制滑动的方向.alignListItem(ListItemAlign.Center) //控制list内部的位置.onScrollIndex((star,end){if(this.list.length-1endthis.isNoBottom){this.isNoBottomfalseconsole.log(end---------------到底了)}})Button(回顶部).onClick(v {this.ScrollList.scrollToIndex(0)}).margin({top:10})}.height(100%).width(100%).justifyContent(FlexAlign.Center)}.height(100%)}BuilderDelete(index: number) {Text(删除).backgroundColor(Color.Orange).height(100).width(80).textAlign(TextAlign.Center).fontSize(26).fontColor(Color.Grey).onClick(v {this.list.splice(index, 1)})}
}
2、嵌套的List
Entry
Component
struct PageList2 {State message: string Hello WorldState cityList: Object[] [{ type: A, name: [安顺, 安庆, 安康] }, { type: B, name: [北京, 北大荒, 保定] }, { type: C, name: [长春, 长安, 长冶] }]// 嵌套的list列表。build() {Row() {List(){ForEach(this.cityList,item{ListItemGroup({header:this.head(item.type)}){ForEach(item.name,item1{ListItem(){Text(item1)}.height(80).width(100%).align(Alignment.Start)})}})}.width(100%).height(30%).margin({left:10}).sticky(StickyStyle.Header)//悬浮一级目录}.height(100%)}Builderhead(type){Text(type).fontSize(25).fontColor(Color.Red).backgroundColor(Color.White)}
}
三、Tabs容器组件
当页面信息较多时为了让用户能够聚焦于当前显示的内容需要对页面内容进行分类提高页面空间利用率。[Tabs]组件可以在一个页面内快速实现视图内容的切换一方面提升查找信息的效率另一方面精简用户单次获取到的信息量。 Tabs组件的页面组成包含两个部分分别是TabContent和TabBar。TabContent是内容页TabBar是导航页签栏页面结构如下图所示根据不同的导航类型布局会有区别可以分为底部导航、顶部导航、侧边导航其导航栏分别位于底部、顶部和侧边。 每一个TabContent对应的内容需要有一个页签可以通过TabContent的tabBar属性进行配置。在如下TabContent组件上设置属性tabBar可以设置其对应页签中的内容tabBar作为内容的页签。
1、系统自带tabs案例
Entry
Component
struct PageTabs {State message: string Hello Worldbuild() {Tabs({barPosition:BarPosition.End}){TabContent(){spring()}.tabBar(春天)TabContent(){summmer()}.tabBar(夏天)TabContent(){autumn()}.tabBar(秋天)}// .vertical(true).scrollable(true).barMode(BarMode.Scrollable)//tabbar可以滚动}
}Component
struct spring{build(){Row(){Text(春天来了)}}
}
Component
struct summmer{build(){Row(){Text(夏天来了)}}
}
Component
struct autumn{build(){Row(){Text(秋天来了)}}
}
2、自定义导航栏
对于底部导航栏一般作为应用主页面功能区分为了更好的用户体验会组合文字以及对应语义图标表示页签内容这种情况下需要自定义导航页签的样式。 Entry
Component
struct PageTabs {State message: string Hello WorldState indexSelected:number0controller:TabsControllernew TabsController()BuildertabStyle(path:string,name:string ,pathSelected:string,index:number){Column(){Image(this.indexSelectedindex?pathSelected:path).size({width:25,height:25})Text(name).fontColor(this.indexSelectedindex?#14c145:Color.Black)}.width(100%).height(50).onClick(v{this.indexSelectedindexthis.controller.changeIndex(index)})}build() {Tabs({barPosition:BarPosition.End,controller:this.controller}){TabContent(){spring()}.tabBar(this.tabStyle(images/admin_.png,春天,images/admin.png,0))TabContent(){summmer()}.tabBar(this.tabStyle(images/baoxiu_.png,夏天,images/baoxiu.png,1))TabContent(){autumn()}.tabBar(this.tabStyle(images/hetong_.png,秋天,images/hetong.png,2))}// .vertical(true).scrollable(true).onChange(index{console.log(index--------滑动到)this.indexSelectedindex})// .barMode(BarMode.Scrollable)//tabbar可以滚动 会导致tabitem充满屏幕}
}Component
struct spring{build(){Row(){Text(春天来了)}}
}
Component
struct summmer{build(){Row(){Text(夏天来了)}}
}
Component
struct autumn{build(){Row(){Text(秋天来了)}}
}
