微信小程序使用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 相关文章推荐
Javascript表达式中连续的 &amp;&amp; 和 || 之赋值区别
Oct 17 Javascript
JavaScript定义类或函数的几种方式小结
Jan 09 Javascript
js交换排序 冒泡排序算法(Javascript版)
Oct 04 Javascript
浅谈Javascript变量作用域问题
Dec 16 Javascript
jQuery切换所有复选框选中状态的方法
Jul 02 Javascript
jquery实现隐藏在左侧的弹性弹出菜单效果
Sep 18 Javascript
关于Jquery中的事件绑定总结
Oct 26 Javascript
jQuery设置图片等比例缩小的方法
Apr 29 jQuery
vue2.0 资源文件assets和static的区别详解
Apr 08 Javascript
使用Nuxt.js改造已有项目的方法
Aug 07 Javascript
vue.js 实现点击按钮动态添加li的方法
Sep 07 Javascript
js+html实现点名系统功能
Nov 05 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
php miniBB中文乱码问题解决方法
2008/11/25 PHP
3个PHP多维数组转为一维数组的方法实例
2014/03/13 PHP
PHP实现数组转JSon和JSon转数组的方法示例
2018/06/14 PHP
PHP扩展Swoole实现实时异步任务队列示例
2019/04/13 PHP
添加到收藏夹代码(兼容几乎所有的浏览器)
2007/01/09 Javascript
符合标准的js表单提交的代码
2007/09/13 Javascript
JS实现随机化快速排序的实例代码
2013/08/01 Javascript
jQuery focus和blur事件的应用详解
2014/01/26 Javascript
node.js中的console.trace方法使用说明
2014/12/09 Javascript
Java中Timer的用法详解
2015/10/21 Javascript
jQuery实现鼠标经过事件的延时处理效果
2020/08/20 Javascript
基于html5和nodejs相结合实现websocket即使通讯
2015/11/19 NodeJs
浅析Javascript匿名函数与自执行函数
2016/02/06 Javascript
一个仿微博登陆邮箱提示框js开发案例
2016/07/28 Javascript
Bootstrap文件上传组件之bootstrap fileinput
2016/11/25 Javascript
JavaScript实现时钟滴答声效果
2017/01/29 Javascript
element 结合vue 在表单验证时有值却提示错误的解决办法
2018/01/22 Javascript
vue通过video.js解决m3u8视频播放格式的方法
2019/07/30 Javascript
js prototype和__proto__的关系是什么
2019/08/23 Javascript
Vue的Eslint配置文件eslintrc.js说明与规则介绍
2020/02/03 Javascript
js实现QQ邮箱邮件拖拽删除功能
2020/08/27 Javascript
解决Antd Table组件表头不对齐的问题
2020/10/27 Javascript
python遍历文件夹并删除特定格式文件的示例
2014/03/05 Python
Python图像滤波处理操作示例【基于ImageFilter类】
2019/01/03 Python
代码详解django中数据库设置
2019/01/28 Python
HTML5 Web 存储详解
2016/09/16 HTML / CSS
香港卓悦化妆品官网:BONJOUR
2017/09/21 全球购物
在网上学习全世界最好的课程:Coursera
2017/11/07 全球购物
如何做好总经理助理
2013/11/12 职场文书
后勤部长岗位职责
2013/12/14 职场文书
材料物理专业求职信
2014/09/01 职场文书
2014年除四害工作总结
2014/12/06 职场文书
小石潭记导游词
2015/02/03 职场文书
2015年为民办实事工作总结
2015/05/26 职场文书
婚庆司仪开场白
2015/05/29 职场文书
情况说明书怎么写
2015/10/08 职场文书