大橙子网站建设,新征程启航

为企业提供网站建设、域名注册、服务器等服务

微信小程序中列表开发的示例分析

这篇文章将为大家详细讲解有关微信小程序中列表开发的示例分析,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。

创新互联于2013年创立,先为望花等服务建站,望花等地企业,进行企业商务咨询服务。为望花企业网站制作PC+手机+微官网三网同步一站式服务解决您的所有建站问题。

一.知识点

(一).列表渲染 wx:for

微信小程序中列表开发的示例分析

tip:wx:for=“array”可以等于参数名,在js中调用
Page({ data:{
array: [{name: '小李'},{ name: '小高'}]}
 }),获取值;也可以直接把wx:for="{{[1, 2, 3]}}",把值放在上面

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

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


  {{index}}: {{item.message}}
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可以指定数组当前下标的变量名:


  {{idx}}: {{itemName.name}}
var app = getApp()
Page({
    data:{
      array: [{
        name: '小李',
      },{
        name: '小高'
      }]
    }
})


微信小程序中列表开发的示例分析

3.wx:for也可以嵌套


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

都不需要js

微信小程序中列表开发的示例分析

(二).block wx:for

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


   {{index}}:{{item.name}}
var app = getApp()
Page({
    data:{
      array: [{
        name: '小李',
      },{
        name: '小高'
      }]
    }
})


微信小程序中列表开发的示例分析

(三).wx:key

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

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

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

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

二.案例

1.用户中心列表



	
		
			
		
		
			 {{item.text}} 
		
		{{item.unreadNum}}
		
	
/**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
     	 })
    })
  }
})

微信小程序中列表开发的示例分析

关于“微信小程序中列表开发的示例分析”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,使各位可以学到更多知识,如果觉得文章不错,请把它分享出去让更多的人看到。


网页名称:微信小程序中列表开发的示例分析
文章链接:http://dzwzjz.com/article/pojghs.html
在线咨询
服务热线
服务热线:028-86922220
TOP