1. 首页首页
  2. 科技前沿科技前沿

uni-app导航栏切换

科技前沿 • • 阅读 50

uni-app导航栏切换给每一个 nav title 加一个 click 点击事件 并传一个具体形参 当然跟着移动的下划线是伪元素写的 在 methods 里 this isActive 形参 然后在 class active isActive 1 条件显示

大家好，我是讯享网，很高兴认识大家。
  1. 给每一个nav_title加一个click点击事件，并传一个具体形参；（当然跟着移动的下划线是伪元素写的）
  2. 在methods里this.isActive = 形参,然后在 :class="{'active':isActive==1}"条件显示；

  3. 在nav_item，做一个v-if="isActive==1"
     

    <template> <view> <!-- nav --> <view class="nav"> <view class="flex_between"> <view class="nav_title" v-for="item in nav"> <view :class="{'active':isActive==item.isActive}" @click="chenked(item.isActive)"> { 
    
      
    {item.name}} </view> </view> </view> </view> <!-- nav-item --> <view class="nav_item" v-if="isActive==1"> 11 </view> <view class="nav_item" v-if="isActive==2"> 222 </view> <view class="nav_item" v-if="isActive==3"> 333 </view> </view> </template>

    讯享网 
    讯享网<script> export default { data() { return { nav:[ {name:'商品',isActive:1}, {name:'评价',isActive:2}, {name:'详情',isActive:3}, ], isActive: 1 }; }, onShow() { }, onLoad(params) { }, methods: { //切换nav chenked(type) { this.isActive = type }, }, } </script>
    .nav { border-top: 1rpx solid #f2f2f2; background-color: #fff; .flex_between { display: flex; .nav_title { height: 88rpx; line-height: 88rpx; width: 100%; text-align: center; font-size: 32rpx; font-family: "PingFang"; color: rgb(102, 102, 102); } } } .active { position: relative; color: #31d378; } .active::after { content: ""; position: absolute; width: 100rpx; height: 4rpx; background-color: #31d378; left: 0px; right: 0px; bottom: 0px; margin: auto; }


    讯享网

小讯
上一篇 2025-01-05 10:57
下一篇 2025-04-08 08:14

相关推荐

版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容，请联系我们，一经查实，本站将立刻删除。
如需转载请保留出处：https://51itzy.com/kjqy/39801.html