分享

微信小程序|列表渲染-for循环

 算法与编程之美 2020-08-08

问题描述

大家学习程序设计都知道for循环,而且很多编程都需要用到for循环。在制作微信小程序特别是列表页面的时候,是否有遇到过列表元素很多或者不确定的情况,如果一个一个的去敲就会有很大的工作量非常的麻烦。那么可不可以用for循环来解决这个问题呢?

解决方案

编程的人都知道for循环是一种循环语句。当元素的数量很多的时候,用for循环来遍历元素解决一些问题就显得非常的方便。微信小程序也一样,大家通常看到的一些列表页面都是由很多的元素组成的,如果一个框框一个框框的去写代码效率就特别低了。但是用小程序中wxfor属性就可以实现对列表的快速渲染了。

代码实现:

在js 中对页面内容定义各种数据构成一个对象数组;

novel是对该组数据的命名。

Page({

  data: {

    novel:[

      {

        name: "《平凡的世界》",

        comment: "中国当代城乡社会生活的长篇小说",

        imagePath: "/pages/img/小说1.jpg"

      },

      {

        name: "《骆驼祥子》",

        comment: "优秀的现实主义小说",

        imagePath: "/pages/img/小说2.jpg"

      },

      {

        name: "《家》",

        comment: "入选20世纪中文小说100强(第8位)",

        imagePath: "/pages/img/小说3.jpg"

      },

      {

        name: "《悲惨世界》",

        comment: "雨果现实主义小说中最成功的一部代表作",

        imagePath: "/pages/img/小说4.jpg"

      },      

    ]

  }

})

在wxml中对页面进行渲染,将绑定的数据输出到视图中;

wx:for="{{}}"属性:实现视图层for循环的控制结构;

使用for循环就需要将之前定义的:

{{novel.name}}{{novel.comment}}{{novel.imagepath}}

改为

{{item.name}}{{item.comment}}{{item.imagepath}}item为一个抽象的循环控制变量。如果不需要遍历所有的数据那么就在之前定义的{{novel[1].~~}}中加一个索引(你需要第几位就加第几位的索引);

{{index+1}}:循环控制变量。

<view>

  <text >小说推荐</text>

  <view wx:for="{{novel}}">

    <image  src="{{item.imagePath}}"></image>

    <view>

    <text>{{index+1}}部:{{item.name}}</text>

    <text>评价:{{item.comment}}</text>

    </view>

  </view>

</view>

在wxss中对页面元素进行布局。

.container1{

  height: 100vh;

  display: flex;

  flex-direction: column;

  justify-content: space-around;

  align-items: center;

}

.novel{

  display: flex;

}

.novel-details{

  display: flex;

  flex-direction: column;

  width: 500rpx

}

.novel-image{

  width: 200rpx;

  height: 200rpx

}

效果图:

结语

在微信小程序中使用for循环对列表进行渲染非常的方便而且很灵活。这次的列表渲染需要理解itemindex两个循环控制变量以及wxfor属性。另外对页面元素的调整布局也很重要,要让页面看起来美观。



END

主  编   |   王文星

责  编   |   江汪霖

 where2go 团队


微信号:算法与编程之美          

    转藏 分享 献花(0

    0条评论

    发表

    请遵守用户 评论公约

    类似文章 更多