微信小程序列表渲染（循环渲染）

1. 编写目的

一个简单例子，介绍微信小程序如何实现列表渲染（循环渲染）

2. 例子

js代码中准备数据（数组）：

  data: {smiles: ["../../image/weather/smile1.png","../../image/weather/soso.png","../../image/weather/unhappy.png","../../image/weather/cry.png"]}

wxml中编写循环渲染：

 <view class="demo-container" id="model_weather"><block wx:for="{{smiles}}"wx:key="yyy"  wx:for-item="itemName" wx:for-index="index"  ><image class="image" src="{{itemName}}" bindtap='img_smile' data-smile='{{index}}'/></block></view>

下面是对应关系：

变量名	对应关系
smiles	对应data中整个数组
yyy	随便起的，为了解决IDE报出的警告问题
itemName	变量的值，比如…/…/image/weather/smile1.png等等
index	数组下标，从0开始，0,1,2,3

输出的效果如下：

3. 说明

同样的道理，那些变量名可以随便定义，但是循环体中使用这些变量时不要弄错，免得带来一些麻烦。

Smileyan 2019年2月23日

微信小程序列表渲染（循环渲染）相关推荐

微信小程序头像叠加循环渲染
首先来看看效果图通过动态控制图片偏移量来实现效果(transform:translateX); 此案例相对简单,这里就不详细说了直接看代码 index.wxml <view class='in ...
完美解决小程序一维数组循环渲染列表不够用问题
完美解决小程序一维数组循环渲染列表不够用问题参考文章: (1)完美解决小程序一维数组循环渲染列表不够用问题 (2)https://www.cnblogs.com/jessical626/p/6363 ...
微信小程序的启动和渲染过程(加组件分类和组件的基本使用以及API分类)
文章目录导航路线小程序的启动过程小程序页面渲染的过程小程序中组件的分类有九大类常用的视图容器类组件小程序宿主环境-API 导航路线关于微信小程序知识点一共做了六个博客,涵盖大部分内容,有 ...
微信小程序详解 php,微信小程序列表开发详解
本文主要和大家分享微信小程序列表开发详解,主要以代码的形式和大家分享,希望能帮助到大家. 一.知识点 (一).列表渲染 wx:for tip:wx:for="array"可以等于参 ...
微信小程序列表加载动画示例
微信小程序列表加载动画微信小程序列表加载动画示例实现思路什么是动画? 导航栏设置列表动画加载完整代码demo 微信小程序列表加载动画示例初学微信小程序开发,记录一下.网上找了很久这种效果, ...
微信小程序如何双重循环
微信小程序解决双重循环准备知识 wx:for : 使用数组中各项的数据重复渲染该组件当前项的下标变量名默认为 index,当前项的变量名默认为 item 可使用 wx:for-item 指定当前元 ...
微信小程序关于for循环之后setData
微信小程序关于for循环之后setData Page({/*** 页面的初始数据*/data: {types: [],select: '',goods:[]},onLoad: function (op ...
微信小程序列表实现文字内容超出隐藏并显示全文/收起按钮
微信小程序列表实现文字内容超出隐藏并显示全文/收起按钮针对这个功能,产品的需求如下由于我们项目是教育类产品所以这里这个功能会用在发动态这里,就像微信朋友圈那样,我们叫班级圈. 用户发班级圈时,可以 ...
微信小程序|列表渲染-for循环
欢迎点击「算法与编程之美」↑关注我们! 本文首发于微信公众号:"算法与编程之美",欢迎关注,及时了解更多此系列文章. 问题描述大家学习程序设计都知道for循环,而且很多编程都需要 ...
微信小程序通过for循环实现列表渲染
问题大家学习程序设计都知道for循环,而且很多编程都需要用到for循环.在制作微信小程序特别是列表页面的时候,是否有遇到过列表元素很多或者不确定的情况,如果一个一个的去敲就会有很大的工作量非常的麻烦 ...

微信小程序列表渲染（循环渲染）

1. 编写目的

2. 例子

3. 说明

微信小程序列表渲染（循环渲染）相关推荐

最新文章

热门文章