分享下在小程序中怎么做循环

直接上代码 ,非常简单易懂。

首先是文件中的js中代码。

自己随便写的数据

Page({

/**

* 页面的初始数据

*/

data: {

data: [

{

name: "hello", interest: "运动",gender: "男",

},

],

},

/**

* 生命周期函数--监听页面加载

*/

onLoad: function (options) {

},

/**

* 生命周期函数--监听页面初次渲染完成

*/

onReady: function () {

},

})

之后嘞,我们看wxml中的代码。

<block wx:for="{{data}}" data-item="item">   #小程序中循环我们用wx:for   
    <view>{{item.name}}</view>   #item + 变量名  = 输出
    <view>{{item.interest}}</view>
    <view>{{item.gender}}</view>
</block>

就这么简单。

欢迎高手指教!!

原文地址:https://www.cnblogs.com/pp8080/p/11968369.html

时间: 2024-10-06 05:37:19

分享下在小程序中怎么做循环的相关文章

浅谈高大上的微信小程序中渲染html内容—技术分享

大部分Web应用的富文本内容都是以HTML字符串的形式存储的,通过HTML文档去展示HTML内容自然没有问题.但是,在微信小程序(下文简称为「小程序」)中,应当如何渲染这部分内容呢? 解决方案 wxParse 小程序刚上线那会儿,是无法直接渲染HTML内容的,于是就诞生了一个叫做「 wxParse 」的库.它的原理就是把HTML代码解析成树结构的数据,再通过小程序的模板把该数据渲染出来. rich-text 前端精品教程:百度网盘下载 后来,小程序增加了「rich-text」组件用于展示富文本内

在微信小程序中生成一张分享海报?

前言 因产品需求,需要在小程序中生成一张分享海报用于产品推广.特此记录一波产出过程~ 这次开发使用的是  uni-app 来产出小程序 Part.1  大致思路 按照设计图将所需元素全部画入 Canvas 画布,再利用 wx.canvasToTempFilePath(Object object, Object this)  API 将 Canvas 生成一张指定大小的图片,保存分享即可~ 此API具体用法和注意事项可去 https://developers.weixin.qq.com/minip

WePY 在手机充值小程序中的应用与实践

wepyjs 发布了两个月了,中间经历了很多版本更新,也慢慢开始有一些用户选择 wepyjs 作为开发框架来开发小程序,比如一些线上小程序. 以及一些来自网上的 wepyjs 的相关资源: demo源码: one,图书管理系统 组件:图表控件 因此我也将手机充值小程序在开发过程中 wepyjs 的应用心得分享出来,可以参照对比与传统小程序开发上的差异. 说明:本文不涉及到 wepyjs 的使用与说明,如果需要请参看我的另一篇文章 "打造小程序组件化开发框架" 或直接参看wepyjs 项

店长宝干货分享:微信小程序如何运营推广?

微信小程序正式推出已经一年了,很多中小企业和个体商户已经借助微信小程序开发工具店长宝的千款微信小程序行业模板,在无需代码的情况下快速开发出了自己的微信小程序.那么微信小程序开发出来后如何运营和推广呢?其实微信小程序运营和推广的很多方法是可以从App和公众号借鉴过来的.这里总结了一些微信小程序(店长宝)运营和推广的一些思路,让大家快速上手微信小程序运营. 微信推广小程序 微信公众号的运营推广需要一定时间沉淀,结合产品做内容聚合推荐,内容不一定要多,但是一定要精并且符合微信号的定位.可以与合作伙伴推

分享一下微信小程序的实例【转】

wx-gesture-lock  微信小程序的手势密码 WXCustomSwitch 微信小程序自定义 Switch 组件模板 WeixinAppBdNovel 微信小程序demo:百度小说搜索 shitoujiandaobu 小程序:石头剪刀布(附代码说明) audiodemo 微信小程序开发之视频播放器 Video 弹幕 弹幕颜色自定义 star 微信小程序开发之五星评分 switchCity 微信小程序开发之城市选择器 城市切换 huadong_del  微信小程序滑动删除效果 jianh

微信小程序中target与currentTarget

如有错误,请纠出,大家一起进步!!! target在事件流的目标阶段:currentTarget在事件流的捕获,目标及冒泡阶段.但事件流处于目标阶段,target与currentTarget指向一样, 而当处于捕获和冒泡阶段的时候,target指向被单击的对象而currentTarget指向当前事件活动的对象.在微信小程序中也可总结为:target指向发生事件的组件,currentTarget指向绑定事件的组件. 下面请看例子: text.wxml: <view class="view1&

极限工坊为你揭秘小程序中的潜规则排名方式和SEO优化规则

如果我想自己的小程序推给更多用户需要怎么做? 其实这时候首先来提升小程序的排名! 那么问题来了,小程序的SEO排名有什么因素决定的呢?小程序排名的规则可以分为以下几种: 1 关键词的频率 假如我们日常聊天中出现某个关键词的的次数比较高,你的小程序可能排名就会越靠前. 比如你做了个小程序"黄焖鸡米饭".在你平时聊天中,如果出现黄焖鸡.米饭之类的词比较多,那么你的搜索结果中,与黄焖鸡这个关键相关的小程序排名就会靠前.2 上线时间 小程序现在占位非常的重要,越早发布竞争力就越小! 3 标题关

如何在微信小程序中使用字体图标

微信小程序中,在image标签里,可以在src中引用本地文件,但是background设置背景图或者使用字体图标的时候,却不能引用本地文件,只能用url地址的图片或字体,或者使用base64编码后的格式,图片我们可以在线转换,随便搜一下,有很多在线转换工具,但是使用字体图标的时候,怎么转换呢?下面我们记录一下使用图标字体的l两个方法.    方法一:将字体url转换为base64的格式后使用 第一步,下载需要的字体图: 打开阿里巴巴矢量图标库,选择自己需要的图标添加到购物车,然后点击购物车下载代

小程序中的web-view与h5网页之间的交互

官方文档:https://developers.weixin.qq.com/miniprogram/dev/component/web-view.html web-view 基础库 1.6.4 开始支持,低版本需做兼容处理 web-view 组件是一个可以用来承载网页的容器,会自动铺满整个小程序页面.个人类型与海外类型的小程序暂不支持使用. 客户端 6.7.2 版本开始,navigationStyle: custom 对 <web-view> 组件无效 属性名 类型 默认值 说明 src St