微信小程序学习笔记：实现tab切换和for循环嵌套
最近在研究小程序，写了一个下图所示的实例：
微信小程序学习笔记：实现tab切换和for循环嵌套 小程序 第1张
上面部分是Tab标签，点击会出现选中效果，下面部分是内容框，随着tab标签的切换而且换。
现在就简单的记录一下，class部分就不写了，可以根据自己的实际情况进行设置。
tab标签部分我用了 scroll-view 滑动组件，这里就不详细介绍了，有时间再单独写一个介绍。
定义一个 tabActive，给 tab 绑定一个点击事件，通过 e 获取到被点击的 current 的值，将这个值赋给 tabActive ，并和 {{index}} 进行比较，两个值相同则给它一个代表选中的类名，实现 tab 的点击效果。
下面的 {{serviceList}} 是内容部分，当 tabActive 和 {{index}} 值相同时，给他一个 show 的类名，实现内容区的切换效果。
微信小程序学习笔记：实现tab切换和for循环嵌套 小程序 第2张
js 部分，点击获取 current 值：
微信小程序学习笔记：实现tab切换和for循环嵌套 小程序 第3张
js 数据部分：比较随意哈，请忽略。。。
微信小程序学习笔记：实现tab切换和for循环嵌套 小程序 第4张
贴一下代码：声明一下我也是初学者，可能方法不是最好的，也可能存在一些问题，欢迎大家批评指正，共同交流。
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
})
},本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2018-08-21)，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读