微信小程序 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 相关文章推荐
JS Replace()的高级使用方法介绍
Jun 29 Javascript
js 得到文件后缀(通过正则实现)
Jul 08 Javascript
详解javascript遍历方式
Nov 11 Javascript
jquery使用on绑定a标签无效 只能用live解决
Jun 02 Javascript
深入浅析JavaScript中的Function类型
Jul 09 Javascript
Angular JS数据的双向绑定详解及实例
Dec 31 Javascript
Vue.js render方法使用详解
Apr 05 Javascript
vue中实现滚动加载更多的示例
Nov 08 Javascript
vue使用keep-alive保持滚动条位置的实现方法
Apr 09 Javascript
jQuery子选择器与可见性选择器实例分析
Jun 28 jQuery
JavaScript修改注册表实例代码
Jan 05 Javascript
vue如何在项目中调用腾讯云的滑动验证码
Jul 15 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
使用CodeIgniter的类库做图片上传
2014/06/12 PHP
php5.3以后的版本连接sqlserver2000的方法
2014/07/28 PHP
PHP获取客户端及服务器端IP的封装类
2016/07/21 PHP
PHP7安装Redis扩展教程【Linux与Windows平台】
2016/09/30 PHP
php str_replace替换指定次数的方法详解
2017/05/05 PHP
动态载入/删除/更新外部 JavaScript/Css 文件的代码
2010/07/03 Javascript
node.js中的emitter.emit方法使用说明
2014/12/10 Javascript
JavaScript通过字符串调用函数的实现方法
2015/03/18 Javascript
Bootstrap教程JS插件滚动监听学习笔记分享
2016/05/18 Javascript
全面介绍javascript实用技巧及单竖杠
2016/07/18 Javascript
浅谈js中test()函数在正则中的使用
2016/08/19 Javascript
8 行 Node.js 代码实现代理服务器
2016/12/05 Javascript
ES2015 Symbol 一种绝不重复的值
2016/12/25 Javascript
web打印小结
2017/01/11 Javascript
vuex操作state对象的实例代码
2018/04/25 Javascript
基于ionic实现下拉刷新功能
2018/05/10 Javascript
vue项目中实现的微信分享功能示例
2019/01/21 Javascript
Bootstrap实现省市区三级联动(亲测可用)
2019/07/26 Javascript
python显示天气预报
2014/03/02 Python
搭建Python的Django框架环境并建立和运行第一个App的教程
2016/07/02 Python
python里使用正则表达式的组嵌套实例详解
2017/10/24 Python
Python自定义简单图轴简单实例
2018/01/08 Python
python requests指定出口ip的例子
2019/07/25 Python
python 利用jinja2模板生成html代码实例
2019/10/10 Python
python将邻接矩阵输出成图的实现
2019/11/21 Python
浅谈JupyterNotebook导出pdf解决中文的问题
2020/04/22 Python
浅谈Selenium+Webdriver 常用的元素定位方式
2021/01/13 Python
Zavvi美国:英国娱乐之家
2017/03/19 全球购物
Vilebrequin欧洲官网:法国豪华泳装品牌(男士沙滩裤)
2018/04/14 全球购物
澳大利亚在线批发商:Simply Wholesale
2021/02/24 全球购物
行政总经理岗位职责
2013/12/05 职场文书
机电一体化自荐信
2013/12/10 职场文书
《中国梦我的梦》大学生演讲稿
2014/08/20 职场文书
学校政风行风评议心得体会
2014/10/21 职场文书
MySQL系列之六 用户与授权
2021/07/02 MySQL
MySQL 如何限制一张表的记录数
2021/09/14 MySQL