微信小程序：新闻列表渲染

Posted 2021-02-22 happy-prince

新闻列表渲染

　　1.设计静态新闻列表（wxml+wxss）

　　　　　　(1)news.wxml

<view class="articlelist">
    <view class="author-time">
      <image class="author-icon" src="../../image/head1.png"></image>
      <text class="author-name">iwen</text>
      <text class="author-date">2020.04.24</text>
    </view>
    <text class="title">hello这是一条新闻</text>
    <image class="article-img" src="../../image/sub1.jpg"></image>
    <text class="article-text">在上古时期的一些人</text>
    <view class="article-like">
      <image class="article-like-icon" src="../../image/sc.png"/>
      <text class="article-like-text">11</text>
      <image class="article-like-icon" src="../../image/fx.png"></image>
      <text class="article-like-text">22</text>
    </view>
    
  </view>

View Code

　　　　　　代码分析：首先整体是一个新闻列表articlelist，其次分为三个部分：作者（author）信息、新闻（article）信息、点赞（article-like）信息

　　　　　　(2)news.wxss

/* pages/news/news.wxss */

.articlelist {
  display: flex;
  flex-direction: column;
  margin-top: 20rpx;
  margin-bottom: 40rpx;
  background-color: #fff;
  border-top: 1px solid #ededed;
  border-bottom: 1px solid #ededed;
  padding: 10px;
  padding-bottom: 5px;
}

.author-time {
  margin-top: 10rpx;
  margin-bottom: 20rpx;
}

.author-icon {
  width: 60rpx;
  height: 60rpx;
  border-radius: 50%;
  vertical-align: middle;
}

.author-name {
  margin-left: 20rpx;
}

.author-date {
  margin-left: 20rpx;
  vertical-align: middle;
  margin-bottom: 5px;
  font-size: 26rpx;
}

.title{
    font-size: 34rpx;
    font-weight: 700;
    color:#333;
    margin-bottom: 10px;
}

.article-img{
    margin-left: 16px;
    width: 100%;
    height: 340rpx;
    margin: auto 0;
    margin-bottom: 15px;
}

.article-text{
    color:#666;
    font-size: 26rpx;
    margin-bottom: 20rpx;
    letter-spacing: 2rpx;
    line-height: 40rpx;
}

.article-like{
    font-size: 13px;
    flex-direction: row;
    line-height: 16px;
}

.article-like-icon{
    height: 16px;
    width: 16px;
    margin-right: 8px;
    vertical-align: middle;
}

.article-like-text{
    vertical-align: middle;
    margin-right: 20px;
}

View Code

　　　　　　最终呈现静态效果：

　　　　　　

 

 

 　　　2.新闻列表渲染（动态页面实现）

　　　　　　　　1.创建data文件夹+data.js文件

　　　　　　　　　　

 

 

 　　　　　　　　2.书写data.js文件（利用模块导出思想）　

