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