小程序切换tabs

最新推荐文章于 2023-06-15 12:00:02 发布

前端路上迷茫的小鲨鱼

最新推荐文章于 2023-06-15 12:00:02 发布

阅读量206

点赞数 1

分类专栏： uniapp vue

本文链接：https://blog.csdn.net/Guoyu1_/article/details/110382607

版权

vue 同时被 2 个专栏收录

95 篇文章 0 订阅

订阅专栏

uniapp

52 篇文章 0 订阅

订阅专栏

本文介绍了如何使用Flex布局实现页面元素的左右分布，通过设置`justify-content: space-between`实现内容间距。同时，展示了在Vue中实现Tab切换功能的两种方法，利用`:class`绑定条件样式以及事件处理实现状态切换。

摘要由CSDN通过智能技术生成

1.flex左右分布

.flex{
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  text-decoration: none;
}

2.切换tabs

  第一种
<view class="buttons">
  <view class="lib btn_re" @click="pendingClick()" :class="change?'active':''">待审批
   <view class="red_code">
    <view class="txt">{{totalCount}}</view>
   </view>
  </view>
  <view class="lib" @click="finishClick()" :class="change?'':'active'">我的完成</view>
 </view>
</view>

<view class="lib_tab" v-if="change">我是待审批</view>
<view class="lib_tab" v-else>我是完成</view>

change: true, // 切换待审批与完成

pendingClick() { //待审批
 var _this = this;
 if (_this.change == false) {
  _this.change = true
 }
},
finishClick() { //完成
 var _this = this;
 if (_this.change == true) {
  _this.change = false
 }
},

或
<view class="buttons">
    <view class="lib" @click="workClick()" :class="{ active: work }">工作台</view>
    <view class="lib btn_re" @click="pendingClick()" :class="{ active: pend }">
        待审批
        <view class="red_code">
            <view class="txt">{{BZDDate.processCount}}</view>
        </view>
    </view>
    <view class="lib" @click="finishClick()" :class="{ active: change }">我的申请</view>
</view>

work: true, // 工作台
pend: false, // 待审批
change: false, // 申请

workClick() {
    //工作台
    var _this = this;
    if (_this.work == false) {
        _this.work = true;
        _this.pend = false;
        _this.change = false;
    }
},