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;}