微信小程序-列表渲染、获取列表传递值

1.目的

通过几个简单的例子,介绍如何实现列表渲染,及在列表中传递参数和跳转界面。

2.列表渲染 

 

.wxml
<view>
    <block wx:for="{{items}}" wx:for-item="item" wx:key="000" wx:for-index="index">
        <view>{{index}}:{{item.name}}</view>
    </block>
</view>
.js
Page({
    data:{
        items:[
            { name:"商品A"},
            { name:"商品B"},
            { name:"商品C"},
            { name:"商品D"},
            { name:"商品A"}
        ]
    }
})

注意:items和item的区别。
各个属性的含义和对应关系:

变量名含义
items对应data中整个数组
item变量的值,就是name:“商品A”、name:“商品B”,在js文件中不用有对应的变量,只是在wxml中取的一个名字而已
000唯一标识符,可以不要,只是为了解决IDE的警告问题
index数组下标,从0开始,0,1,2

使用 wx:for-item 可以指定数组当前元素的变量名,
使用 wx:for-index 可以指定数组当前下标的变量名
使用 wx:key 可以指定数组的唯一标识符

3.代码扩充 

  • block标签不是组件,只是一个包装元素,在页面渲染时可以看到这个标签是不会被渲染出来的,只接受控制属性,wx:if 和 wx:for 等就是控制属性。如果要一次性判断或重复多个组件标签,比如对多个view组件进行同一重复动作,可以使用一个 <block/> 标签将多个组件包装起来。
  • block wx:for 类似 block wx:if,也可以将 wx:for 用在标签上,以渲染一个包含多节点的结构块。例如:
<block wx:for="{{[1, 2, 3]}}">
  <view> {{index}}: </view>
  <view> {{item}} </view>
</block>

 输出:

 

 

 

  • 通过wx:for来绑定名为items的数组。效果相当于for循环,重复渲染该组件,也可以嵌套。
  • 如果列表中项目的位置会动态改变或者有新的项目添加到列表中,并且希望列表中的项目保持自己的特征和状态(如 <input/> 中的输入内容,<switch/> 的选中状态),需要使用 wx:key 来指定列表中项目的唯一的标识符。

4.实现for循环中的view绑定tap事件 

循环体中要绑定事件的组件需要为其添加两个属性:
data-***={{index}}
bindtap=‘click’ 

.wxml
 <block wx:for="{{imgUrls}}">	
	<image src="{{item.url}}" class="slide-image" data-index='{{index}}' bindtap='picture'/>
</block>

 data-index中index可以用其他变量代替,这只是dataset中的变量名,而{{index}}代表列表的固有属性索引值,若为{{item}}则代表列表对应的条目值。

这个data-*就对应事件的属性target里的dataset 值,需要调用的话就是在js中输入 event.target.dataset. 就能取到data-***所对应的值。 

picture:function(event){
    const id = event.currentTarget.dataset.index;          //定义存储索引条目的变量,打印值为对应循环列表的索引值index
    if (id == 0) {
      console.log(event);												//打印本次点击事件的所有属性值
    }
    else if (id == 1) {
      console.log(event.currentTarget);							//打印当前事件的属性值
    }
    else {
      wx.showToast({
        title: '成功',
        icon: 'success',
        duration: 2000
      })
    }																				//调用了api,没有最后的;
  },

 注意if else循环的标点

 若两个属性data-和bindtap虽然在同一个循环列表中,但却定义在不同的组件中,就会出现无定义的情况,如下所示:

 <view class="image-item" wx:for="{{GameImageUrls}}" wx:for-item="item">
          <image src="{{item.url}}"  data-index='{{index}}'</image>
          <text  bindtap='imageclick'>{{你是}}</text>       
 </view>

 

//打印索引值
imageclick:function(event){
  console.log(event.currentTarget.dataset.index);
  }

