devbox
盐析白兔
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

鸿蒙listitem和tabcontent+页面传参_鸿蒙listitem不能加入tab

作者：盐析白兔 | 2024-03-14 00:43:23

赞

踩

鸿蒙listitem不能加入tab

效果展示

新建项目

写Index.ets

  1. import router from '@ohos.router';
  2. @Entry
  3. @Component
  4. struct Index {
  5.   @State fontColor: string = '#182431'
  6.   @State selectedFontColor: string = '#007DFF'
  7.   @State currentIndex: number = 0
  8.   private controller: TabsController = new TabsController()
  9.   arrayList=[
  10.     {"name":"苹果","price":1,"imageUrl":"https://img1.baidu.com/it/u=1513650579,1757297287&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1681059600&t=2bdf979a877dd8723c72d7285b140734"},
  11.     {"name":"香蕉","price":2,"imageUrl":"https://img0.baidu.com/it/u=387808086,3839707072&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1681059600&t=eb4513cd82a1e087c2e5fbb6a887b376"},
  12.     {"name":"苹果","price":1,"imageUrl":"https://img1.baidu.com/it/u=1513650579,1757297287&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1681059600&t=2bdf979a877dd8723c72d7285b140734"},
  13.     {"name":"香蕉","price":2,"imageUrl":"https://img0.baidu.com/it/u=387808086,3839707072&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1681059600&t=eb4513cd82a1e087c2e5fbb6a887b376"},
  14.     {"name":"苹果","price":1,"imageUrl":"https://img1.baidu.com/it/u=1513650579,1757297287&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1681059600&t=2bdf979a877dd8723c72d7285b140734"},
  15.     {"name":"香蕉","price":2,"imageUrl":"https://img0.baidu.com/it/u=387808086,3839707072&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1681059600&t=eb4513cd82a1e087c2e5fbb6a887b376"},
  16.     {"name":"苹果","price":1,"imageUrl":"https://img1.baidu.com/it/u=1513650579,1757297287&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1681059600&t=2bdf979a877dd8723c72d7285b140734"},
  17.     {"name":"香蕉","price":2,"imageUrl":"https://img0.baidu.com/it/u=387808086,3839707072&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1681059600&t=eb4513cd82a1e087c2e5fbb6a887b376"},
  18.  
  19.   ]
  20.   arrayList1=[
  21.     {"name":"白花甲","price":3,"imageUrl":"https://cp1.douguo.com/upload/caiku/4/7/1/200_476b6ccce2615ebded56edf961473ee1.jpg"},
  22.     {"name":"黑花甲","price":4,"imageUrl":"https://img11.360buyimg.com/n1/jfs/t21088/34/576914115/285294/c5eddaf4/5b120ee3N23d15df2.png"},
  23.     {"name":"白花甲","price":3,"imageUrl":"https://cp1.douguo.com/upload/caiku/4/7/1/200_476b6ccce2615ebded56edf961473ee1.jpg"},
  24.     {"name":"黑花甲","price":4,"imageUrl":"https://img11.360buyimg.com/n1/jfs/t21088/34/576914115/285294/c5eddaf4/5b120ee3N23d15df2.png"},
  25.     {"name":"白花甲","price":3,"imageUrl":"https://cp1.douguo.com/upload/caiku/4/7/1/200_476b6ccce2615ebded56edf961473ee1.jpg"},
  26.     {"name":"黑花甲","price":4,"imageUrl":"https://img11.360buyimg.com/n1/jfs/t21088/34/576914115/285294/c5eddaf4/5b120ee3N23d15df2.png"},
  27.     {"name":"白花甲","price":3,"imageUrl":"https://cp1.douguo.com/upload/caiku/4/7/1/200_476b6ccce2615ebded56edf961473ee1.jpg"},
  28.     {"name":"黑花甲","price":4,"imageUrl":"https://img11.360buyimg.com/n1/jfs/t21088/34/576914115/285294/c5eddaf4/5b120ee3N23d15df2.png"},
  29.  
  30.   ]
  31.   arrayList2=[
  32.     {"name":"白色马桶刷","price":3.5,"imageUrl":"https://img.alicdn.com/bao/uploaded/i2/2211344733691/O1CN01veC6f01rmHTxQrc8x_!!0-item_pic.jpg_300x300q90.jpg"},
  33.     {"name":"彩色马桶刷","price":5,"imageUrl":"https://p2.ssl.qhimgs1.com/sdr/400__/t016e6ba4514daa77e2.jpg"},
  34.     {"name":"白色马桶刷","price":3.5,"imageUrl":"https://img.alicdn.com/bao/uploaded/i2/2211344733691/O1CN01veC6f01rmHTxQrc8x_!!0-item_pic.jpg_300x300q90.jpg"},
  35.     {"name":"彩色马桶刷","price":5,"imageUrl":"https://p2.ssl.qhimgs1.com/sdr/400__/t016e6ba4514daa77e2.jpg"},
  36.     {"name":"白色马桶刷","price":3.5,"imageUrl":"https://img.alicdn.com/bao/uploaded/i2/2211344733691/O1CN01veC6f01rmHTxQrc8x_!!0-item_pic.jpg_300x300q90.jpg"},
  37.     {"name":"彩色马桶刷","price":5,"imageUrl":"https://p2.ssl.qhimgs1.com/sdr/400__/t016e6ba4514daa77e2.jpg"},
  38.     {"name":"白色马桶刷","price":3.5,"imageUrl":"https://img.alicdn.com/bao/uploaded/i2/2211344733691/O1CN01veC6f01rmHTxQrc8x_!!0-item_pic.jpg_300x300q90.jpg"},
  39.     {"name":"彩色马桶刷","price":5,"imageUrl":"https://p2.ssl.qhimgs1.com/sdr/400__/t016e6ba4514daa77e2.jpg"},
  40.   ]
  41.   arrayList3=[
  42.     {"name":"白色吊带","price":7,"imageUrl":"http://image4.suning.cn/uimg/b2c/newcatentries/0070171179-000000000709981013_4_200x200.jpg"},
  43.     {"name":"吊带","price":13.5,"imageUrl":"https://ss1.baidu.com/6ONXsjip0QIZ8tyhnq/it/u=2453905705,2017021135&fm=173&app=25&f=JPEG?w=640&h=924&s=B08B9557C6134FCE592D88630300805B"},
  44.     {"name":"白色吊带","price":7,"imageUrl":"http://image4.suning.cn/uimg/b2c/newcatentries/0070171179-000000000709981013_4_200x200.jpg"},
  45.     {"name":"吊带","price":13.5,"imageUrl":"https://ss1.baidu.com/6ONXsjip0QIZ8tyhnq/it/u=2453905705,2017021135&fm=173&app=25&f=JPEG?w=640&h=924&s=B08B9557C6134FCE592D88630300805B"},
  46.     {"name":"白色吊带","price":7,"imageUrl":"http://image4.suning.cn/uimg/b2c/newcatentries/0070171179-000000000709981013_4_200x200.jpg"},
  47.     {"name":"吊带","price":13.5,"imageUrl":"https://ss1.baidu.com/6ONXsjip0QIZ8tyhnq/it/u=2453905705,2017021135&fm=173&app=25&f=JPEG?w=640&h=924&s=B08B9557C6134FCE592D88630300805B"},
  48.     {"name":"白色吊带","price":7,"imageUrl":"http://image4.suning.cn/uimg/b2c/newcatentries/0070171179-000000000709981013_4_200x200.jpg"},
  49.     {"name":"吊带","price":13.5,"imageUrl":"https://ss1.baidu.com/6ONXsjip0QIZ8tyhnq/it/u=2453905705,2017021135&fm=173&app=25&f=JPEG?w=640&h=924&s=B08B9557C6134FCE592D88630300805B"},
  50.  
  51.   ]
  52.   @Builder TabBuilder(index: number, name: string) {
  53.     Column() {
  54.       Text(name)
  55.         .fontColor(this.currentIndex === index ?
  56.         this.selectedFontColor : this.fontColor)
  57.         .fontSize(16)
  58.         .fontWeight(this.currentIndex === index ? 500 : 400)
  59.         .lineHeight(22)
  60.         .margin({ top: 17, bottom: 7 })
  61.       Divider()
  62.         .strokeWidth(2)
  63.         .color('#6666ff')
  64.         .opacity(this.currentIndex === index ? 1 : 0)
  65.     }.width('100%')
  66.   }
  67.   build() {
  68.     Tabs({ barPosition: BarPosition.Start, controller:this.controller }) {
  69.       TabContent() {
  70.         Column(){
  71.           List(){
  72.             ForEach(this.arrayList,(item,index)=>{
  73.               ListItem(){
  74.                 Row(){
  75.                   Image(item.imageUrl)
  76.                     .layoutWeight(1)
  77.                     .width(200)
  78.                     .height(200)
  79.  
  80.                   Text(item.name)
  81.                     .fontSize(20)
  82.  
  83.                     .margin({left:20})
  84.  
  85.                   Text(item.price+"/kg")
  86.                     .fontSize(20)
  87.                     .margin({left:20,right:20})
  88.                 }
  89.               }.onClick(()=>{
  90.                 router.pushUrl({
  91.                   url: "pages/Second",
  92.                   params: {
  93.                     name: item.name,
  94.                     price: item.price+"/kg",
  95.                     image:item.imageUrl
  96.                   }
  97.                 }, router.RouterMode.Single)
  98.               })
  99.             })
  100.           }
  101.         }.width('100%').height('100%').backgroundColor('#00CB87')
  102.       }.tabBar(this.TabBuilder(0, '水果'))
  103.       TabContent() {
  104.         Column(){
  105.           List(){
  106.             ForEach(this.arrayList1,(item,index)=>{
  107.               ListItem(){
  108.                 Row(){
  109.                   Image(item.imageUrl)
  110.                     .layoutWeight(1)
  111.                     .height(200)
  112.  
  113.                   Text(item.name)
  114.                     .fontSize(20)
  115.  
  116.                     .margin({left:20})
  117.  
  118.                   Text(item.price+"/kg")
  119.                     .fontSize(20)
  120.                     .margin({left:20,right:20})
  121.                 }
  122.               }.onClick(()=>{
  123.                 router.pushUrl({
  124.                   url: "pages/Second",
  125.                   params: {
  126.                     name: item.name,
  127.                     price: item.price+"/kg",
  128.                     image:item.imageUrl
  129.                   }
  130.                 }, router.RouterMode.Single)
  131.               })
  132.  
  133.             })
  134.           }
  135.         }.width('100%').height('100%').backgroundColor('#ff77b0e9')
  136.       }.tabBar(this.TabBuilder(1, '海鲜'))
  137.       TabContent() {
  138.         Column(){
  139.           List(){
  140.             ForEach(this.arrayList2,(item,index)=>{
  141.               ListItem(){
  142.                 Row(){
  143.                   Image(item.imageUrl)
  144.                     .layoutWeight(1)
  145.                     .height(200)
  146.  
  147.                   Text(item.name)
  148.                     .fontSize(20)
  149.  
  150.                     .margin({left:20})
  151.  
  152.                   Text(item.price+"/kg")
  153.                     .fontSize(20)
  154.                     .margin({left:20,right:20})
  155.                 }
  156.               }.onClick(()=>{
  157.                 router.pushUrl({
  158.                   url: "pages/Second",
  159.                   params: {
  160.                     name: item.name,
  161.                     price: item.price+"/kg",
  162.                     image:item.imageUrl
  163.                   }
  164.                 }, router.RouterMode.Single)
  165.               })
  166.             })
  167.           }
  168.         }.width('100%').height('100%').backgroundColor('#FFBF00')
  169.       }.tabBar(this.TabBuilder(2, '百货'))
  170.       TabContent() {
  171.         Column(){
  172.           List(){
  173.             ForEach(this.arrayList3,(item,index)=>{
  174.               ListItem(){
  175.                 Row(){
  176.                   Image(item.imageUrl)
  177.                     .layoutWeight(1)
  178.                     .height(200)
  179.  
  180.                   Text(item.name)
  181.                     .fontSize(20)
  182.  
  183.                     .margin({left:20})
  184.  
  185.                   Text(item.price+"/kg")
  186.                     .fontSize(20)
  187.                     .margin({left:20,right:20})
  188.                 }
  189.               }.onClick(()=>{
  190.                 router.pushUrl({
  191.                   url: "pages/Second",
  192.                   params: {
  193.                     name: item.name,
  194.                     price: item.price+"/kg",
  195.                     image:item.imageUrl
  196.                   }
  197.                 }, router.RouterMode.Single)
  198.               })
  199.             })
  200.           }
  201.         }.width('100%').height('100%').backgroundColor('#E67C92')
  202.       }.tabBar(this.TabBuilder(3, '衣服'))
  203.     }
  204.     .vertical(false) //Tabs 方向 false:横向 true:纵向
  205.     .barMode(BarMode.Fixed) //布局模式 Fixed:平均分配页签栏宽度或长度
  206.     .barWidth(360) //设置页签栏宽度
  207.     .barHeight(56) //设置页签栏高度
  208.     .animationDuration(400) //设置切换页签的滑动动画时长
  209.     .onChange((index: number) => {
  210.       this.currentIndex = index
  211.     })
  212.     .width(360)
  213.     .height(780)
  214.     .backgroundColor('#F1F3F5')
  215.     
  216.  
  217.  
  218.     /
  219.   }
  220.   clickNext() {
  221.     router.pushUrl({
  222.       url: "pages/Second",
  223.       params: {
  224.         name: "fdfs",
  225.         count: 100
  226.       }
  227.     }, router.RouterMode.Single)
  228.   }
  229. }

