快速学会自定义组件做taBar导航栏,解决点击闪屏

慢慢相遇 慢慢相识 慢慢拥抱 慢慢相处 慢慢在一起 慢慢一起走 喜欢才不是随随便便就可以开始

和结束的事情 这世界太快 我想和你慢慢来再久一点.

快速学会自定义组件做taBar导航栏,解决点击闪屏

自定义taBar导航栏目的在于我们可以可以更好的拥有样式控制,更好的满足交互上的动效;这是我们的学习的初心,总结下目前有几种方式可以自定义导航

1.直接在index页面写导航,随后使用v-if条件判断切换;优点:上手最快没有什么顾虑,缺点:inex页面代码很长

2.custom-tab-bar官方接口,该方式有利于提升性能,同时可以使用原生taBar的所有接口,优点:可以满足自己的一些样式定制,缺点:无法支持SVG,GIF等格式,和原生一样需要在pages.json文件中配置

3.组件是完全自定义,自行控制样式和图片甚至任何操作;缺点:点击的时候会一闪一闪的

快速定义组件

来自codezzen大佬提供一个代码段学习,定义组件只需要在component目录下建立vue文件(建议插件名字和vue文件名字是一致的)

//例如
component/fr-tabar/fr-tabar.vue

随后文件中需要包含name和props ,即可完成一个组件的建立

//组件名字
name:'fr-tabar',
//定义组件参数
props:{
  inexActive:{
    type:Number,//定义参数类型
    default:0 //定义参数默认默认值
  }
}

组件界面完整代码

<template>
  <view class="">
    <view class="fr-taber">
      <view class="fr-taber-view" >
        <block v-for="(tars ,index) in tarList" :key="index">
          <view class="fr-taber-icon" @tap="frTaBar(index,tars.rout)">
            <image class="fengrui-img" :src="inxexActive == index ?  tars.icon_active : tars.icon " mode="widthFix"></image>
          </view>
        </block>
      </view>
    </view>
  </view>
</template>
​
<script>
  export default {
    name: "fr-tabar",//组件名字
    //组件的参数
    props: {
      // 检测类型 
      // 文本
      inxexActive: {
        type: Number,
        default: 0,
      },
    
    },
    data() {
      return {
        title: 'Hello',
        tarList:[
          {
            title:'首页',
            icon:'../../static/tabar/home.png',
            icon_active:'../../static/tabar/home_h.png',
            rout:'../../pages/index/index'
          },
          {
            title:'专题',
            icon:'../../static/tabar/catelog.png',
            icon_active:'../../static/tabar/catelog_h.png',
            rout:'../../pages/car/car'
          },
          {
            title:'搜索',
            icon:'../../static/tabar/res.png',
            icon_active:'../../static/tabar/res_h.png',
            rout:'../../pages/search/search'
          }
        ]
      }
    },
    onLoad() {
      
    },
    methods: {
      frTaBar(e,l){
        let tar_rout = l;
        uni.switchTab({
            url: tar_rout
        });
      }
    }
  }
</script>
​
<style>
  .fengrui-img{
    height: 100%;
    width: 100%;
  }
  .fr-taber-icon {
    height: 56upx;
    width: 56upx;
    border: 1px solid red;
  }
​
  .fr-taber-list {}
​
  .fr-taber-view {
    background-color: #f3f3f3;
    border-radius: 200upx;
    height: 80upx;
    width: 76%;
    margin: auto;
    display: flex;
    justify-content: space-around;
    align-items: center;
    padding: 0upx 20upx;
  }
​
  .fr-taber {
    width: 100%;
    position: fixed;
    bottom: 40upx;
    height: auto;
  }
</style>
​
​

自定义tabar

这里提到是的是开头说的第三种方式,自己写组件自己写样式;但是但是点击的时候会闪一下屏幕,目前的解决方式是在pages.json中配置tabar界面 随后定义导航,这样就可以解决页面闪烁问题。坑永远是跳不出去的,tabr的上的图片会闪烁一次 第二次者不会;

快速学会自定义组件做taBar导航栏,解决点击闪屏

此外因为在pages.json中配置了就得使用uni.switchTab跳转,该跳转无法支持参数;我们就得在固定写死inxexActive

总结

本文文章适合学习一下最简单的组件封装和定义tabar基础,若在项目上使用得多测试

完整代码下载

https://yinfengrui.lanzouw.com/i042a2d

封面模版下载

https://banner.frbkw.com

(3)
枫瑞博客枫瑞博客
上一篇 2021-09-16 12:45
下一篇 2021-09-30 12:45

相关推荐

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注

评论列表(6条)

  • R
    R 2021-10-26 19:18

    111

  • 伊凡
    伊凡 2021-09-28 03:50

    之前提问了,wordpress用了第三方模板,是可以使用你这个小程序吗?

  • 伊凡
    伊凡 2021-09-27 20:02

    哈喽,问一下,我wordpress安装了第三方模板,对于你这个程序有影响吗?