微信小程序使用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 append() html时的小问题的解决方法
Dec 16 Javascript
javascript中的括号()用法小结
Apr 14 Javascript
当滚动条滚动到页面底部自动加载增加内容的js代码
May 13 Javascript
jQuery Validate初步体验(一)
Dec 12 Javascript
第三章之Bootstrap 表格与按钮功能
Apr 25 Javascript
整理关于Bootstrap模态弹出框的慕课笔记
Mar 29 Javascript
AngularJS之自定义服务详解(factory、service、provider)
Apr 14 Javascript
Angular4 Select选择改变事件的方法
Oct 09 Javascript
Koa代理Http请求的示例代码
Oct 10 Javascript
vue使用swiper.js重叠轮播组建样式
Nov 14 Javascript
vue项目里面引用svg文件并给svg里面的元素赋值
Aug 17 Javascript
arcgis.js控制地图地体的显示范围超出区域自动弹回(实现思路)
Jan 28 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 字符串操作入门教程
2006/12/06 PHP
用PHP实现多服务器共享SESSION数据的方法
2007/03/16 PHP
通过php删除xml文档内容的方法
2015/01/23 PHP
php使用array_search函数实现数组查找的方法
2015/06/12 PHP
PHP自动生成缩略图函数的源码示例
2019/03/18 PHP
获取网站跟路径的javascript代码(站点及虚拟目录)
2009/10/20 Javascript
JQuery Dialog的内存泄露问题解决方法
2010/06/18 Javascript
js对象关系图 方便dom操作
2012/03/18 Javascript
JavaScript使用slice函数获取数组部分元素的方法
2015/04/06 Javascript
javascript鼠标滑动评分控件完整实例
2015/05/13 Javascript
Google 地图叠加层实例讲解
2016/08/06 Javascript
基于JavaScript实现购物网站商品放大镜效果
2016/09/06 Javascript
Vue框架中正确引入JS库的方法介绍
2017/07/30 Javascript
js最简单的双向绑定实例讲解
2018/01/02 Javascript
JavaScript函数的特性与应用实践深入详解
2018/12/30 Javascript
使用layui实现树形结构的方法
2019/09/20 Javascript
nodejs+express最简易的连接数据库的方法
2020/12/23 NodeJs
[02:18]《我与DAC》之工作人员:为了热爱DOTA2的玩家们
2018/03/28 DOTA
[58:21]DOTA2亚洲邀请赛 4.3 突围赛 Liquid vs VGJ.T 第二场
2018/04/04 DOTA
Django中的CBV和FBV示例介绍
2018/02/25 Python
利用python脚本如何简化jar操作命令
2019/02/24 Python
对Python 检查文件名是否规范的实例详解
2019/06/10 Python
python pillow模块使用方法详解
2019/08/30 Python
python使用Matplotlib改变坐标轴的默认位置
2019/10/18 Python
python GUI库图形界面开发之PyQt5打开保存对话框QFileDialog详细使用方法与实例
2020/02/27 Python
Python 多线程C段扫描、检测 Ping扫描脚本的实现
2020/09/03 Python
详解python实现可视化的MD5、sha256哈希加密小工具
2020/09/14 Python
python实现计算图形面积
2021/02/22 Python
美国折扣地毯销售网站:Rugs.com
2020/03/27 全球购物
介绍一下linux的文件权限
2014/07/20 面试题
历史学专业毕业生求职信
2013/09/27 职场文书
物业管理计划书
2014/01/10 职场文书
应届毕业生求职信范文
2015/03/19 职场文书
2016元旦文艺汇演主持词
2015/07/06 职场文书
浅谈移动端中的视口(viewport)的具体使用
2021/04/13 HTML / CSS
关于使用Redisson订阅数问题
2022/01/18 Redis