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

人间四月天，有你才值得

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

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

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

唠叨一会

四月是一个忙碌的季节，忙碌之后水水文章。微信小程序如何自己手写选项卡？我之前是真的不会，若不是遇到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>

文章封面图片下载地址

https://banner.frbkw.com