快应用页面带参数跳转
程序员文章站
2024-02-18 15:49:46
...
最近参加了华为举办的一个活动,做华为快应用,语法啥的和vue很类似,就是很多标签,属性不太支持,只能转变思路去实现自己想要的功能。但是在想要在每个tab页做一个固定在顶部搜索框时,切换tab时,每个页面对应的搜索框没法隐藏,无奈之下,只能让所有tab页公用一个搜索框。再根据在点击不同tab页时获取当前下标值cuurentindex,z再使用router跳转页面时传递一个参数key,进入到搜索页时在页面初始化时获取key值,再根据key进行判断显示不同的搜索页面
代码实现
tab.ux
switchContent: function (e) {
let index = e.index;
if(index === 3){
this.className = 'none'
}else{
this.className = ''
}
currentIndex = e.index;
for (let i = 0; i < this.data.list.length; i++) {
let element = this.data.list[i];
element.show = false;
if (i === index) {
element.show = true;
this.$page.setTitleBar({ text: element.title, menu: false });
}
}
},
toSearch(){
if(currentIndex === 0){
router.push({
uri: '/Index/component/Search_Page',
params: { key:"*3D"}
})
}
if(currentIndex === 1){
router.push({
uri: '/Index/component/Search_Page',
params: { key:"双色球"}
})
}
if(currentIndex === 2){
router.push({
uri: '/Index/component/Search_Page',
params: { key:"七乐彩"}
})
}
}
search_page.ux
onInit () {
if(this.key === "双色球"){
this.$page.setTitleBar({
text: '双色球查询',
textColor: '#ffffff',
backgroundColor: '#ff685d',
backgroundOpacity:1,
menu:true
})
}
if(this.key === "*3D"){
this.$page.setTitleBar({
text: '*3D查询',
textColor: '#ffffff',
backgroundColor: '#ff685d',
backgroundOpacity:1,
menu:true
})
}
if(this.key === "七乐彩"){
this.$page.setTitleBar({
text: '七乐彩查询',
textColor: '#ffffff',
backgroundColor: '#ff685d',
backgroundOpacity:1,
menu:true
})
}