微信小程序使用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函数中的arguments参数
Aug 01 Javascript
JQuery中$.each 和$(selector).each()的区别详解
Mar 13 Javascript
JavaScript子窗口调用父窗口变量和函数的方法
Oct 09 Javascript
简单总结JavaScript中的String字符串类型
May 26 Javascript
解析Javascript单例模式概念与实例
Dec 05 Javascript
Vue.js 2.0窥探之Virtual DOM到底是什么?
Feb 10 Javascript
Vue.js结合Ueditor富文本编辑器的实例代码
Jul 11 Javascript
深入讲解xhr(XMLHttpRequest)/jsonp请求之abort
Jul 26 Javascript
vue富文本框(插入文本、图片、视频)的使用及问题小结
Aug 17 Javascript
vue.js层叠轮播效果的实例代码
Nov 08 Javascript
JavaScript ES2019中的8个新特性详解
Feb 20 Javascript
微信小程序全选多选效果实现代码解析
Jan 21 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
蝙蝠侠:侠影之谜
2020/03/04 欧美动漫
谈一谈收音机的高放电路
2021/03/02 无线电
php多层数组与对象的转换实例代码
2013/08/05 PHP
PHP实现获取中英文首字母
2015/06/19 PHP
关于php支持的协议与封装协议总结(推荐)
2017/11/17 PHP
PHP时间日期增减操作示例【date strtotime实现加一天、加一月等操作】
2018/12/21 PHP
JQuery 解析多维的Json数据格式
2009/11/02 Javascript
jQuery总体架构的理解分析
2011/03/07 Javascript
重构Javascript代码示例(重构前后对比)
2013/01/23 Javascript
使用js实现一个可编辑的select下拉列表
2014/02/20 Javascript
Node.js环境下JavaScript实现单链表与双链表结构
2016/06/12 Javascript
vue.js学习笔记:如何加载本地json文件
2017/01/17 Javascript
canvas实现钟表效果
2017/02/13 Javascript
bootstrap datetimepicker日期插件超详细使用方法介绍
2017/02/23 Javascript
JS监控关闭浏览器操作的实例详解
2017/09/12 Javascript
Elementui表格组件+sortablejs实现行拖拽排序的示例代码
2019/08/28 Javascript
vue 二维码长按保存和复制内容操作
2020/09/22 Javascript
kNN算法python实现和简单数字识别的方法
2014/11/18 Python
python字典键值对的添加和遍历方法
2016/09/11 Python
python用模块zlib压缩与解压字符串和文件的方法
2016/12/16 Python
python自动发送邮件脚本
2018/06/20 Python
Django-xadmin+rule对象级权限的实现方式
2020/03/30 Python
罗德与泰勒百货官网:Lord & Taylor
2016/08/12 全球购物
英国领先的在线礼品店:Getting Personal
2019/09/24 全球购物
Currentbody法国:健康与美容高科技产品
2020/08/16 全球购物
公司财务总监岗位职责
2013/12/14 职场文书
教育技术职业规划范文
2014/03/04 职场文书
团购业务员岗位职责
2014/03/15 职场文书
《小鹰学飞》教学反思
2014/04/23 职场文书
2014年扶贫工作总结
2014/11/18 职场文书
《1942》观后感
2015/06/08 职场文书
认识实习感想
2015/08/10 职场文书
jquery插件实现代码雨特效
2021/04/24 jQuery
React 高阶组件HOC用法归纳
2021/06/13 Javascript
SQL Server实现分页方法介绍
2022/03/16 SQL Server
SpringCloud Feign请求头删除修改的操作代码
2022/03/20 Java/Android