var data = [
  {
    id:0,
    icon:"../../image/head1.png",
    author:"iwen",
    time:"2020/04/24",
    title:"建设航天强国，擘画蓝图",
    image:"../../image/sub1.jpg",
    desc:"1970年4月24日，我国成功将第一颗人造地球卫星送上天。响彻全球的《东方红》乐曲，宣告中国从此进入了太空时代，开启了中国航天事业的新纪元。在第五个“中国航天日”和“东方红一号”卫星成功发射50周年到来之际，中共中央总书记、国家主席、中央军委主席4月23日给参与“东方红一号”任务的老科学家回信，向他们致以诚挚的问候，并就弘扬“两弹一星”精神、加快航天强国建设向广大航天工作者提出殷切期望。党的十八大以来，中国在载人航天、卫星通信、火箭技术等多个领域全面开花，“北斗”指路、“天宫”览胜、“墨子”传信、“嫦娥”问月……中国航天硕果累累，令国人备感自豪。2020年新年贺词中，总书记特别提到2019年中国航天事业取得的巨大成就：嫦娥四号在人类历史上第一次登陆月球背面，长征五号遥三运载火箭成功发射，北斗导航全球组网进入冲刺期。这些成就凝结着新时代奋斗者的心血和汗水，彰显了不同凡响的中国风采、中国力量。",
    good:"33",
    comment:"22"
  },
  {
    id:1,
    icon:"../../image/head1.png",
    author:"iwen",
    time:"2020/04/24",
    title:"主持召开部分省市经济形势视频座谈会",
    image:"../../image/sub2.jpg",
    desc:"座谈会上，吉林省长景俊海、上海代市长、江苏省长、河南省长、广东省长、四川省长汇报了本地经济运行情况和下步打算。说，面对突如其来的疫情，在以同志为核心的党中央坚强领导下，经过全国上下艰苦努力，境内疫情防控取得阶段性重要成效，经济社会秩序加快恢复，这来之不易、成之惟艰。目前疫情仍处于全球大流行阶段，国内外经济形势异常复杂严峻，要实事求是、科学研判经济走势，既充分估计困难，直面应对挑战，又坚定发展信心，增强发展动力。要坚持以新时代中国特色社会主义思想为指导，贯彻落实党中央、国务院决策部署，在疫情防控常态化前提下，坚持稳中求进工作总基调，坚持新发展理念，把握好加大宏观政策调节的力度和时机，做好“六稳”工作，着力保居民就业、保基本民生、保市场主体、保粮食能源安全、保产业链供应链稳定、保基层运转，稳住经济基本盘，促进经济恢复增长，推动高质量发展。",
    good:"34",
    comment:"12"
  },
  {
    id:2,
    icon:"../../image/head1.png",
    author:"iwen",
    time:"2020/04/24",
    title:"乔丹和詹姆斯谁更伟大",
    image:"../../image/sub3.jpg",
    desc:"乔丹是画时代+跨世代最伟大球员，除了球场上表现、个人荣耀无数，改变篮球历史和NBA市场、体制，更重要的是：深值人心的人神印象，很难抹去。NBA成功国际化，深入全世界每个角落，乔丹就是当年NBA推手大卫·斯特恩手里的魔杖。 在1980年左右开始看NBA，也看过1984年洛杉矶奥运篮球场上的乔丹和美国男篮，乔丹在80年代中到90年代末，他就像神一般存在，除了全美，全世界都因为乔丹开始接触、认识NBA，爱上NBA，同时开启篮球视野。80年代中开始，全世界人们开始把乔丹和NIKE球鞋穿在脚上，成为流行、文化、时尚和生活。",
    good:"36",
    comment:"7"
  }
]

module.exports = data;

View Code

　　　　　　　　　代码解析：声明data数组，每一个元素为一个对象（对象中存储各种数据）； 使用module.exports导出数组

　　　　　　　　3.在news.js中声明news数组

// pages/news/news.js
var data = require("../../data/data.js");
Page({

  /**
   * 页面的初始数据
   */
  data: {
      swiperOptions:{
          indicatorDots:true,
          indicatorColor:"#109D59",
          autoplay:true,
          circular:true,
          imgUrl:[
            "../../image/banner1.jpg",
            "../../image/banner2.jpg",
            "../../image/banner3.jpg"
          ]
      },
      news:[]
     
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
      this.setData({
        news:data
      })
  }
}）

View Code

　　　　　　　　　　代码解析：声明data变量存放 require("data.js路径")；将news变量初始化为空数组；在onLoad加载中使用this.setData({news:data})实现　　　　　　　　　　　　　　　数据传输

　　　　　　　　4.在news.wxml中添加<block>实现数据遍历

<view class="articlelist">
  <block wx:for="{{ news }}" wx:for-index="idx" wx:for-item="item" wx:key="{{ idx }}">
    <view class="author-time">
      <image class="author-icon" src="{{ item.icon }}"></image>
      <text class="author-name">{{ item.author }}</text>
      <text class="author-date">{{ item.time }}</text>
    </view>
    <text class="title">{{ item.title }}</text>
    <image class="article-img" src="{{ item.image }}"></image>
    <text class="article-text">{{ item.desc }}</text>
    <view class="article-like">
      <image class="article-like-icon" src="../../image/sc.png"/>
      <text class="article-like-text">{{ item.good }}</text>
      <image class="article-like-icon" src="../../image/fx.png"></image>
      <text class="article-like-text">{{item.comment}}</text>
    </view>
  </block>
</view>

View Code

　　　　3.呈现效果

　　　　　　　　

 

 

 

 

 

 完成新闻列表渲染，下一节认识模板template~