微信小程序使用for循环动态渲染页面操作示例


Posted in Javascript onDecember 25, 2018

本文实例讲述了微信小程序使用for循环动态渲染页面操作。分享给大家供大家参考,具体如下:

先来看看运行效果:

微信小程序使用for循环动态渲染页面操作示例

这种列表效果可以说是最常见的一种,肯定不是我们一个一个写上去,这就用到了我们这次要说的for循环渲染了

其实也很简单,我就直接上代码了

wxml部分:

<view wx:for='{{languageList}}' class='hua' data-name='{{item.name}}' data-id='{{item.id}}' bindtap='select'>
    <text class='yuzhong'>{{item.name}}</text>
  </view>

wxss部分:

.select {
  height: 80rpx;
  width: 90%;
  margin: 0 auto;
  border-bottom: 1px dashed #5e5e62;
  color: #fff;
  font-size: 32rpx;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  padding: 0 10rpx;
  box-sizing: border-box;
}
.hua {
  height: 80rpx;
  border-bottom: 1px dashed #5e5e62;
  width: 90%;
  margin: 0 auto;
  padding-left: 10rpx;
  box-sizing: border-box;
}
.yuzhong {
  color: #fff;
  font-size: 32rpx;
  line-height: 80rpx;
}

js部分:

data: {
    bg:"../../images/other_bg.png",
    language:'',
    isFlag:false,
    cid:'',
    // languageList:{},
    languageList:[
      {
        id:0,
        name:"菏泽"
      },
      {
        id: 1,
        name: "东北"
      },
      {
        id: 2,
        name: "北京"
      },
      {
        id: 3,
        name: "浙江"
      }
    ]
  },

希望本文所述对大家微信小程序开发有所帮助。

Javascript 相关文章推荐
jQuery AJAX 调用WebService实现代码
Mar 24 Javascript
getComputedStyle与currentStyle获取样式(style/class)
Mar 19 Javascript
浏览器缩放检测的js代码
Sep 28 Javascript
jQuery中prepend()方法用法实例
Dec 25 Javascript
Clipboard.js 无需Flash的JavaScript复制粘贴库
Oct 02 Javascript
解决JS请求服务器gbk文件乱码的问题
Oct 16 Javascript
Jquery Easyui验证组件ValidateBox使用详解(20)
Dec 18 Javascript
EasyUI学习之DataGird分页显示数据
Dec 29 Javascript
JS动态插入脚本和插入引用外部链接脚本的方法
May 21 Javascript
vue 使用高德地图vue-amap组件过程解析
Sep 07 Javascript
javascript的hashCode函数实现代码小结
Aug 11 Javascript
如何在selenium中使用js实现定位
Aug 18 Javascript
JavaScript简单实现动态改变HTML内容的方法示例
Dec 25 #Javascript
使用gulp构建前端自动化的方法示例
Dec 25 #Javascript
JavaScript实现的级联算法示例【省市二级联动功能】
Dec 25 #Javascript
详解vuex commit保存数据技巧
Dec 25 #Javascript
bootstrap table实现合并单元格效果
Dec 24 #Javascript
Electron autoUpdater实现Windows安装包自动更新的方法
Dec 24 #Javascript
Windows下支持自动更新的Electron应用脚手架的方法
Dec 24 #Javascript
You might like
一个高ai的分页函数和一个url函数
2006/10/09 PHP
PHP 5.0对象模型深度探索之类的静态成员
2008/03/27 PHP
php设计模式之模板模式实例分析【星际争霸游戏案例】
2020/03/24 PHP
js语法学习之判断一个对象是否为数组
2014/05/13 Javascript
微信小程序 购物车简单实例
2016/10/24 Javascript
深入理解Node.js 事件循环和回调函数
2016/11/02 Javascript
详解js中call与apply关键字的作用
2016/11/21 Javascript
详解Angular 4.x NgIf 的用法
2017/05/22 Javascript
基于JavaScript实现前端数据多条件筛选功能
2020/08/19 Javascript
用vue快速开发app的脚手架工具
2018/06/11 Javascript
详解js的视频和音频采集
2018/08/09 Javascript
微信小程序图片左右摆动效果详解
2019/07/13 Javascript
jQuery表单选择器用法详解
2019/08/22 jQuery
Python统计日志中每个IP出现次数的方法
2015/07/06 Python
python创建文件备份的脚本
2018/09/11 Python
为什么str(float)在Python 3中比Python 2返回更多的数字
2018/10/16 Python
Python http接口自动化测试框架实现方法示例
2018/12/06 Python
python实现二维插值的三维显示
2018/12/17 Python
Python之pymysql的使用小结
2019/07/01 Python
Jupyter Notebook 远程访问配置详解
2021/01/11 Python
中国最大的潮流商品购物网站:YOHO!BUY有货
2017/01/07 全球购物
萨克斯第五大道英国:Saks Fifth Avenue英国
2019/04/01 全球购物
农田水利实习自我鉴定
2013/09/19 职场文书
园长自我鉴定
2013/10/06 职场文书
如何掌握自荐信格式呢
2013/11/19 职场文书
教学器材管理制度
2014/01/26 职场文书
电子商务专业学生职业生涯规划
2014/03/07 职场文书
大学班级学风建设方案
2014/05/01 职场文书
优秀管理者事迹材料
2014/05/22 职场文书
委托证明书
2014/09/17 职场文书
民主评议党员登记表自我评价
2014/10/20 职场文书
2014年党风廉政工作总结
2014/12/03 职场文书
2015入党自传格式范文
2015/06/26 职场文书
2016年“抗战胜利纪念日”71周年校园广播稿
2015/12/18 职场文书
SQL 窗口函数实现高效分页查询的案例分析
2021/05/21 SQL Server
Nginx下SSL证书安装部署步骤介绍
2021/12/06 Servers