微信小程序：for循环与if判断

for和if一般都写在block里面。

wx:for="{{abc}}"：这是for循环，其中的abc就是你js文件的data里面定义的，一般都是数组。

index默认是循环的下标。

item默认是当前的值。

index和item可以自己定义名字：

        wx:for-index="a"        这里面的a就可以替换原来的index

        wx:for-item="b"         这里面的b就可以替换原来的item

wx:if="{{index%2==0}}"：这是if判断，其中index我取的就是当前的下标。

下面实现了一个相邻两行数组变色，并且点击某一行，就会选中成白色的功能。

效果图

 

two.js

// pages/table/table.js
Page({

    /**
     * 页面的初始数据
     */
    data: {
  
       cindex:-1,
  
      //班级学生的信息  视图中使用表格的形式做展现
      stus:[{
        "id":"1001","name":"赵一","addr":"苏州"
      },{
        "id":"1002","name":"赵二","addr":"上海"
      },{
        "id":"1003","name":"赵三","addr":"杭州"
      },{
        "id":"1004","name":"赵四","addr":"北京"
      },{
        "id":"1005","name":"赵五","addr":"广州"
      },
      {
        "id":"1006","name":"赵六","addr":"广西"
      },{
        "id":"1007","name":"赵七","addr":"广东"
      },{
        "id":"1008","name":"赵八","addr":"湖州"
      },{
        "id":"1009","name":"赵九","addr":"嘉兴"
      },{
        "id":"1010","name":"赵十","addr":"西藏"
      }
    ]
  
    },
    clickitem(event)
    {
  
      console.log(event);
  
      let  clickIndex=event.currentTarget.dataset.index;
  
      this.setData({cindex:clickIndex});
  
    },
  
    /**
     * 生命周期函数--监听页面加载
     */
    onLoad: function (options) {
  
    },
  
    /**
     * 生命周期函数--监听页面初次渲染完成
     */
    onReady: function () {
  
    },
  
    /**
     * 生命周期函数--监听页面显示
     */
    onShow: function () {
  
    },
  
    /**
     * 生命周期函数--监听页面隐藏
     */
    onHide: function () {
  
    },
  
    /**
     * 生命周期函数--监听页面卸载
     */
    onUnload: function () {
  
    },
  
    /**
     * 页面相关事件处理函数--监听用户下拉动作
     */
    onPullDownRefresh: function () {
  
    },
  
    /**
     * 页面上拉触底事件的处理函数
     */
    onReachBottom: function () {
  
    },
  
    /**
     * 用户点击右上角分享
     */
    onShareAppMessage: function () {
  
    }
  })

two.json

{
  "usingComponents": {}
}

two.wxml

<!--pages/table/table.wxml-->
<view  class="pageview">
  <view  class="tr">
     <view  class="th"><text>编号</text></view>
     <view  class="th"><text>姓名</text></view>
     <view  class="th"><text>地址</text></view>
  </view>
  <block  wx:for="{{stus}}" wx:for-item="stu">
    <block  wx:if="{{index%2==0}}">
      <view  class="{{index==cindex?'str':'tr1'}}"  bindtap="clickitem" data-index="{{index}}">
        <view  class="td"><text>{{stu.id}}</text></view>
        <view  class="td"><text>{{stu.name}}</text></view>
         <view  class="td"><text>{{stu.addr}}</text></view>
       </view>
    </block>
    <block  wx:if="{{index%2!=0}}">
      <view  class="{{index==cindex?'str':'tr2'}}" bindtap="clickitem" data-index="{{index}}">
        <view  class="td"><text>{{stu.id}}</text></view>
        <view  class="td"><text>{{stu.name}}</text></view>
         <view  class="td"><text>{{stu.addr}}</text></view>
       </view>
    </block>
  </block>
</view>

two.wxss

/* pages/table/table.wxss */
.pageview{
    width: 100%;
    height: 100vh;
  }
  .tr{
    width: 100%;
    height: 50px;
    background-color: pink;
    display: flex;
    position: fixed;
    left: 0px;
    top:0px;
    z-index: 999;
  }
  .th{
    width: 32%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: black;
    letter-spacing: 5px;
    font-weight: bold;
  }
  .td{
    width: 32%;
    display: flex;
    align-items: center;
    justify-content: center;
    color:black;
  }
  .tr1{
    position: relative;
    left: 0px;
    top:50px;
    width: 100%;
    height: 50px;
    background-color: orange;
    display: flex;
  }
  .tr2{
    position: relative;
    left: 0px;
    top:50px;
    width: 100%;
    height: 50px;
    background-color: salmon;
    display: flex;
  }
  .str{
    position: relative;
    left: 0px;
    top:50px;
    width: 100%;
    height: 50px;
    background-color: snow;
    display: flex;
    
  }