最近参加了华为举办的一个活动,做华为快应用,语法啥的和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
        })
      }

 

Logo

前往低代码交流专区

更多推荐