鸿蒙开发BindSheet选择章节效果

鸿蒙开发BindSheet选择章节效果

鸿蒙点击某个组件，组件下方出现列表选择弹框，并且这个弹框绑定这个组件的

一、效果图：

二、思路：

就用Select组件

三、全部代码：

@Entry
@Component
struct Index {@State chapterList:Array<FormateChapterModel> = [{value:'1-10章'},{value:'11-20章'},{value:'21-30章'},{value:'31-40章'},{value:'41-50章'},{value:'51-60章'}]; // 存储章节分页@State selectText:string = '1-10章' ; // 存储下拉菜单选中内容@State selectIndex:number = 0; // 存储下拉菜单选中项的索引值aboutToAppear(): void {}build() {RelativeContainer() {Select(this.chapterList).value(this.selectText).selected(this.selectIndex).onSelect((index:number, value:string) => {this.selectIndex = index;this.selectText = this.chapterList[this.selectIndex].value}).id('HelloWorld').alignRules({center: { anchor: '__container__', align: VerticalAlign.Center },middle: { anchor: '__container__', align: HorizontalAlign.Center }})}.height('100%').width('100%')}
}

四、项目demo源码结构图：

有需要完整源码demo的私信我，我每天都看私信的