微信小程序 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);


  wx.navigateTo({
   url: '../type_edit/type_edit?typeId=' + typeId
  })
 },
 delType:function(e){

  var typeId = e.currentTarget.dataset['id'];

  console.log("delete:"+typeId)


  wx.showModal({
   title: '提示',
   content: '确认要删除该支出类型?',
   success: function (res) {
    if (res./confirm/i) {
     console.log('用户点击确定')

     wx.request({

      url: getApp().globalData.urlPath + "spendingType/delete",
      method: "POST",
      data: {
typeId: typeId
      },
      header: {
"Content-Type": "application/x-www-form-urlencoded"
      },
      success: function (res) {
console.log(res.data.code);
if (res.statusCode == 200) {

 //访问正常
 if (res.data.code == "000000") {
  wx.showToast({
   title: "删除成功，返回支出类型列表",
   icon: 'success',
   duration: 3000,
   success: function () {

    wx.navigateTo({
     url: '../type/type'
    })
   }
  })

 }
} else {

 wx.showLoading({
  title: '系统异常',
  fail
 })

 setTimeout(function () {
  wx.hideLoading()
 }, 2000)
}

      }
     })


    } else if (res.cancel) {
     console.log('用户点击取消')
    }
   }
  })

 },
 
 onLoad: function (options) {
  wx.setNavigationBarTitle({

   title: "支出类型列表"

  })
  var userCode = wx.getStorageSync('userId');
  var self = this
  wx.request({
   url: getApp().globalData.urlPath + "spendingType/types",//json数据地址 
   data: {
    userCode: userCode
   },
   headers: {
    "Content-Type": "application/x-www-form-urlencoded"
   },
   success: function (res) {
    self.setData({

     types: res.data.data

    });//等同于

   }
  })
 },

 
 onReady: function () {

 },

 
 onShow: function () {

 },

 
 onHide: function () {

 },

 
 onUnload: function () {

 },

 
 onPullDownRefresh: function () {

 },

 
 onReachBottom: function () {

 },

 
 onShareAppMessage: function () {

 }
})

type.js没什么好说的，如果要说，只能说这个onLoad这里的onLoad就相当于js中的onload方法，当进入该视图时，默认全局加载一次。

type.wxml:

 
  添加支出类型信息
 
 
  n
 
 
  
   列表数据
   n
  

    
     类型名
     创建时间
     修改时间
     备注
     操作
    
    
     
      {{item.typeName}}
      {{item.createDate}}
      {{item.modifyDate}}
      {{item.remark}}
      
编辑
n
n
删除
      
     
    
   
 

遍历循环主要使用的是wx:for。如果要类比的话，我觉得jstl跟这个神似。先来看看jstl,代码如下:

    
 ${u.cid}
 ${u.cname}
 ${u.age }
    

var相当于我可以任意定义一个简要字母来调用item(item相当于type.js中的data或self.setData存储的数据)。

如果你还不明白的话，可以联系到$.each,代码如下:

$.each(classroom_list, function(i, c) {

   rows = rows + "";
   rows = rows + "" + c.id + "";
   rows = rows + "" + c.nickname + "";
   rows = rows + "查看详情";
   rows = rows + ""
});

type.wxss:

.table {
 border: 1px solid #ccc;
 font-size: 28rpx;
 background: #fff;
 border-right: none;
}
 
.tr{
 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;
}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持考高分网。