微信小程序 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 相关文章推荐
JSONP 跨域访问代理API-yahooapis实现代码
Dec 02 Javascript
JS替换文本域内的回车示例
Feb 18 Javascript
javascript基本类型详解
Nov 28 Javascript
jQuery中live()方法用法实例
Jan 19 Javascript
jquery获取select选中值的方法分析
Dec 22 Javascript
JQuery.validationEngine表单验证插件(推荐)
Dec 10 Javascript
Bootstrap源码解读媒体对象、列表组和面板(10)
Dec 26 Javascript
使用layer弹窗和layui表单实现新增功能
Aug 09 Javascript
JavaScript多种页面刷新方法小结
Apr 04 Javascript
详解javascript中var与ES6规范中let、const区别与用法
Jan 11 Javascript
如何阻止移动端浏览器点击图片浏览
Aug 29 Javascript
javascript进阶篇深拷贝实现的四种方式
Jul 07 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
openPNE常用方法分享
2011/11/29 PHP
PHP APC的安装与使用详解
2013/06/13 PHP
PHP执行Curl时报错提示CURL ERROR: Recv failure: Connection reset by peer的解决方法
2014/06/26 PHP
深入浅析Yii admin的权限控制
2016/08/31 PHP
php 修改上传文件大小限制实例详解
2016/10/23 PHP
javascript 面向对象全新理练之继承与多态
2009/12/03 Javascript
jquery插件之easing使用
2010/08/19 Javascript
javascript实现div的拖动并调整大小类似qq空间个性编辑模块
2012/12/12 Javascript
jquery根据name属性查找的小例子
2013/11/21 Javascript
如何防止回车(enter)键提交表单
2014/05/11 Javascript
11种ASP连接数据库的方法
2015/09/18 Javascript
学习JavaScript事件流和事件处理程序
2016/01/25 Javascript
BootStrap和jQuery相结合实现可编辑表格
2016/04/21 Javascript
JavaScript兼容性总结之获取非行间样式案例
2016/08/07 Javascript
微信小程序 HTTPS报错整理常见问题及解决方案
2016/12/14 Javascript
jQuery EasyUI window窗口使用实例代码
2017/12/25 jQuery
详解使用vue-cli脚手架初始化Vue项目下的项目结构
2018/03/08 Javascript
使用vue-route 的 beforeEach 实现导航守卫(路由跳转前验证登录)功能
2018/03/22 Javascript
vue与iframe之间的信息交互的实现
2020/04/08 Javascript
微信小程序实现导航栏和内容上下联动功能代码
2020/06/29 Javascript
[01:10]为家乡而战!完美世界城市挑战赛全国总决赛花絮
2019/07/25 DOTA
python避免死锁方法实例分析
2015/06/04 Python
python 随机森林算法及其优化详解
2019/07/11 Python
python解释器spython使用及原理解析
2019/08/24 Python
django框架ModelForm组件用法详解
2019/12/11 Python
利用Python脚本实现自动刷网课
2020/02/03 Python
python时间日期操作方法实例小结
2020/02/06 Python
匡威比利时官网:Converse Belgium
2017/04/13 全球购物
Shopee新加坡:东南亚与台湾电商平台
2019/01/25 全球购物
小学生期末自我鉴定
2014/01/19 职场文书
高中英语教学反思
2014/02/04 职场文书
《长城》教学反思
2014/02/14 职场文书
司法所长先进事迹
2014/06/02 职场文书
拔河比赛口号
2014/06/10 职场文书
禁毒主题班会教案
2015/08/14 职场文书
致男子1500米运动员的广播稿
2019/11/08 职场文书