微信小程序学习笔记：实现tab切换和for循环嵌套

最近在研究小程序，写了一个下图所示的实例：

上面部分是Tab标签，点击会出现选中效果，下面部分是内容框，随着tab标签的切换而且换。

现在就简单的记录一下，class部分就不写了，可以根据自己的实际情况进行设置。

tab标签部分我用了 scroll-view 滑动组件，这里就不详细介绍了，有时间再单独写一个介绍。

定义一个 tabActive，给 tab 绑定一个点击事件，通过 e 获取到被点击的 current 的值，将这个值赋给 tabActive ，并和 {{index}} 进行比较，两个值相同则给它一个代表选中的类名，实现 tab 的点击效果。

下面的 {{serviceList}} 是内容部分，当 tabActive  和 {{index}} 值相同时，给他一个 show 的类名，实现内容区的切换效果。

js 部分，点击获取 current 值：

js 数据部分：比较随意哈，请忽略。。。

贴一下代码：声明一下我也是初学者，可能方法不是最好的，也可能存在一些问题，欢迎大家批评指正，共同交流。

index.wxml 部分代码：

<scroll-view scroll-x scroll-with-animation="true">
  <view class='cate-tab'>
    <view class='cate-tab-item {{tabActive==index?"active":""}}' wx:for='{{cateTabItem}}' bindtap="tabClick" data-current="{{index}}" wx:key="{{index}}">
      {{item}}
    </view>
  </view>
</scroll-view>
<view wx:for="{{serviceList}}" class='cate-list {{tabActive==index?"show":"hidden"}}' wx:key="{{*this}}">
  <view class='cate-list-item' wx:for="{{item}}" wx:for-item="items" wx:key="">
    <view class='user-info'>
      <image class='user-logo' src="{{items.logo}}"></image>
      <text class='user-name'>{{items.name}}</text>
      <view class='like-box-fr'>
        <image class='user-like' src='../../icons/like.png'></image>
        <text class='like-num'>52</text>
      </view>
    </view>
    <view class='product-info'>
      <view>{{items.info}}</view>
      <image src="{{items.src}}"></image>
    </view>
  </view>
</view>

index.js 部分代码：

数据：

tabActive: 0, //先给tabActive设置一初始值，默认是第一个显示
cateTabItem: [
      '全部',
      '人才招聘',
      '企业服务',
      '二手闲置',
      '生活服务',
      '企业需求'
    ],
    serviceList:[
        [{
          logo: '../../image/boy.png',
          name: 'Deshun',
        info: 'WXML（WeiXin Markup Language）写法：<标签名 属性名="属性名"> </标签名>注意：小程序是有大小写敏感的，书写的时候注意区分大小写四个语言特性：1.数据绑定、组件属性：Mustache数据绑定使用 Mustache 语法（双大括号）将变量包起来',
        src: '../../image/html5.jpg',
      }],
      [{
        logo: '../../icons/cate-icon1.png',
        name: '李四',
        info: 'WXSS（WeiXin Markup Language）写法：<标签名 属性名="属性名"> </标签名>注意：小程序是有大小写敏感的，书写的时候注意区分大小写四个语言特性：1.数据绑定、组件属性：Mustache数据绑定使用 Mustache 语法（双大括号）将变量包起来',
        src: '../../image/html5.jpg'
      }],
      [{
        logo: '../../icons/cate-icon1.png',
        name: '王五',
        info: '王五王五王五王五王五',
        src: '../../icons/cate-icon1.png',
      }],
      [{
        logo: '../../icons/cate-icon1.png',
        name: '马六',
        info: '马六马六马六马六马六马六',
        src: '../../icons/cate-icon1.png',
      }],
      [{
        logo: '../../icons/cate-icon1.png',
        name: '赵七',
        info: '赵七赵七赵七赵七赵七赵七',
        src: '../../icons/cate-icon1.png',
      }],
      [
        {logo: '../../icons/cate-icon1.png',
        name: '孙八',
        info: '孙八孙八孙八孙八孙八孙八孙八孙八',
        src: '../../icons/cate-icon1.png',
        },
      ],
    ],

点击事件：

tabClick: function(e) { //点击tab 设置 tabActive 的值
    this.setData({
      tabActive: e.currentTarget.dataset.current
    })
  },

未经允许不得转载：前端资源网 - w3h5 » 微信小程序学习笔记：实现tab切换和for循环嵌套