小程序基础开发（二）：页面数据渲染，多重for循环列表渲染。附字母索引的联系人列表dome

本文链接：https://blog.youkuaiyun.com/qq_42050067/article/details/101899635

本文介绍了小程序的基础开发，包括页面数据渲染和多重for循环列表渲染，特别是如何利用双层for循环实现联系人列表，并添加字母索引功能。在渲染过程中，详细讲解了数据绑定、wx:for指令的使用以及如何处理嵌套循环。同时，提到了动态赋值scroll-into-view实现滚动到指定位置的关键技巧。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一，页面数据渲染

1,数据渲染分为2种，一种是直接的单个数据绑定，使用 Mustache 语法（双大括号）将变量包起来，可以作用于：

wxml

<view> {
   {
    message }} </view>
<view id="item-{
   {id}}"> </view>

Page({
   
  data: {
   
    id: 0，
    message: 'Hello MINA!'
  }
})

2,另一种的列表渲染，在组件上使用 wx:for 控制属性绑定一个数组，即可使用数组中各项的数据重复渲染该组件。
默认数组的当前项的下标变量名默认为 index，数组当前项的变量名默认为 item

<view wx:for="{
   {array}}">
  {
   {
   index}}: {
   {
   item.message}}
</view>
Page({
   
  data: {
   
    array: [{
   
      message: 'foo',
    }, {
   
      message: 'bar'
    }]
  }
})

使用 wx:for-item 可以指定数组当前元素的变量名，
使用 wx:for-index 可以指定数组当前下标的变量名：


<view wx:for="{
   {array}}" wx:for-index="idx" wx:for-item="itemName">
  {
   {
   idx}}: {
   {
   itemName.message}}
</view>

二，多重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>

二，利用双层for渲染做一个联系人列表

效果图用到的json数据：

[{
   
      "cooc_name": "阿噶热达飞个",
      "cooc_class": "成人",
      "cooc_sex": "男",
      "cooc_papers_class": "身份证",
      "cooc_papers_no": "456456456464654565656",
      "cooc_code": "A",
      "cooc_id": "1"
    },
    {
   
      "cooc_name": "毕老",
      "cooc_class": "小孩",
      "cooc_sex":