微信小程序如何自己手写选项卡

人间四月天，有你才值得

谢谢你来到我的生命中，陪伴我走过那段最美好的岁月

谢谢你在我的生命里，给过我的力量和温暖

谢谢你存在过，活过，爱过，离开过

唠叨一会

四月是一个忙碌的季节，忙碌之后水水文章。微信小程序如何自己手写选项卡？我之前是真的不会，若不是遇到codezen现在的我还在使用ui框架或者插件

我们就用新版UI来作为案例，我们先看界面

思路

1.我们首先要模拟一个数据，数据里面有3个标题和3个内容选项卡

2.要点击和未点击两种状态，一行里面有多个选项卡采用flex布局

3.我们点击某个选项卡的时候要切换状态和内容，且页面加载默认选中第一个

用到语法

wx:for以及三木运运算

步骤

1.通过思路我们得知我们的模拟两个数据，一个是选项卡内容数据，一个是默认值数据，我们在微信小程序js文件中编辑字段

// 选项卡数据 利用key代替索引 方便跳转
      select:[
        {title:'用户协议',content:'我之前认为成熟应该是要会什么，要做些什么，或者能处理些什么，而作者做法是“放弃”，好奇的是为什么是放弃，而不是接受呢'},
        {title:'隐私政策',content:'当我们的地图变得狭小，模糊，粗略就会导致对现实的认知过于狭隘和偏激。因此我们应该继续努力，不停探索。扩大和更新自己世界的认知；'},
        {title:'免责声明',content:'世界不停变化，冰川来临，继而消退；文化出现，随即消失，技术有限，技术似乎又无限……'},
      ],
      //初始默认值
      active:'treaty',

2.使用flex布局写好界面，同时写好点击和不点击两种状态class

//wxml代码
<view class="select">
      <view class="sselect-btn-select">
        我是点击选中状态
      </view>
      <view class="select-btn">
        我是未点击不选中状态
      </view>
</iew>

//wxss 代码
/* 选项卡 */
.select{
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 120rpx;
}
.select-btn{
  background-color: #dedede;
  border-radius: 100rpx;
  border: solid 2rpx #dedede;
  text-align: center;
  font-size: 28rpx;
  color: #ffffff;
  padding: 20rpx 40rpx;
  margin: 0 16rpx;
}
.select-btn-select{
  background-color: #2f8fff;
  box-shadow: 0rpx 6rpx 12rpx 0rpx 
    rgba(0, 0, 0, 0.16);
    border-radius: 100rpx;
  text-align: center;
  font-size: 28rpx;
  color: #ffffff;
  padding: 20rpx 40rpx;
  margin: 0 16rpx;
}
.select-content{
  margin: 76rpx 48rpx;
  color: #898989;
  line-height: 60rpx;
  font-size: 28rpx;
}

3.随后我们要使用wx:for 循环遍历出标题，且添加一个点击事件

<view class="select">
    <block wx:for="{{select}}" wx:key="inex">
      <view class="select-btn" bindtap="selectTap" data-index="{{index}}">
              {{item.title}}
      </view>
    </block>
</view>

4.点击事件传入选项卡的索引值,将值赋值给active

// 选项卡点击事件
  selectTap(e){
    this.setData({
      active:e.currentTarget.dataset.index
    })
    console.log(e)
  },

5.最后使用三目运算，如果点击选项卡的索引值和active值对比，如果相同就切换为选中样式，如果不同就是不选中样式

<view class="select">
    <block wx:for="{{select}}" wx:key="inex">
      <view class="{{active === item.key ? 'select-btn-select' : 'select-btn'}}" bindtap="selectTap" data-index="{{index}}">
        {{item.title}}
      </view>
    </block>
  </view>