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


Posted in Javascript onSeptember 09, 2019

这篇文章主要介绍了微信小程序 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) {
     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:

<view>
 <view>
  <navigator url="/pages/type_add/type_add" hover-class="navigator-hover">添加支出类型信息</navigator>
 </view>
 <view>
  <text>\n</text>
 </view>
 <view>
  <view>
   <text>列表数据</text>
   <text>\n</text>
  </view>
<view class="table">
    <view class="tr thead">
     <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="{{types}}" wx:for-item="item">
      <view class="td">{{item.typeName}}</view>
      <view class="td">{{item.createDate}}</view>
      <view class="td">{{item.modifyDate}}</view>
      <view class="td">{{item.remark}}</view>
      <view class="td">
       <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}">
    <tr>
        <td>${u.cid}</td>
        <td>${u.cname}</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>";
          rows = rows + "<td><a href='student_submit_info.html?userId="+c.id+"'>查看详情</a></td>";
          rows = rows + "</tr>"
});

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jQuery AjaxQueue改进步骤
Oct 06 Javascript
javascript动画对象支持加速、减速、缓入、缓出的实现代码
Sep 30 Javascript
JS、DOM和JQuery之间的关系示例分析
Apr 09 Javascript
jQuery中:file选择器用法实例
Jan 04 Javascript
JavaScript替换当前页面的方法
Apr 03 Javascript
基于Css3和JQuery实现打字机效果
Aug 11 Javascript
Jquery获取当前城市的天气信息
Aug 05 Javascript
JavaScript实现格式化字符串函数String.format
Dec 16 Javascript
利用Javascript实现一套自定义事件机制
Dec 14 Javascript
React之PureComponent的使用作用
Jul 10 Javascript
微信小程序开发实现的IP地址查询功能示例
Mar 28 Javascript
vue中js判断长时间不操作界面自动退出登录(推荐)
Jan 22 Javascript
layer关闭当前窗口页面以及确认取消按钮的方法
Sep 09 #Javascript
微信小程序 checkbox使用实例解析
Sep 09 #Javascript
js之切换全屏和退出全屏实现代码实例
Sep 09 #Javascript
使用Easyui实现查询条件的后端传递并自动刷新表格的两种方法
Sep 09 #Javascript
一次微信小程序内地图的使用实战记录
Sep 09 #Javascript
微信小程序HTTP请求从0到1封装
Sep 09 #Javascript
JS回调函数 callback的理解与使用案例分析
Sep 09 #Javascript
You might like
php实现rc4加密算法代码
2012/04/25 PHP
php批量上传的实现代码
2013/06/09 PHP
Jquery实现无刷新DropDownList联动实现代码
2010/03/08 Javascript
Js动态添加复选框Checkbox的实例方法
2013/04/08 Javascript
Jquery on绑定的事件 触发多次实例代码
2016/12/08 Javascript
使用jQuery实现购物车结算功能
2017/08/15 jQuery
vue-cli开发时,关于ajax跨域的解决方法(推荐)
2018/02/03 Javascript
JavaScript的词法结构精华篇
2018/10/17 Javascript
vue 之 css module的使用方法
2018/12/04 Javascript
vue2.0项目集成Cesium的实现方法
2019/07/30 Javascript
Vue.js下拉菜单组件使用方法详解
2019/10/19 Javascript
小程序自定义圆形进度条
2020/11/17 Javascript
python根据给定文件返回文件名和扩展名的方法
2015/03/27 Python
通过python+selenium3实现浏览器刷简书文章阅读量
2017/12/26 Python
python 类对象和实例对象动态添加方法(分享)
2017/12/31 Python
名片管理系统python版
2018/01/11 Python
对python多线程与global变量详解
2018/11/09 Python
pandas数据处理之绘图的实现
2020/06/15 Python
通过cmd进入python的步骤
2020/06/16 Python
浅谈tensorflow使用张量时的一些注意点tf.concat,tf.reshape,tf.stack
2020/06/23 Python
python 使用递归的方式实现语义图片分割功能
2020/07/16 Python
python网络爬虫实现发送短信验证码的方法
2021/02/25 Python
轻松制作精彩视频:Animoto
2018/09/19 全球购物
机械制造专业毕业生求职信
2014/03/02 职场文书
旅游管理毕业生自荐信范文
2014/03/19 职场文书
我的中国梦演讲稿600字
2014/08/19 职场文书
关于环保的活动方案
2014/08/25 职场文书
推普周国旗下讲话稿
2014/09/21 职场文书
统计工作个人总结
2015/03/03 职场文书
质检员岗位职责范本
2015/04/07 职场文书
2015年园林绿化工作总结
2015/05/23 职场文书
忠犬八公的故事观后感
2015/06/05 职场文书
百年校庆宣传标语口号
2015/12/26 职场文书
如何让2019年上半年的工作总结更出色!
2019/07/01 职场文书
创业计划书之闲置物品置换中心
2019/12/25 职场文书
Java结构型设计模式之组合模式详解
2022/09/23 Java/Android