专栏首页算法与编程之美微信小程序|列表渲染-for循环

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

问题描述

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

解决方案

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

代码实现:

在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循环对列表进行渲染非常的方便而且很灵活。这次的列表渲染需要理解item和index两个循环控制变量以及wx:for属性。另外对页面元素的调整布局也很重要,要让页面看起来美观。

END

主 编 | 王文星

责 编 | 江汪霖

where2go 团队

本文分享自微信公众号 - 算法与编程之美(algo_coding),作者:江汪霖

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2020-04-07

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • Python基础 如何实现单例类

    要知道什么是单例类,首先就得清楚什么是单例模式。单例模式,是一种简单的常用软件设计模式,在程序运行中有且只有一个实例。既应用该模式的一个类只能有一个对象实类,这...

    算法与编程之美
  • 数据库|Flask实现分页显示数据

    在做网页的时候,通常会展示很多数据,如果把全部数据放在一页显示的话,会让浏览器加载变得更慢,所以通常在展示很多数据的时候进行分页显示,让浏览器进行片段式加载。先...

    算法与编程之美
  • Python|判断程序设计比赛中的日期正误

    让我们来看看原题是怎么说的:在输入的一个字符串中包含年份信息,正确年份信息表示为年份-月份,其中年份在1979到2019之中,月份表示为01,02...11,1...

    算法与编程之美
  • Linux基础学习(八)Shell脚本

    shell脚本编程在linux系统管理拥有着极为强大的能力,可以说,当前的工作已经日益偏向自动化了。如果我们极不愿意去学习这方面的知识,可能在未来的工作中颇有不...

    Weiyang
  • 【最新】人工智能领域顶会AAAI 2018 Pre-Proceedings 论文列表(附pdf下载链接)

    【导读】人工智能领域顶尖学术会议 AAAI 2018,暨第32届 AAAI 大会将于 2 月 2 日 - 2 月 7 日 在新奥尔良举行。AAAI 是由人工智能...

    WZEARW
  • 右旋方阵

    lop
  • Python循环控制之for

    各位小伙伴们 大家周三愉快 今天我们要来共同探讨 另外一个在Python中 (严格的说实在所有语言中) 最重要的语句之一 For()循环控制语句 技术要点: f...

    企鹅号小编
  • 优化使用BaseAdapter

     convertView能够被复用的的最根本原因是:ListView的每一行的View对象结构都是类似的,就拿我的前一篇关于ListView的文章为例,每一行布...

    Fisherman渔夫
  • 51单片机矩阵键盘C程序

    由键盘输入一个3×4矩阵a,选出各列最小的元素组成一个一维数组b并输出 由键盘输入一个3×4矩阵a,选出各列最小的元素组成一个一维数组b并输出

    IT大飞说
  • 输入行列的值,打印出左手旋转矩阵。

    问题描述 输入行列的值,打印出左手旋转矩阵。 输入格式 输入一行,不超过20的m,n表示矩阵的行和列 。 样例输入 4 3 样例输出 1    2  ...

    lop

扫码关注云+社区

领取腾讯云代金券