微信小程序学习笔记：选项卡

uMson_n

已于 2022-03-20 17:46:07 修改

阅读量2.5k

点赞数 2

文章标签：微信小程序

于 2022-03-20 17:21:55 首次发布

本文链接：https://blog.csdn.net/umson_n/article/details/123615849

版权

本文档详细记录了微信小程序实现选项卡的步骤。首先在.js文件中定义数据，包括tabs数量和checked索引。接着在.wxml中利用wx:for循环渲染选项卡，并通过三元运算判断激活状态。在.wxss中设置样式，最后在.js中添加切换选项卡的逻辑函数，完成选项卡功能的实现。

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

第一步：

在 .js 文件里定义数据：

    data: {
        tabs:[
            "选项1",
            "选项2",
            "选项3",
            "选项4"
        ],
        checked:0
    },

tabs 表示有几个选项，checked 表示当前选中的是哪一页的索引。

第二步：

在 .wxml 编写代码：

<view id="tabs" >
    <view wx:for="{
  {tabs}}" data-idx="{
  {index}}" 
class="item {
  {checked==index?'active':''}}" bindtap="navTip">
        {
  {item}}
    </view>
</view>

<swiper current="{
  {checked}}" class="swiper" duration="300" bindchange="bindChange"> 
  <swiper-item wx:for="{
  {tabs}}"> 
     <view>页面{
  {index+1}}</view>