微信小程序 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 相关文章推荐
有趣的javascript数组定义方法
Sep 10 Javascript
jquery修改属性值实例代码(设置属性值)
Jan 06 Javascript
jQuery+html5+css3实现圆角无刷新表单带输入验证功能代码
Aug 21 Javascript
js省市县三级联动效果实例
Apr 15 Javascript
用JS写的一个Ajax库(实例代码)
Aug 06 Javascript
用jQuery的AJax实现异步访问、异步加载
Nov 02 Javascript
微信小程序实现给循环列表添加点击样式实例
Apr 26 Javascript
深入理解Vuex 模块化(module)
Sep 26 Javascript
详解VUE自定义组件中用.sync修饰符与v-model的区别
Jun 26 Javascript
vue 下列表侧滑操作实例代码详解
Jul 24 Javascript
vue项目中,main.js,App.vue,index.html的调用方法
Sep 20 Javascript
JS实现秒杀倒计时特效
Jan 02 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中通过ADODB库实现调用Access数据库之修正版本
2006/12/31 PHP
php实现购物车功能(下)
2016/01/05 PHP
PHP针对redis常用操作实例详解
2019/08/17 PHP
angularJS 入门基础
2015/02/09 Javascript
JS简单设置下拉选择框默认值的方法
2016/08/20 Javascript
老生常谈Javascript中的原型和this指针
2016/10/09 Javascript
JavaScript之underscore_动力节点Java学院整理
2017/07/03 Javascript
layui.js实现的表单验证功能示例
2017/11/15 Javascript
vue.js-div滚动条隐藏但有滚动效果的实现方法
2018/03/03 Javascript
JavaScript分步实现一个出生日期的正则表达式
2018/03/22 Javascript
jQuery实现的淡入淡出与滑入滑出效果示例
2018/04/18 jQuery
微信小程序中添加客服按钮contact-button功能
2018/04/27 Javascript
react native 获取地理位置的方法示例
2018/08/28 Javascript
如何为你的JS项目添加智能提示与类型检查详解
2019/03/12 Javascript
vue学习笔记五:在vue项目里面使用引入公共方法详解
2019/04/04 Javascript
微信小程序 SOTER 生物认证DEMO 指纹识别功能
2019/12/13 Javascript
解决vue bus.$emit触发第一次$on监听不到问题
2020/07/28 Javascript
python 解析html之BeautifulSoup
2009/07/07 Python
python错误处理详解
2014/09/28 Python
解决Python中由于logging模块误用导致的内存泄露
2015/04/23 Python
Python实现的RSS阅读器实例
2015/07/25 Python
python实现指定文件夹下的指定文件移动到指定位置
2018/09/17 Python
Python简单处理坐标排序问题示例
2019/07/11 Python
图解python全局变量与局部变量相关知识
2019/11/02 Python
PyCharm永久激活方式(推荐)
2020/09/22 Python
Python request post上传文件常见要点
2020/11/20 Python
支持IE8的纯css3开发的响应式设计动画菜单教程
2014/11/05 HTML / CSS
研究生自荐信
2013/10/09 职场文书
监理资料员岗位职责
2014/01/03 职场文书
六年级语文下册教学计划
2015/01/22 职场文书
歼十出击观后感
2015/06/11 职场文书
2019年健身俱乐部的创业计划书
2019/08/26 职场文书
《家庭教育》读后感3篇
2019/12/18 职场文书
记一次Mysql不走日期字段索引的原因小结
2021/10/24 MySQL
python基础之类方法和静态方法
2021/10/24 Python
使用Nginx+Tomcat实现负载均衡的全过程
2022/05/30 Servers