还在犹豫做不做小程序_微信小程序 wx:for遍历循环

微信小程序 wx:for遍历循环使用实例解析       这篇文章主要介绍了微信小程序 wx:for遍历循环使用实例解析,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下

这篇文章主要介绍了微信小程序 wx:for遍历循环使用实例解析,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下

效果图如下:

实现代码如下:

type.js:

// pages/type/type.js
Page({
 * 页面的初始数据
 data: {
 types: ""
 editType: function (e) {
 var typeId = e.currentTarget.dataset['id'];
 console.log("edit:"+typeId);

type.js没什么好说的，如果要说，只能说这个onLoad这里的onLoad就相当于js中的onload方法，当进入该视图时，默认全局加载一次。
type.wxml:
 view 
 view 
 navigator url="/pages/type_add/type_add" hover- 添加支出类型信息 /navigator 
 /view 
 view 
 text \n /text 
 /view 
 view 
 view 
 text 列表数据 /text 
 text \n /text 
 /view 
 view 
 view 
 view 类型名 /view 
 view 创建时间 /view 
 view 修改时间 /view 
 view 备注 /view 
 view 操作 /view 
 /view 
 block 
 view wx:for="{{types}}" wx:for-item="item" 
 view {{item.typeName}} /view 
 view {{item.createDate}} /view 
 view {{item.modifyDate}} /view 
 view {{item.remark}} /view 
 view 
 text bindtap='editType' data-id="{{item.typeId}}" 编辑 /text 
 text \n /text 
 text \n /text 
 text bindtap='delType' data-id="{{item.typeId}}" 删除 /text 
 /view 
 /view 
 /block 
 /view 
 /view 
 /view 
遍历循环主要使用的是wx:for。如果要类比的话，我觉得jstl跟这个神似。先来看看jstl,代码如下:
 c:forEach var="u" items="${user}" 
 td ${u.cid} /td 
 td ${ame} /td 
 td ${u.age } /td 
 /tr 
 /c:forEach 
var相当于我可以任意定义一个简要字母来调用item(item相当于type.js中的data或self.setData存储的数据)。
如果你还不明白的话，可以联系到$.each,代码如下:
$.each(classroom_list, function(i, c) {
 rows = rows + " tr 
 rows = rows + " td " + c.id + " /td 
 rows = rows + " td " + c.nickname + " /td 
  userId="+c.id+"' 查看详情 /a /td 
 rows = rows + " /tr "
});
type.wxss:
.table {
 border: 1px solid #ccc;
 font-size: 28rpx;
 background: #fff;
 border-right: none;
 display: flex;
 justify-content: space-between;
.td {
 text-align: center;
 border: 1px solid #ccc;
 display: inline-block;
 border-left: none;
 border-bottom: none;
 padding: 10rpx 1%;
 width: 12%;
.thead .td{
 border-top: none;
 height: 140rpx;
 line-height: 50rpx;
}
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持凡科。