微信小程序使用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 获取链接(url)参数的方法[正则与截取字符串]
Feb 09 Javascript
IE6下出现JavaScript未结束的字符串常量错误的解决方法
Nov 21 Javascript
深入理解JavaScript系列(30):设计模式之外观模式详解
Mar 03 Javascript
JavaScript获取指定元素位置的方法
Apr 08 Javascript
JavaScript函数使用的基本教程
Jun 04 Javascript
jQuery实现的无限级下拉菜单功能示例
Sep 12 Javascript
jQuery轻松实现无缝轮播效果
Mar 22 jQuery
JavaScript实现分页效果
Mar 28 Javascript
web前端vue实现插值文本和输出原始html
Jan 19 Javascript
微信小程序BindTap快速连续点击目标页面跳转多次问题处理
Apr 08 Javascript
灵活使用console让js调试更简单的方法步骤
Apr 23 Javascript
ant design 日期格式化的实现
Oct 27 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的引用原因分析
2012/09/06 PHP
PHP+Javascript实现在线拍照功能实例
2015/07/18 PHP
PHP如何通过表单直接提交大文件详解
2019/01/08 PHP
AJAX架构之Dojo篇
2007/04/10 Javascript
浅谈JavaScript实现面向对象中的类
2014/12/09 Javascript
使用pjax实现无刷新更改页面url
2015/02/05 Javascript
jQuery+css实现炫目的动态块漂移效果
2016/01/28 Javascript
使用递归遍历对象获得value值的实现方法
2016/06/14 Javascript
JavaScript学习笔记整理_setTimeout的应用
2016/09/19 Javascript
VueJs与ReactJS和AngularJS的异同点
2016/12/12 Javascript
Vue.js实战之Vuex的入门教程
2017/04/01 Javascript
js 发布订阅模式的实例讲解
2017/09/10 Javascript
vue-cli与webpack处理静态资源的方法及webpack打包的坑
2018/05/15 Javascript
jQuery创建折叠式菜单
2019/06/15 jQuery
Vue使用mixin分发组件的可复用功能
2019/09/01 Javascript
javascript运行机制之执行顺序理解
2020/08/03 Javascript
[01:07]DOTA2次级职业联赛 - Fpb战队宣传片
2014/12/01 DOTA
[01:17:47]TNC vs VGJ.S 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
python开发之str.format()用法实例分析
2016/02/22 Python
Django自带日志 settings.py文件配置方法
2019/08/30 Python
Python控制台输出时刷新当前行内容而不是输出新行的实现
2020/02/21 Python
使用Python爬取弹出窗口信息的实例
2020/03/14 Python
python 实现仿微信聊天时间格式化显示的代码
2020/04/17 Python
tensorflow 2.1.0 安装与实战教程(CASIA FACE v5)
2020/06/30 Python
python修改微信和支付宝步数的示例代码
2020/10/12 Python
python 实现端口扫描工具
2020/12/18 Python
Html5 APP中监听返回事件处理的方法示例
2018/03/15 HTML / CSS
Marc Jacobs官方网站:美国奢侈品牌
2017/08/29 全球购物
新西兰珠宝品牌:Michael Hill
2017/09/16 全球购物
尤妮佳moony海外旗舰店:日本殿堂级纸尿裤品牌
2018/02/23 全球购物
请写出一段Python代码实现删除一个list里面的重复元素
2015/12/29 面试题
大学社团活动策划书
2014/01/26 职场文书
社区文艺活动方案
2014/08/19 职场文书
八一建军节主持词
2015/07/01 职场文书
解决Go gorm踩过的坑
2021/04/30 Golang
Redis可视化客户端小结
2021/06/10 Redis