首页 微信小程序 小程序开发 微信小程序列表开发详解

微信小程序列表开发详解

Mar 17, 2018 pm 01:23 PM
小程序 开发 详解

本文主要和大家分享微信小程序列表开发详解,主要以代码的形式和大家分享,希望能帮助到大家。

一.知识点

(一).列表渲染 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/>标签上,以渲染一个包含多节点的结构块。

&lt;block wx:for=&quot;{{array}}&quot;&gt;
  &lt;view&gt; {{index}}:{{item.name}}&lt;/view&gt;
&lt;/block&gt;
登录后复制
var app = getApp()
Page({
    data:{
      array: [{
        name: &#39;小李&#39;,
      },{
        name: &#39;小高&#39;
      }]
    }
})
登录后复制
登录后复制



(三).wx:key

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

  1. 字符串,代表在 for 循环的 array 中 item 的某个 property,该 property 的值需要是列表中唯一的字符串或数字,且不能动态改变。

  2. 保留关键字 *this 代表在 for 循环中的 item 本身,这种表示需要 item 本身是一个唯一的字符串或者数字,如:

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

二.案例

1.用户中心列表

&lt;!--list.wxml--&gt;
&lt;block wx:for=&quot;{{userListInfo}}&quot;&gt;
	&lt;view class=&quot;weui_cell&quot;&gt;
		&lt;view class=&quot;weui_cell_hd&quot;&gt;
			&lt;image src=&quot;{{item.icon}}&quot;&gt;&lt;/image&gt;
		&lt;/view&gt;
		&lt;view class=&quot;weui_cell_bd&quot;&gt;
			&lt;view class=&quot;weui_cell_bd_p&quot;&gt; {{item.text}} &lt;/view&gt;
		&lt;/view&gt;
		&lt;view wx:if=&quot;{{item.isunread}}&quot; class=&quot;badge&quot;&gt;{{item.unreadNum}}&lt;/view&gt;
		&lt;view class=&quot;with_arrow&quot;&gt;&lt;/view&gt;
	&lt;/view&gt;
&lt;/block&gt;
登录后复制
/**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: &#39;../../dist/images/iconfont-dingdan.png&#39;,
      text: &#39;我的订单&#39;,
      isunread: true,
      unreadNum: 2
    }, {
        icon: &#39;../../dist/images/iconfont-card.png&#39;,
        text: &#39;我的代金券&#39;,
        isunread: false,
        unreadNum: 2
      }, {
        icon: &#39;../../dist/images/iconfont-icontuan.png&#39;,
        text: &#39;我的拼团&#39;,
        isunread: true,
        unreadNum: 1
      }, {
        icon: &#39;../../dist/images/iconfont-shouhuodizhi.png&#39;,
        text: &#39;收货地址管理&#39;
      }, {
        icon: &#39;../../dist/images/iconfont-kefu.png&#39;,
        text: &#39;联系客服&#39;
      }, {
        icon: &#39;../../dist/images/iconfont-help.png&#39;,
        text: &#39;常见问题&#39;
      }]
  },
  onLoad: function() {
    var that = this
    //调用应用实例的方法获取全局数据
    app.getUserInfo( function( userInfo ) {
      //更新数据
      	that.setData( {
        	userInfo: userInfo
     	 })
    })
  }
})
登录后复制


相关推荐:

微信小程序实现image图片自适应宽度

微信小程序开发录音机、音频播放、动画

微信小程序开发弹出框实现方法

以上是微信小程序列表开发详解的详细内容。更多信息请关注PHP中文网其他相关文章!

本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

热门文章

R.E.P.O.能量晶体解释及其做什么(黄色晶体)
1 周前 By 尊渡假赌尊渡假赌尊渡假赌
仓库:如何复兴队友
3 周前 By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island冒险:如何获得巨型种子
3 周前 By 尊渡假赌尊渡假赌尊渡假赌

热门文章

R.E.P.O.能量晶体解释及其做什么(黄色晶体)
1 周前 By 尊渡假赌尊渡假赌尊渡假赌
仓库:如何复兴队友
3 周前 By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island冒险:如何获得巨型种子
3 周前 By 尊渡假赌尊渡假赌尊渡假赌

热门文章标签

记事本++7.3.1

记事本++7.3.1

好用且免费的代码编辑器

SublimeText3汉化版

SublimeText3汉化版

中文版,非常好用

禅工作室 13.0.1

禅工作室 13.0.1

功能强大的PHP集成开发环境

Dreamweaver CS6

Dreamweaver CS6

视觉化网页开发工具

SublimeText3 Mac版

SublimeText3 Mac版

神级代码编辑软件(SublimeText3)

四款值得推荐的AI辅助编程工具 四款值得推荐的AI辅助编程工具 Apr 22, 2024 pm 05:34 PM

四款值得推荐的AI辅助编程工具

Win11管理员权限获取详解 Win11管理员权限获取详解 Mar 08, 2024 pm 03:06 PM

Win11管理员权限获取详解

Oracle SQL中的除法运算详解 Oracle SQL中的除法运算详解 Mar 10, 2024 am 09:51 AM

Oracle SQL中的除法运算详解

AI程序员哪家强?探索Devin、通义灵码和SWE-agent的潜力 AI程序员哪家强?探索Devin、通义灵码和SWE-agent的潜力 Apr 07, 2024 am 09:10 AM

AI程序员哪家强?探索Devin、通义灵码和SWE-agent的潜力

学习如何利用Go语言开发移动应用程序 学习如何利用Go语言开发移动应用程序 Mar 28, 2024 pm 10:00 PM

学习如何利用Go语言开发移动应用程序

PHP模运算符的作用及用法详解 PHP模运算符的作用及用法详解 Mar 19, 2024 pm 04:33 PM

PHP模运算符的作用及用法详解

了解VSCode:这款工具到底是用来干什么的? 了解VSCode:这款工具到底是用来干什么的? Mar 25, 2024 pm 03:06 PM

了解VSCode:这款工具到底是用来干什么的?

PHP在Web开发中是属于前端还是后端? PHP在Web开发中是属于前端还是后端? Mar 24, 2024 pm 02:18 PM

PHP在Web开发中是属于前端还是后端?

See all articles