请选择 进入手机版 | 继续访问电脑版

数字之家

 找回密码
 立即注册

扫一扫,访问微社区

QQ登录

只需一步,快速开始

搜索
热搜: 活动 交友 discuz
查看: 867|回复: 0

微信小程序开发(七)多个文章列表页的实现

[复制链接]

514

主题

519

帖子

2424

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
2424
admin实名认证 发表于 2019-5-11 18:28:18 | 显示全部楼层 |阅读模式
昨天有读者给我评论说希望我能够把代码以文本的格式呈现出来而不是用图片,我想了想这个方法不错,在这里我只把wxml和wxss里面的代码以文本格式呈现,js的以图片呈现,因为js是重点,所以希望大家能够跟着敲一下代码。好的,废话不多少,在上一章中,我们学会了文章列表页的制作,但是大家仅仅是学会制作一个文章列表页,如果我有两个文章呢,那是不是把代码复制一份出来,那我有100个文章呢,那不得累死。。。。。。今天我带领大家实现多个列表页。我先把上篇文章的代码以图片的形式呈现出来,这章以后以文本格式呈现,如图:
3101.jpg
我们首先打开post.js页面,在post.js的onload方法里面我们把数据现写好,如图:
3103.jpg
在onload方法里面定义一个数组叫做posts_content,里面有两组数据。我们上一章说过,数据我们是写在data数组里面,那么我们怎么能让这个posts_content放在data里面呢,如图:
3306.jpg
this.setData方法就是把数据放到data数组里面的,其中posts为名 posts_content为值,这样就把posts_content里面的值传给了posts,有了这个posts,我们就可以在wxml页面进行渲染啦。

在渲染之前,我们想一下,我这个posts里面有两个数据,我们怎么能够一条一条取出来呢,这里就用到了微信小程序里面的循环,大家看一下代码:
3307.jpg
我在view标签的上面加了一个block标签,block标签本身没有含义,我们通常会把for循环放在block标签里面。

循环是用wx:for="{{posts}}"这里的posts就是我们在js里面写的posts,这一句话说明我们已经在wxml页面拿到了在js定义的数据并开始循环他,wx:for-item="item"意思是我们的数据是一个数组,item的意思就是每循环一次,它就指向当前循环的数据,比如我有5条数据,第一次循环,我的item指向第一条,以此类推。上图的代码里面我写了个{{item.author}}意思就是我有5条数据,第一次循环,那我的item是不是第一条数据啊,我想取第一条数据中的author字段,那么我就用item.author就可以获取啦。我们编译一下:

3308.jpg



果然,循环出来了两条数据,大家自己把剩下的字段填充下来吧,今天就到这里吧,下一次文章我给大家讲解如何制作文章详情页面。

大家有什么问题,在评论区里面踊跃发言哦,我会一一解答。

希望大家多多关注,多多分享,多多收藏哦。


源码如下:
  1. data: {
  2.    
  3.   },

  4.   /**
  5.    * 生命周期函数--监听页面加载
  6.    */
  7.   onLoad: function (options) {
  8.     var posts_content = [
  9.       {
  10.         auth: "安辰",
  11.         create_time: "2018年5月25日",
  12.         title: "这是测试文本",
  13.         read_count: "100+",
  14.         content: "adpdfjpjfp都是惧怕师傅接单迫击炮发酵豆粕跑到附近派单即附加费多平方吉安频道交评价批复的机票就",
  15.         image: "/we7/resource/icon/addimg.png",
  16.         like_count: "100+",
  17.         postId: 0
  18.       },
  19.       {
  20.         auth: "安辰",
  21.         create_time: "2018年5月25日",
  22.         title: "这是测试文本",
  23.         read_count: "100+",
  24.         content: "adpdfjpjfp都是惧怕师傅接单迫击炮发酵豆粕跑到附近派单即附加费多平方吉安频道交评价批复的机票就",
  25.         image: "/we7/resource/icon/addimg.png",
  26.         like_count: "100+",
  27.         postId: 0
  28.       },
  29.       {
  30.         auth: "安辰",
  31.         create_time: "2018年5月25日",
  32.         title: "这是测试文本",
  33.         read_count: "100+",
  34.         content: "adpdfjpjfp都是惧怕师傅接单迫击炮发酵豆粕跑到附近派单即附加费多平方吉安频道交评价批复的机票就",
  35.         image: "/we7/resource/icon/addimg.png",
  36.         like_count: "100+",
  37.         postId: 0
  38.       }
  39.     ];
  40.     this.setData({
  41.       posts: posts_content
  42.     });
  43.   },
复制代码

本文采集自百度百家号:web开发那些事  原文网址https://mbd.baidu.com/newspage/d ... A%22bjhauthor%22%7D



maomivip@mail.com
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

快速回复 返回顶部 返回列表