微信小程序列表开发详解
本文主要和大家分享微信小程序列表开发详解,主要以代码的形式和大家分享,希望能帮助到大家。
一.知识点
(一).列表渲染 wx:for
tip:wx:for=“array”可以等于参数名,在js中调用 Page({ data:{ array: [{name: '小李'},{ name: '小高'}]} }),获取值;也可以直接把wx:for="{{[1, 2, 3]}}",把值放在上面
1.在组件上使用wx:for控制属性绑定一个数组,即可使用数组中各项的数据重复渲染该组件。
默认数组的当前项的下标变量名默认为index,数组当前项的变量名默认为item
<view wx:for="{{items}}"> {{index}}: {{item.message}} </view>
var app = getApp() Page({ data:{ items: [{ message: 'foo', },{ message: 'bar' }] } })
首先在wxml文件中wx:for后面的双重大括号中的items是一个数组,数组的元素如js中所见,在wx:for下面{{index}}:{{item.arry}}中index是items数组的下标,item.arry是数组中的元素也即是“a”和“b”。
2.使用wx:for-item可以指定数组当前元素的变量名。使用wx:for-index可以指定数组当前下标的变量名:
<view wx:for="{{array}}" wx:for-index="idx" wx:for-item="itemName"> {{idx}}: {{itemName.name}} </view>
var app = getApp() Page({ data:{ array: [{ name: '小李', },{ name: '小高' }] } })
3.wx:for也可以嵌套
<view wx:for="{{[1, 2, 3, 4, 5, 6, 7, 8, 9]}}" wx:for-item="i"> <view wx:for="{{[1, 2, 3, 4, 5, 6, 7, 8, 9]}}" wx:for-item="j"> <view wx:if="{{i <= j}}"> {{i}} * {{j}} = {{i * j}} </view> </view> </view>
都不需要js
(二).block wx:for
类似block wx:if,也可以将wx:for用在
<block wx:for="{{array}}"> <view> {{index}}:{{item.name}}</view> </block>
var app = getApp() Page({ data:{ array: [{ name: '小李', },{ name: '小高' }] } })
(三).wx:key
如果列表中项目的位置会动态改变或者有新的项目添加到列表中,并且希望列表中的项目保持自己的特征和状态(如 中的输入内容,
字符串,代表在 for 循环的 array 中 item 的某个 property,该 property 的值需要是列表中唯一的字符串或数字,且不能动态改变。
保留关键字 *this 代表在 for 循环中的 item 本身,这种表示需要 item 本身是一个唯一的字符串或者数字,如:
如不提供 wx:key,会报一个 warning,
如果明确知道该列表是静态,或者不必关注其顺序,可以选择忽略。
二.案例
1.用户中心列表
<!--list.wxml--> <block wx:for="{{userListInfo}}"> <view class="weui_cell"> <view class="weui_cell_hd"> <image src="{{item.icon}}"></image> </view> <view class="weui_cell_bd"> <view class="weui_cell_bd_p"> {{item.text}} </view> </view> <view wx:if="{{item.isunread}}" class="badge">{{item.unreadNum}}</view> <view class="with_arrow"></view> </view> </block>
/**list.wxss**/ .weui_cell { position: relative; display: flex; padding: 15px; -webkit-box-align: center; -ms-flex-align: center; align-items: center; border-bottom: 1px solid #dadada; } .weui_cell_hd { display: inline-block; width: 20px; margin-right: 5px; } .weui_cell_hd image { width: 100%; height: 20px; vertical-align: -2px; } .weui_cell_bd { display: inline-block; } .weui_cell_bd_p { font-size: 14px; color: #939393; } .badge { position: absolute; top: 18px; right: 40px; width: 15px; height: 15px; line-height: 15px; background: #ff0000; color: #fff; border-radius: 50%; text-align: center; font-size: 8px; } .with_arrow { position: absolute; top: 18px; right: 15px; width: 15px; height: 15px; background-image: url(../../dist/images/icon-arrowdown.png); background-repeat: no-repeat; background-size: 100% 100%; }
//list.js var app = getApp() Page( { data: { userInfo: {}, userListInfo: [ { icon: '../../dist/images/iconfont-dingdan.png', text: '我的订单', isunread: true, unreadNum: 2 }, { icon: '../../dist/images/iconfont-card.png', text: '我的代金券', isunread: false, unreadNum: 2 }, { icon: '../../dist/images/iconfont-icontuan.png', text: '我的拼团', isunread: true, unreadNum: 1 }, { icon: '../../dist/images/iconfont-shouhuodizhi.png', text: '收货地址管理' }, { icon: '../../dist/images/iconfont-kefu.png', text: '联系客服' }, { icon: '../../dist/images/iconfont-help.png', text: '常见问题' }] }, onLoad: function() { var that = this //调用应用实例的方法获取全局数据 app.getUserInfo( function( userInfo ) { //更新数据 that.setData( { userInfo: userInfo }) }) } })
相关推荐:
以上是微信小程序列表开发详解的详细内容。更多信息请关注PHP中文网其他相关文章!

热AI工具

Undresser.AI Undress
人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover
用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool
免费脱衣服图片

Clothoff.io
AI脱衣机

AI Hentai Generator
免费生成ai无尽的。

热门文章

热工具

记事本++7.3.1
好用且免费的代码编辑器

SublimeText3汉化版
中文版,非常好用

禅工作室 13.0.1
功能强大的PHP集成开发环境

Dreamweaver CS6
视觉化网页开发工具

SublimeText3 Mac版
神级代码编辑软件(SublimeText3)

热门话题

这个AI辅助编程工具在这个AI迅速发展的阶段,挖掘出了一大批好用的AI辅助编程工具。AI辅助编程工具能够提高开发效率、改善代码质量、降低bug率,是现代软件开发过程中的重要助手。今天大姚给大家分享4款AI辅助编程工具(并且都支持C#语言),希望对大家有所帮助。https://github.com/YSGStudyHards/DotNetGuide1.GitHubCopilotGitHubCopilot是一款AI编码助手,可帮助你更快、更省力地编写代码,从而将更多精力集中在问题解决和协作上。Git

Windows操作系统是全球最流行的操作系统之一,其新版本Win11备受瞩目。在Win11系统中,管理员权限的获取是一个重要的操作,管理员权限可以让用户对系统进行更多的操作和设置。本文将详细介绍在Win11系统中如何获取管理员权限,以及如何有效地管理权限。在Win11系统中,管理员权限分为本地管理员和域管理员两种。本地管理员是指具有对本地计算机的完全管理权限

OracleSQL中的除法运算详解在OracleSQL中,除法运算是一种常见且重要的数学运算操作,用于计算两个数相除的结果。除法在数据库查询中经常用到,因此了解OracleSQL中的除法运算及其用法是数据库开发人员必备的技能之一。本文将详细讨论OracleSQL中除法运算的相关知识,并提供具体的代码示例供读者参考。一、OracleSQL中的除法运算

2022年3月3日,距世界首个AI程序员Devin诞生不足一个月,普林斯顿大学的NLP团队开发了一个开源AI程序员SWE-agent。它利用GPT-4模型在GitHub存储库中自动解决问题。SWE-agent在SWE-bench测试集上的表现与Devin相似,平均耗时93秒,解决了12.29%的问题。SWE-agent通过与专用终端交互,可以打开、搜索文件内容,使用自动语法检查、编辑特定行,以及编写和执行测试。(注:以上内容为原内容微调,但保留了原文中的关键信息,未超过指定字数限制。)SWE-A

Go语言开发移动应用程序教程随着移动应用市场的不断蓬勃发展,越来越多的开发者开始探索如何利用Go语言开发移动应用程序。作为一种简洁高效的编程语言,Go语言在移动应用开发中也展现出了强大的潜力。本文将详细介绍如何利用Go语言开发移动应用程序,并附上具体的代码示例,帮助读者快速入门并开始开发自己的移动应用。一、准备工作在开始之前,我们需要准备好开发环境和工具。首

PHP中的模运算符(%)是用来获取两个数值相除的余数的。在本文中,我们将详细讨论模运算符的作用及用法,并提供具体的代码示例来帮助读者更好地理解。1.模运算符的作用在数学中,当我们将一个整数除以另一个整数时,会得到一个商和一个余数。例如,当我们将10除以3时,商为3,余数为1。模运算符就是用来获取这个余数的。2.模运算符的用法在PHP中,使用%符号来表示模

Android开发是一项繁忙而又令人兴奋的工作,而选择一个适合的Linux发行版来进行开发则显得尤为重要。在众多的Linux发行版中,究竟哪一个最适合Android开发呢?本文将从几个方面来探讨这一问题,并给出具体的代码示例。首先,我们来看一下目前流行的几个Linux发行版:Ubuntu、Fedora、Debian、CentOS等,它们都有各自的优点和特点。

Go语言作为一种快速、高效的编程语言,在后端开发领域广受欢迎。然而,很少有人将Go语言与前端开发联系起来。事实上,使用Go语言进行前端开发不仅可以提高效率,还能为开发者带来全新的视野。本文将探讨使用Go语言进行前端开发的可能性,并提供具体的代码示例,帮助读者更好地了解这一领域。在传统的前端开发中,通常会使用JavaScript、HTML和CSS来构建用户界面
