Effect display
New project
Write Index.ets
import router from '@ohos.router';
@Entry
@Component
struct Index {
@State fontColor: string = '#182431'
@State selectedFontColor: string = '#007DFF'
@State currentIndex: number = 0
private controller: TabsController = new TabsController()
arrayList=[
{"name":"Apple","price":1,"imageUrl":"https://img1.baidu.com/it/u=1513650579,1757297287 & amp;fm =253 &app=138 &size=w931 &n=0 &f=JPEG &fmt=auto?sec=1681059600 &t=2bdf979a877dd8723c72d7285b140734"},
{"name":"banana","price":2,"imageUrl":"https://img0.baidu.com/it/u=387808086,3839707072 & amp;fm =253 &app=138 &size=w931 &n=0 &f=JPEG &fmt=auto?sec=1681059600 &t=eb4513cd82a1e087c2e5fbb6a887b376"},
{"name":"Apple","price":1,"imageUrl":"https://img1.baidu.com/it/u=1513650579,1757297287 & amp;fm =253 &app=138 &size=w931 &n=0 &f=JPEG &fmt=auto?sec=1681059600 &t=2bdf979a877dd8723c72d7285b140734"},
{"name":"banana","price":2,"imageUrl":"https://img0.baidu.com/it/u=387808086,3839707072 & amp;fm =253 &app=138 &size=w931 &n=0 &f=JPEG &fmt=auto?sec=1681059600 &t=eb4513cd82a1e087c2e5fbb6a887b376"},
{"name":"Apple","price":1,"imageUrl":"https://img1.baidu.com/it/u=1513650579,1757297287 & amp;fm =253 &app=138 &size=w931 &n=0 &f=JPEG &fmt=auto?sec=1681059600 &t=2bdf979a877dd8723c72d7285b140734"},
{"name":"banana","price":2,"imageUrl":"https://img0.baidu.com/it/u=387808086,3839707072 & amp;fm =253 &app=138 &size=w931 &n=0 &f=JPEG &fmt=auto?sec=1681059600 &t=eb4513cd82a1e087c2e5fbb6a887b376"},
{"name":"Apple","price":1,"imageUrl":"https://img1.baidu.com/it/u=1513650579,1757297287 & amp;fm =253 &app=138 &size=w931 &n=0 &f=JPEG &fmt=auto?sec=1681059600 &t=2bdf979a877dd8723c72d7285b140734"},
{"name":"banana","price":2,"imageUrl":"https://img0.baidu.com/it/u=387808086,3839707072 & amp;fm =253 &app=138 &size=w931 &n=0 &f=JPEG &fmt=auto?sec=1681059600 &t=eb4513cd82a1e087c2e5fbb6a887b376"},
]
arrayList1=[
{"name":"Baihuajia","price":3,"imageUrl":"https://cp1.douguo.com/upload/caiku/4/7/1/ 200_476b6ccce2615ebded56edf961473ee1.jpg"},
{"name":"Black Sixties","price":4,"imageUrl":"https://img11.360buyimg.com/n1/jfs/t21088/34/576914115/ 285294/c5eddaf4/5b120ee3N23d15df2.png"},
{"name":"Baihuajia","price":3,"imageUrl":"https://cp1.douguo.com/upload/caiku/4/7/1/ 200_476b6ccce2615ebded56edf961473ee1.jpg"},
{"name":"Black Sixties","price":4,"imageUrl":"https://img11.360buyimg.com/n1/jfs/t21088/34/576914115/ 285294/c5eddaf4/5b120ee3N23d15df2.png"},
{"name":"Baihuajia","price":3,"imageUrl":"https://cp1.douguo.com/upload/caiku/4/7/1/ 200_476b6ccce2615ebded56edf961473ee1.jpg"},
{"name":"Black Sixties","price":4,"imageUrl":"https://img11.360buyimg.com/n1/jfs/t21088/34/576914115/ 285294/c5eddaf4/5b120ee3N23d15df2.png"},
{"name":"Baihuajia","price":3,"imageUrl":"https://cp1.douguo.com/upload/caiku/4/7/1/ 200_476b6ccce2615ebded56edf961473ee1.jpg"},
{"name":"Black Sixties","price":4,"imageUrl":"https://img11.360buyimg.com/n1/jfs/t21088/34/576914115/ 285294/c5eddaf4/5b120ee3N23d15df2.png"},
]
arrayList2=[
{"name":"White toilet brush","price":3.5,"imageUrl":"https://img.alicdn.com/bao/uploaded/i2/2211344733691/O1CN01veC6f01rmHTxQrc8x_ !!0-item_pic.jpg_300x300q90.jpg"},
{"name":"color toilet brush","price":5,"imageUrl":"https://p2.ssl.qhimgs1.com/sdr/400__/t016e6ba4514daa77e2.jpg "},
{"name":"White toilet brush","price":3.5,"imageUrl":"https://img.alicdn.com/bao/uploaded/i2/2211344733691/O1CN01veC6f01rmHTxQrc8x_ !!0-item_pic.jpg_300x300q90.jpg"},
{"name":"color toilet brush","price":5,"imageUrl":"https://p2.ssl.qhimgs1.com/sdr/400__/t016e6ba4514daa77e2.jpg "},
{"name":"White toilet brush","price":3.5,"imageUrl":"https://img.alicdn.com/bao/uploaded/i2/2211344733691/O1CN01veC6f01rmHTxQrc8x_ !!0-item_pic.jpg_300x300q90.jpg"},
{"name":"color toilet brush","price":5,"imageUrl":"https://p2.ssl.qhimgs1.com/sdr/400__/t016e6ba4514daa77e2.jpg "},
{"name":"White toilet brush","price":3.5,"imageUrl":"https://img.alicdn.com/bao/uploaded/i2/2211344733691/O1CN01veC6f01rmHTxQrc8x_ !!0-item_pic.jpg_300x300q90.jpg"},
{"name":"color toilet brush","price":5,"imageUrl":"https://p2.ssl.qhimgs1.com/sdr/400__/t016e6ba4514daa77e2.jpg "},
]
arrayList3=[
{"name":"White suspenders","price":7,"imageUrl":"http://image4.suning.cn/uimg/b2c/newcatentries/0070171179-000000000709981013_4_200x200. jpg"},
{"name":"sling","price":13.5,"imageUrl":"https://ss1.baidu.com/6ONXsjip0QIZ8tyhnq/it/u=2453905705,2017021135 & amp ;fm=173 & amp;app=25 & amp;f=JPEG?w=640 & amp;h=924 & amp;s=B08B9557C6134FCE592D88630300805B"},
{"name":"White suspenders","price":7,"imageUrl":"http://image4.suning.cn/uimg/b2c/newcatentries/0070171179-000000000709981013_4_200x200. jpg"},
{"name":"sling","price":13.5,"imageUrl":"https://ss1.baidu.com/6ONXsjip0QIZ8tyhnq/it/u=2453905705,2017021135 & amp ;fm=173 & amp;app=25 & amp;f=JPEG?w=640 & amp;h=924 & amp;s=B08B9557C6134FCE592D88630300805B"},
{"name":"White suspenders","price":7,"imageUrl":"http://image4.suning.cn/uimg/b2c/newcatentries/0070171179-000000000709981013_4_200x200. jpg"},
{"name":"sling","price":13.5,"imageUrl":"https://ss1.baidu.com/6ONXsjip0QIZ8tyhnq/it/u=2453905705,2017021135 & amp ;fm=173 & amp;app=25 & amp;f=JPEG?w=640 & amp;h=924 & amp;s=B08B9557C6134FCE592D88630300805B"},
{"name":"White suspenders","price":7,"imageUrl":"http://image4.suning.cn/uimg/b2c/newcatentries/0070171179-000000000709981013_4_200x200. jpg"},
{"name":"sling","price":13.5,"imageUrl":"https://ss1.baidu.com/6ONXsjip0QIZ8tyhnq/it/u=2453905705,2017021135 & amp ;fm=173 & amp;app=25 & amp;f=JPEG?w=640 & amp;h=924 & amp;s=B08B9557C6134FCE592D88630300805B"},
]
@Builder TabBuilder(index: number, name: string) {
Column() {
Text(name)
.fontColor(this.currentIndex === index ?
this.selectedFontColor : this.fontColor)
.fontSize(16)
.fontWeight(this.currentIndex === index ? 500 : 400)
.lineHeight(22)
.margin({ top: 17, bottom: 7 })
Divider()
.strokeWidth(2)
.color('#6666ff')
.opacity(this.currentIndex === index? 1 : 0)
}.width('100%')
}
build() {
Tabs({ barPosition: BarPosition. Start, controller: this. controller }) {
TabContent() {
Column(){
List(){
ForEach(this.arrayList,(item,index)=>{
ListItem(){
Row(){
Image(item. imageUrl)
.layoutWeight(1)
.width(200)
.height(200)
Text(item.name)
.fontSize(20)
.margin({left:20})
Text(item.price + "/kg")
.fontSize(20)
.margin({left:20,right:20})
}
}.onClick(()=>{
router.pushUrl({
url: "pages/Second",
params: {
name: item.name,
price: item.price + "/kg",
image:item.imageUrl
}
}, router.RouterMode.Single)
})
})
}
}.width('100%').height('100%').backgroundColor('#00CB87')
}.tabBar(this.TabBuilder(0, 'fruit'))
TabContent() {
Column(){
List(){
ForEach(this.arrayList1,(item,index)=>{
ListItem(){
Row(){
Image(item. imageUrl)
.layoutWeight(1)
.height(200)
Text(item.name)
.fontSize(20)
.margin({left:20})
Text(item.price + "/kg")
.fontSize(20)
.margin({left:20,right:20})
}
}.onClick(()=>{
router.pushUrl({
url: "pages/Second",
params: {
name: item.name,
price: item.price + "/kg",
image:item.imageUrl
}
}, router.RouterMode.Single)
})
})
}
}.width('100%').height('100%').backgroundColor('#ff77b0e9')
}.tabBar(this.TabBuilder(1, 'seafood'))
TabContent() {
Column(){
List(){
ForEach(this.arrayList2,(item,index)=>{
ListItem(){
Row(){
Image(item. imageUrl)
.layoutWeight(1)
.height(200)
Text(item.name)
.fontSize(20)
.margin({left:20})
Text(item.price + "/kg")
.fontSize(20)
.margin({left:20,right:20})
}
}.onClick(()=>{
router.pushUrl({
url: "pages/Second",
params: {
name: item.name,
price: item.price + "/kg",
image:item.imageUrl
}
}, router.RouterMode.Single)
})
})
}
}.width('100%').height('100%').backgroundColor('#FFBF00')
}.tabBar(this.TabBuilder(2, 'department store'))
TabContent() {
Column(){
List(){
ForEach(this.arrayList3,(item,index)=>{
ListItem(){
Row(){
Image(item. imageUrl)
.layoutWeight(1)
.height(200)
Text(item.name)
.fontSize(20)
.margin({left:20})
Text(item.price + "/kg")
.fontSize(20)
.margin({left:20,right:20})
}
}.onClick(()=>{
router.pushUrl({
url: "pages/Second",
params: {
name: item.name,
price: item.price + "/kg",
image:item.imageUrl
}
}, router.RouterMode.Single)
})
})
}
}.width('100%').height('100%').backgroundColor('#E67C92')
}.tabBar(this.TabBuilder(3, 'clothes'))
}
.vertical(false) //Tabs direction false: horizontal true: vertical
.barMode(BarMode.Fixed) //Layout mode Fixed: Evenly distribute the width or length of the tab bar
.barWidth(360) //Set tab bar width
.barHeight(56) //Set the height of the tab bar
.animationDuration(400) //Set the sliding animation duration for switching tabs
.onChange((index: number) => {
this. currentIndex = index
})
.width(360)
.height(780)
.backgroundColor('#F1F3F5')
/
}
clickNext() {
router.pushUrl({
url: "pages/Second",
params: {
name: "fdfs",
count: 100
}
}, router.RouterMode.Single)
}
}
Write Second.ets
import router from '@ohos.router';
@Entry
@Component
struct Second {
@State message: string = 'Hello World'
@State paramsFromIndex: object = router. getParams()
build() {
Row() {
Column() {
Text(this.paramsFromIndex?.['name'])
.fontSize(50)
.fontWeight(FontWeight.Bold)
Image(this.paramsFromIndex?.['image'])
.width(200)
.height(200)
Text(this.paramsFromIndex?.['price'])
.fontSize(50)
.fontWeight(FontWeight.Bold)
Button() {
Text('return')
.fontSize(25)
.fontWeight(FontWeight.Bold)
}
.type(ButtonType.Capsule)
.margin({
top: 20
})
.backgroundColor('#0D9FFB')
.width('40%')
.height('5%')
// Bind the onClick event to the return button, and return to the first page when the button is clicked
.onClick(() => {
router.back()
})
}
.width('100%')
}
.height('100%')
}
}
How it works: Top right eye
