(四)微信小程序:新闻列表渲染

新闻列表渲染

  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:[]
     
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onl oad: 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~

 

上一篇:获取网页URL地址及参数等的两种方法(js和C#)


下一篇:Python+Selenium练习(二十六)- 多窗口之间切换