w3h5

微信小程序学习笔记:实现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
    })
  },


赞 (0)
分享到: +More |

评论 沙发

换个身份