写Second.ets

  1. import router from '@ohos.router';
  2. @Entry
  3. @Component
  4. struct Second {
  5.   @State message: string = 'Hello World'
  6.   @State paramsFromIndex: object = router.getParams()
  7.   build() {
  8.     Row() {
  9.       Column() {
  10.         Text(this.paramsFromIndex?.['name'])
  11.           .fontSize(50)
  12.           .fontWeight(FontWeight.Bold)
  13.  
  14.         Image(this.paramsFromIndex?.['image'])
  15.  
  16.           .width(200)
  17.           .height(200)
  18.         Text(this.paramsFromIndex?.['price'])
  19.           .fontSize(50)
  20.           .fontWeight(FontWeight.Bold)
  21.         Button() {
  22.           Text('返回')
  23.             .fontSize(25)
  24.             .fontWeight(FontWeight.Bold)
  25.         }
  26.         .type(ButtonType.Capsule)
  27.         .margin({
  28.           top: 20
  29.         })
  30.         .backgroundColor('#0D9FFB')
  31.         .width('40%')
  32.         .height('5%')
  33.         // 返回按钮绑定onClick事件，点击按钮时返回到第一页
  34.         .onClick(() => {
  35.           router.back()
  36.         })
  37.  
  38.       }
  39.       .width('100%')
  40.     }
  41.     .height('100%')
  42.   }
  43. }

 如何运行：右上角眼睛

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/盐析白兔/article/detail/231510
推荐阅读