微信小程序wx:for遍历循环使用实例解析

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

效果图如下：

实现代码如下：

type.js:

//pages/type/type.jsPage({ /** *页面的初始数据*/data : { type : ' ' }，editType:函数(e){ var typeId=e . currenttarget。数据集[' id ']；控制台。日志(' edit : ' TypeID)；wx.navigateTo({ url: './type_edit/type_edit？typeId=' typeId }) }，DelType : FuncTion(e){ var TypeID=e . CurrentTarget。数据集[' id ']；控制台。日志(' delete : ' TypeID)wx。ShowModal({ title : '提示，content: '确认要删除该支出类型？成功：函数如果确认控制台。日志('用户点击确定)wx。请求({ URL : GetApp()。全球数据。URL路径' spendingType/delete '，方法： 'POST '，数据： { typeId: typeId }，标头： { ' Content-Type ' : ' application/x-www-form-URL encoded ' }，成功：函数(RES){ console。日志数据。代码)；if (res.statusCode==200) { //访问正常if(RES .数据。代码=' 000000 '){ wx。显示吐司({ 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。日志('用户点击取消') } } }) }, /** * 生命周期函数-监听页面加载*/onLoad:函数（选项){ wx。SetnavigationBarTitle({ title : '支出类型列表})var userCode=wx。getstorage ync(' UserID ')；var self=这个wx。请求({ URL : GetApp()。GlobalDATa。urlpath ' SpendingType/types '，//json数据地址数据： {用户代码：用户代码}，标头RS : { ' Content-Type ' : ' application/x-www-form-URL encoded ' }，成功：函数(RES){ self。setdata({ Type : RES . data。data })；//等同于} }) }, /** * 生命周期函数-监听页面初次渲染完成*/onReady:函数(){ },/** *生命周期函数-监听页面显示*/OnShaw :函数(){ },/** *生命周期函数-监听页面隐藏*/onHide:函数(){ },/** *生命周期函数-监听页面卸载*/onUnload:函数(){ },/** *页面相关事件处理函数-监听用户下拉动作*/onpulldownlrefresh :函数(){ },/** *页面上拉触底事件的处理函数*/onReachBottom:函数(){ },/** *用户点击右上角分享*/onsharepmessage : function(){ } })类型。射流研究…没什么好说的，如果要说，只能说这个装载这里的装载就相当于射流研究…中的装载方法，当进入该视图时，默认全局加载一次。

type.wxml:

视图视图导航器URL='/pages/type _ add/type _ add ' hover-class=' navigator-hover '添加支出类型信息/导航器/视图视图文本\ n/文本/视图视图文本列表数据/text text \ n/text/view view class=' table ' view class=' tr the ad ' view class=' TD '类型名/view view class='td '创建时间/view view class='td '修改时间/view view class='td '备注/view view class='td '操作/view/view block view class=' tr ' wx : for=' { { type } } ' wx : for-item=' item ' view class=' TD ' { item。type name } }/view view class=' TD ' { item。创建日期} }/查看视图类=' TD ' { item。修改日期} }/查看视图类=' TD ' { item。remote } }/view view class=' TD ' text bind tap=' editType ' data-id=' { { item。typeid } } }编辑/text text \ n/text text \ n/text text bind tap=' DelType ' data-id=' { { item。“TYPe id } }”删除/文本/视图/视图/块/视图/视图/视图/视图遍历循环主要使用的是wx:for。如果要类比的话，我觉得标准标记库跟这个神似。先来看看jstl，代码如下：

c : foreach var=' u ' items=' $ { user } ' tr TD $ { u . cid }/TD TD $ { u . cname }/TD TD $ { u . age }/TD/tr/c : foreach var相当于我可以任意定义一个简要字母来调用项目（项目相当于type.js中的数据或self.setData存储的数据)。

如果你还不明白的话，可以联系到$.每一个，代码如下：

$.每个（教室_列表，函数(I，c){ row=row ' tr '；row=row ' TD ' c . id '/TD '；row=row ' TD ' c .昵称'/TD '；row=row ' TDA。html？userId=' c.id ' '查看详情/a/TD '；rows=rows '/tr ' })；type.wxss:表{ border: 1px固体# CCC font-size : 28 rpx；背景# fffborder-right:无；} .tr { display : flex justice-content :空格；} .TD { text-align : centerborder: 1px固体# cccdisplay:内联块；边框-左侧：无；边框-底部：无；padd : 10 rpx 1%；宽度： 12%;} .thead .TD {边框-顶部：无；高度： 140 rpx线高： 50 rpx}以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。