输出 undefined

  • 1
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
### 回答1: 微信小程序中,可以使用 `scroll-view` 组件来展示长列表,并使用 `wx:for` 指令来渲染列表数据。具体步骤如下: 1. 在 `wxml` 文件中,使用 `scroll-view` 组件包裹需要展示的列表内容,如下所示: ```html <scroll-view scroll-y="true"> <!-- 使用 wx:for 渲染列表数据 --> <view wx:for="{{list}}" wx:key="index">{{item}}</view> </scroll-view> ``` 2. 在对应的 `js` 文件中,定义列表数据并传递给 `wxml` 文件,如下所示: ```javascript Page({ data: { list: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10] } }) ``` 其中,`list` 数组中的每个元素都会通过 `wx:for` 指令渲染为一个 `view` 组件。 3. 在 `scroll-view` 组件中,设置 `scroll-y` 属性为 `true`,即可开启纵向滚动。 需要注意的是,当列表数据较多时,可能会影响小程序性能,此时可以考虑使用分页加载等优化策略。 ### 回答2: 微信小程序是一种轻量级的应用程序,在小程序框架中,长列表渲染是一个常见的需求。由于小程序的页面渲染机制是异步的,无法一次性将大量的数据全部渲染到页面上。因此,对于大数据量的长列表渲染,我们可以采用分页加载或虚拟列表技术。 一种常见的长列表渲染方式是分页加载。我们可以将数据分割成若干页,每次只加载当前页的部分数据,当用户滚动到页面底部时,再加载下一页数据。这种方式在渲染大数据量时可以提高性能,并减少用户等待时间。 另一种常见的长列表渲染方式是虚拟列表。虚拟列表是一种只渲染可见区域的数据项的技术。当用户滚动列表时,只渲染当前可见区域的数据项,而不渲染所有数据。这种方式可以减少页面渲染的时间和内存的占用,提高性能和用户体验。 为了实现长列表渲染,我们可以使用小程序框架提供的组件或第三方库。例如,使用官方组件"scroll-view"可以实现分页加载和虚拟列表。我们可以设置上拉触底事件,当用户滚动到页面底部时,触发加载下一页的数据;同时,在"scroll-view"中设置合适的高度和样式,来展示可见区域的数据项。此外,也可以使用第三方库如vant等来实现长列表渲染。 总的来说,微信小程序的长列表渲染可以通过分页加载或虚拟列表来实现,提高性能和用户体验。我们可以根据具体需求选择合适的方法,并利用小程序框架提供的组件或第三方库来简化开发过程。 ### 回答3: 微信小程序中的长列表渲染通常使用的是WXML和WXSS来实现。在WXML中,我们可以使用<scroll-view>组件来实现长列表的滚动效果。<scroll-view>组件具有scroll-view 和 scroll-y属性,通过设置scroll-y为true,可以实现竖向滚动。此外,我们还可以使用<view>组件来包裹列表中的每一项,使用wx:for循环语法来遍历数据源,并在每一项中显示对应的数据。 在WXSS中,我们可以设置<scroll-view>组件的高度、宽度以及滚动条的样式等。使用WXSS可以对列表项进行样式设置,如设置字体颜色、背景色等。 在数据量较大的情况下,为了提高列表渲染的性能,我们可以使用<block>组件对列表进行分块渲染。将一个长列表分成多个块,通过分批加载,可以避免一次性渲染大量数据导致卡顿的情况发生。 此外,我们还可以使用小程序提供的scroll-into-view方法来实现对指定列表项的定位和滚动。 为了更好的用户体验,还可以在长列表中添加上拉刷新和下拉加载更多的功能,这样用户可以在页面滚动到底部时自动加载更多数据,或者下拉列表时刷新数据,提高用户的浏览体验。 综上所述,微信小程序中的长列表渲染主要通过scroll-view组件、wx:for循环语法、scroll-into-view方法以及上拉刷新和下拉加载等功能来实现。这些方法可以提高列表渲染的性能和用户体验,使用户能够流畅地浏览和操作长列表数据。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值