欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

快应用页面带参数跳转

程序员文章站 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
        })
      }

 

相关标签: 快应用 前端