手册

目录

绘图
微信小程序API 绘图接口(reference)、方法大全 微信小程序API 绘图 微信小程序API 绘图介绍(如何在Canvas上画图) 微信小程序API coordinates(Canvas 坐标系) 微信小程序API gradient(如何绘制渐变效果) 微信小程序API wx.createCanvasContext(canvasId)(绘图上下文) 微信小程序API 绘图·绘制画布 drawCanvas (不推荐使用) 微信小程序API 绘图·导出图片canvasToTempFilePath(OBJECT) 微信小程序API 绘图·设置填充样式setFillStyle 微信小程序API 绘图setStrokeStyle(设置线条样式) 微信小程序API 绘图setShadow(设置阴影样式) 微信小程序API 绘图createLinearGradient(创建线性渐变) 微信小程序API 绘图createCircularGradient(创建圆形渐变) 微信小程序API绘图addColorStop(创建颜色渐变点) 微信小程序API 绘图setLineCap(设置线条端点样式) 微信小程序API 绘图setLineJoin(设置线条交点样式) 微信小程序API 绘图setMiterLimit(设置最大倾斜) 微信小程序API 绘图rect创建矩形 微信小程序API 绘图fillRect(填充矩形) 微信小程序API 绘图strokeRect(画一个矩形,非填充) 微信小程序API 绘图clearRect(在给定的矩形区域内,清除画布上的像素) 微信小程序API 绘图fill(对当前路径进行填充) 微信小程序API 绘图stroke(对当前路径进行描边) 微信小程序API 绘图beginPath(开始一个路径) 微信小程序API 绘图closePath(关闭一个路径) 微信小程序使用moveTo把路径移动到画布中的指定点,不创建线条 微信小程序中使用lineTo方法增加一个新点 使用arc()方法在微信小程序canvas中画弧线 在微信小程序绘图API中创建二次方贝塞尔曲线 在微信小程序API绘图中创建三次方贝塞尔曲线路径 在微信小程序中调用scale方法对横纵坐标进行缩放 微信小程序API 绘图对坐标轴进行顺时针旋转 微信小程序canvas中使用translate对坐标原点进行缩放 微信小程序API 绘图setFontSize(设置字号) 微信小程序绘图API中使用fillText在画布上绘制被填充的文本 微信小程序API中,使用drawImage完成绘制图像,图像保持原始尺寸 微信小程序API 绘图中使用setGlobalAlpha设置全局画笔透明度 微信小程序save/restore(保存和恢复绘图上下文) 微信小程序API 绘图·draw(进行绘图) 微信小程序API 绘图·getActions(不推荐使用) 微信小程序API 绘图·clearActions (不推荐使用) 微信小程序API 其他 微信小程序API 下拉刷新

微信小程序 列表渲染 wx:for

收藏328

阅读90487

更新时间2022-04-11

wx:for


在组件上使用wx:for控制属性绑定一个数组,即可使用数组中各项的数据重复渲染该组件。

默认数组的当前项的下标变量名默认为index,数组当前项的变量名默认为item


  {{index}}: {{item.message}}
Page({
  items: [{
    message: 'foo',
  },{
    message: 'bar'
  }]
})

使用wx:for-item可以指定数组当前元素的变量名

使用wx:for-index可以指定数组当前下标的变量名:


  {{idx}}: {{itemName.message}}

wx:for也可以嵌套,下边是一个九九乘法表


  
    
      {{i}} * {{j}} = {{i * j}}
    
  

block wx:for


类似block wx:if,也可以将wx:for用在标签上,以渲染一个包含多节点的结构块。例如:


   {{index}}: 
   {{item}} 

wx:key

如果列表中项目的位置会动态改变或者有新的项目添加到列表中,并且希望列表中的项目保持自己的特征和状态(如  中的输入内容, 的选中状态),需要使用 wx:key 来指定列表中项目的唯一的标识符。

wx:key 的值以两种形式提供

  1. 字符串,代表在 for 循环的 array 中 item 的某个 property,该 property 的值需要是列表中唯一的字符串或数字,且不能动态改变。
  2. 保留关键字 *this 代表在 for 循环中的 item 本身,这种表示需要 item 本身是一个唯一的字符串或者数字,如:

当数据改变触发渲染层重新渲染的时候,会校正带有 key 的组件,框架会确保他们被重新排序,而不是重新创建,以确保使组件保持自身的状态,并且提高列表渲染时的效率。

如不提供 wx:key,会报一个 warning, 如果明确知道该列表是静态,或者不必关注其顺序,可以选择忽略。

示例代码:

 {{item.id}} 
 Switch 
 Add to the front 

 {{item}} 
 Add to the front 



Page({
  data: {
    objectArray: [
      {id: 5, unique: 'unique_5'},
      {id: 4, unique: 'unique_4'},
      {id: 3, unique: 'unique_3'},
      {id: 2, unique: 'unique_2'},
      {id: 1, unique: 'unique_1'},
      {id: 0, unique: 'unique_0'},
    ],
    numberArray: [1, 2, 3, 4]
  },  switch: function(e) {    const length = this.data.objectArray.length    for (let i = 0; i < length; ++i) {      const x = Math.floor(Math.random() * length)      const y = Math.floor(Math.random() * length)      const temp = this.data.objectArray[x]      this.data.objectArray[x] = this.data.objectArray[y]      this.data.objectArray[y] = temp
    }    this.setData({
      objectArray: this.data.objectArray
    })
  },
  addToFront: function(e) {    const length = this.data.objectArray.length    this.data.objectArray = [{id: length, unique: 'unique_' + length}].concat(this.data.objectArray)    this.setData({
      objectArray: this.data.objectArray
    })
  },
  addNumberToFront: function(e){    this.data.numberArray = [ this.data.numberArray.length + 1 ].concat(this.data.numberArray)    this.setData({
      numberArray: this.data.numberArray
    })
  }
})



相关

视频

RELATED VIDEOS

更多

免费

极客学院jQueryMobile视频教程

免费

极客学院Swift语言视频教程

免费

尚学堂Swift入门视频教程

免费

微信小程序--企业微网站

免费

Flutter基础视频教程
中级 Flutter基础视频教程

28784次学习

收藏

科技资讯

更多

精选课程

更多
前端入门_HTML5
前端入门_HTML5

共29课时

61.7万人学习

CSS视频教程-玉女心经版
CSS视频教程-玉女心经版

共25课时

39.3万人学习

JavaScript极速入门_玉女心经系列
JavaScript极速入门_玉女心经系列

共43课时

70.9万人学习

独孤九贱(1)_HTML5视频教程
独孤九贱(1)_HTML5视频教程

共25课时

61.6万人学习

独孤九贱(2)_CSS视频教程
独孤九贱(2)_CSS视频教程

共22课时

23万人学习

独孤九贱(3)_JavaScript视频教程
独孤九贱(3)_JavaScript视频教程

共28课时

33.9万人学习

独孤九贱(4)_PHP视频教程
独孤九贱(4)_PHP视频教程

共89课时

125万人学习

关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新 English
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号