从零开始学微信小程序开发－－－4、新闻列表页面的制作（列表渲染）

最新推荐文章于 2025-03-13 11:40:13 发布

hst_gogogo

最新推荐文章于 2025-03-13 11:40:13 发布

阅读量1w

点赞数 14

分类专栏：小程序文章标签：小程序列表渲染 for循环

本文链接：https://blog.csdn.net/hst_gogogo/article/details/84674461

版权

小程序专栏收录该内容

10 篇文章

订阅专栏

今天，我们要构建一个如下图所示的新闻列表页面（手机截不了长图，大家将就看吧QAQ）：

首先，在pages同级目录创建一个news目录，用于放有关新闻列表页面的各种文件，然后创建news.wxml,news.wxss,news.js,news.json四个文件：

然后在app.json中注册页面（理由前面已经说过了），然后把它放在pages配置项的第一位，这样一启动就可以看到新闻列表页面，方便我们开发。

{
  "pages": [
    "pages/news/news",
    "pages/index/index"
  ],
  "window": {
    "navigationBarBackgroundColor": "#f5f4a7"
  }
}

另外，请在news.json文件中输入 {}

还有在news.js文件中先输入一个 Page({})

（就算没有内容也要有这些，否则会报错）

接下来我们开始构架页面骨架：

从上面做出来的效果截图可以看出，我们一开始要实现一个图片轮播的效果，然后下面是由动物头像、动物名字、简介描述、动物图片、动物相关的正文构成的列表项。

首先，我们来实现图片轮播，在小程序中提供了swiper组件，用此组件可以快速实现图片轮播的效果，

在swiper组件中，只能放swiper-item组件，我们的文字、图片等信息可以放在swiper-item中。

（详情参阅https://developers.weixin.qq.com/miniprogram/dev/component/swiper.html）

首先我们看下能否实现轮播效果(由于没有设置自动切换，需要手动滑动才能切换)：

//news.wxml
<view>
<swiper class='swpr' indicator-dots="true" autoplay='true'>
<swiper-item>1</swiper-item>
<swiper-item>2</swiper-item>
<swiper-item>3</swiper-item>
<swiper-item>4</swiper-item>
</swiper>
</view>

效果如上图所示，接下来我们在每一个swiper-item中放一张图片，并为之添加相关样式，如下：

//news.wxml
<view>
  <swiper class='swpr' indicator-dots="true" autoplay='true' indicator-color="rgba(255, 255, 255, .2)" indicator-active-color="#abf" interval="3000" circular="true">
    <swiper-item class='swpr_it'>
      <image src='/images/news/1.jpg'></image>
    </swiper-item>
    <swiper-item class='swpr_it'>
      <image src='/images/news/2.jpg'></image>
    </swiper-item>
    <swiper-item class='swpr_it'>
      <image src='/images/news/3.jpg'></image>
    </swiper-item>
    <swiper-item class='swpr_it'>
      <image src='/images/news/4.jpg'></image>
    </swiper-item>
    <swiper-item class='swpr_it'>
      <image src='/images/news/5.jpg'></image>
    </swiper-item>
  </swiper>
</view>

indicator-dots="true" //设置面板提示点，就是上面那几个小点点

indicator-color="rgba(255, 255, 255, .2)" //指示点颜色，设为白色，透明度0.2

dicator-active-color="#abf" //当前选中的指示点颜色

autoplay='true'//是否自动切换

in interval="3000" //自动切换时间间隔

circular="true"//是否采用衔接滑动，如果此项不设为true，当切换到最后一张图，再切到第一张图时，衔接是不连贯的

由上面可以看出图片是显示出来了，但是并没有100%显示，我们为之增加样式：

//news.wxss
.swpr {
  width: 100%;
  height: 500rpx;
}

.swpr_it image {
  width: 100%;
}

如果单单为图片设置100%的宽是不够的，必须为swiper组件也设置一个100%的宽度（为swiper-item设置宽高无效，它默认继承swiper的宽高）

这样，我们的轮播就完成了，接着，我们完成列表项的制作：

//news.wxml
<view>
  <swiper class='swpr' indicator-dots="true" autoplay='true' indicator-color="rgba(255, 255, 255, .2)" indicator-active-color="#abf" interval="3000" circular="true">
    <swiper-item class='swpr_it'><image src='/images/news/1.jpg'></image></swiper-item>
    <swiper-item class='swpr_it'><image src='/images/news/2.jpg'></image></swiper-item>
    <swiper-item class='swpr_it'><image src='/images/news/3.jpg'></image></swiper-item>
    <swiper-item class='swpr_it'><image src='/images/news/4.jpg'></image></swiper-item>
    <swiper-item class='swpr_it'><image src='/images/news/5.jpg'></image></swiper-item>
  </swiper>

//列表开始
  <view class='animal_info'>
    <view class='animal_photo'>
    <image src='/images/news/1.jpg{{picture_url}}'></image>
    <text class='animal_nikename'>{{nikename}}露露</text>
    </view>
   
    <text class='animal_title'>{{describe}}温柔可人 吃可爱多长大的</text>
    <image src='/images/news/1.jpg{{picture_url}}' class='animal_img'></image>
    <text class='animal_intro'>{{brief_introduction}}
    露露温柔可人吃可爱多长大的，露露温柔可人吃可爱多长大的，露露温柔可人吃可爱多长大的。露露温柔可人吃可爱多长大的。露露温柔可人吃可爱多长大的。露露温柔可人吃可爱多长大的，露露温柔可人吃可爱多长大的，露露温柔可人吃可爱多长大的，露露温柔可人吃可爱多长大的，露露温柔可人吃可爱多长大的，露露温柔可人吃可爱多长大的露露温柔可人吃可爱多长大的。
    </text>

    <view class='article_state'>
    <image src='/images/news/start.png{{star_url}}' class='article_stateimg'></image>
    <text class='article_statetext'>{{star_count}}246</text>
    <image src='/images/news/chat.png{{char_url}}' class='article_stateimg'></image>
    <text class='article_statetext'>{{chat_count}}200</text>
    </view>
  </view>

    <view class='animal_info'>
    <view class='animal_photo'>
    <image src='/images/news/2.jpg'></image>
    <text class='animal_nikename'>壮壮</text>
    </view>
   
    <text class='animal_title'>风流倜傥 玉树临风</text>
    <image src='/images/news/2.jpg' class='animal_img'></image>
     <text class='animal_intro'>
    壮壮风流倜傥玉树临风， 壮壮风流倜傥玉树临风， 壮壮风流倜傥玉树临风， 壮壮风流倜傥玉树临风， 壮壮风流倜傥玉树临风， 壮壮风流倜傥玉树临风， 壮壮风流倜傥玉树临风， 壮壮风流倜傥玉树临风， 壮壮风流倜傥玉树临风， 壮壮风流倜傥玉树临风， 壮壮风流倜傥玉树临风。
    </text>

    <view class='article_state'>
    <image src='/images/news/start.png' class='article_stateimg'></image>
    <text class='article_statetext'>67</text>
    <image src='/images/news/chat.png' class='article_stateimg'></image>
    <text class='article_statetext'>60</text>
    </view>
  </view>

    <view class='animal_info'>
    <view class='animal_photo'>
    <image src='/images/news/3.jpg'></image>
    <text class='animal_nikename'>妮妮</text>
    </view>
   
    <text class='animal_title'>柔情似水 有灵性</text>
    <image src='/images/news/3.jpg' class='animal_img'></image>
     <text class='animal_intro'>
    妮妮柔情似水有灵性，妮妮柔情似水有灵性，妮妮柔情似水有灵性，妮妮柔情似水有灵性，妮妮柔情似水有灵性，妮妮柔情似水有灵性，妮妮柔情似水有灵性，妮妮柔情似水有灵性，妮妮柔情似水有灵性，妮妮柔情似水有灵性。
    </text>

    <view class='article_state'>
    <image src='/images/news/start.png' class='article_stateimg'></image>
    <text class='article_statetext'>200</text>
    <image src='/images/news/chat.png' class='article_stateimg'></image>
    <text class='article_statetext'>199</text>
    </view>
  </view>

    <view class='animal_info'>
    <view class='animal_photo'>
    <image src='/images/news/4.jpg'></image>
    <text class='animal_nikename'>娜娜</text>
    </view>
   
    <text class='animal_title'>可爱迷人 听话懂事</text>
    <image src='/images/news/4.jpg' class='animal_img'></image>
     <text class='animal_intro'>
   娜娜可爱迷人听话懂事，娜娜可爱迷人听话懂事，娜娜可爱迷人听话懂事，娜娜可爱迷人听话懂事，娜娜可爱迷人听话懂事，娜娜可爱迷人听话懂事，娜娜可爱迷人听话懂事，娜娜可爱迷人听话懂事，娜娜可爱迷人听话懂事，娜娜可爱迷人听话懂事。
    </text>

    <view class='article_state'>
    <image src='/images/news/start.png' class='article_stateimg'></image>
    <text class='article_statetext'>300</text>
    <image src='/images/news/chat.png' class='article_stateimg'></image>
    <text class='article_statetext'>280</text>
    </view>
  </view>

    <view class='animal_info'>
    <view class='animal_photo'>
    <image src='/images/news/5.jpg'></image>
    <text class='animal_nikename'>欢欢</text>
    </view>
   
    <text class='animal_title'>机灵调皮 熊孩子一枚</text>
    <image src='/images/news/5.jpg' class='animal_img'></image>
     <text class='animal_intro'>
    欢欢机灵调皮熊孩子一枚，欢欢机灵调皮熊孩子一枚，欢欢机灵调皮熊孩子一枚，欢欢机灵调皮熊孩子一枚，欢欢机灵调皮熊孩子一枚，欢欢机灵调皮熊孩子一枚，欢欢机灵调皮熊孩子一枚，欢欢机灵调皮熊孩子一枚，欢欢机灵调皮熊孩子一枚，欢欢机灵调皮熊孩子一枚。
    </text>

    <view class='article_state'>
    <image src='/images/news/start.png' class='article_stateimg'></image>
    <text class='article_statetext'>800</text>
    <image src='/images/news/chat.png' class='article_stateimg'></image>
    <text class='article_statetext'>788</text>
    </view>
  </view>
</view>

以上代码采用硬编码的方式，有多少个列表就增加多少 animal_info 代码块，代码冗余，复用程度低，而且极不灵活，这个问题后面再来解决，先看wxss代码：

//news.wxss
.swpr{
  width: 100%;
  height: 500rpx;
}

.swpr_it image{
  width: 100%;
  /* color:rgb(255, 228, 181); */
}
.animal_info{
  display: flex;
  flex-direction: column;
  width: 100%;
  margin-top: 12px;
  border-top: 1px solid #ededed;
  /* border-bottom: 1px solid #ededed; */
  padding-top: 10px;
  /* background-color: #fff; */

}
.animal_photo{
  width: 100%;
  margin-bottom: 10px;
   margin-left: 6px;
}
.animal_title{
  font-weight: bold;
  font-size: 32rpx;
  line-height: 36rpx;
  text-align: center;
  color: #444;
  vertical-align: middle;
  margin-bottom: 10px;
}
.animal_photo image{
  width: 80rpx;
  height: 80rpx;
  border-radius: 100rpx;
  vertical-align: middle;
}
.animal_nikename{
  /* font-weight: bold; */
  margin-left: 10px;
  vertical-align: middle;
  font-size: 26rpx;
}

.animal_img {
  width: 100%;
  margin: auto 0;
 
}
.animal_intro{
 
  font-size: 28rpx;
  letter-spacing: 2rpx;
  color: #666;
  line-height: 40rpx;
  margin-bottom: 20rpx;
  margin-left: 20rpx;
  /* text-align:justify; */
  
 
}
.article_state{
  width: 100%;
  flex-direction: row;
  margin-bottom: 20rpx;
}
.article_stateimg{
  width: 26rpx;
  height: 26rpx;
  vertical-align: middle;
  margin-left: 8px;
}
.article_statetext{
  font-size: 26rpx;
  color: #666;
  margin-left: 10rpx;
  margin-right: 20px;
  margin-bottom: 20px;
  vertical-align: middle;
}

效果如下图：

显然，导航栏的颜色不是我们想要的（这是在app.json中配置的颜色），我们来在news.json中配置颜色和文字：

{
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#fe9",   
    "navigationBarTitleText": "Lovely animals",
    "navigationBarTextStyle": "black"
  }

效果如下图：

现在，我们来解决代码冗余的问题：

要实现提高代码重用率，首先要解决的问题是：数据从何而来？怎么让一段代码实现多条不同数据的显示？在JS文件中的Page()构造器里面有一个data属性，这里放的是页面第一次渲染要用到的初始数据，在页面被加载的时候，data将被以JSON字符串的形式由逻辑层传至渲染层（data中的数据必须是可以转成JSON的类型：字符串、数字、布尔值、对象、数组），渲染层通过WXML对数据进行绑定。现在我们就以数据绑定的形式将数据填充到WXML中对应的位置(输入Page敲下回车就会自动显示相关的属性和行为)：

//news.js
Page({
data: {
picture_url: "/images/news/1.jpg",
nikename:"露露",
describe:"温柔可人 吃可爱多长大的",
brief_introduction:"露露温柔可人吃可爱多长大的，露露温柔可人吃可爱多长大的，露露温柔可人吃可爱多长大的。露露温柔可人吃可爱多长大的。露露温柔可人吃可爱多长大的。露露温柔可人吃可爱多长大的，露露温柔可人吃可爱多长大的，露露温柔可人吃可爱多长大的，露露温柔可人吃可爱多长大的，露露温柔可人吃可爱多长大的，露露温柔可人吃可爱多长大的露露温柔可人吃可爱多长大的。",
star_url:"/images/news/start.png",
star_count:246,
char_url:"/images/news/chat.png",
chat_count:230 
}
})

（需要注意的是图片的路径不要有空格，否则显示不出来）接下来，我们先尝试着对第一个列表项中的值进行数据绑定数据绑定采用{{varName}}的形式：

//news.wxml
<view class='animal_info'>
<view class='animal_photo'>
<image src='{{picture_url}}'></image>
<text class='animal_nikename'>{{nikename}}</text>
</view>
<text class='animal_title'>{{describe}}</text>
<image src='{{picture_url}}' class='animal_img'></image>
<text class='animal_intro'>{{brief_introduction}}</text>

<view class='article_state'>
<image src='{{star_url}}' class='article_stateimg'></image>
<text class='article_statetext'>{{star_count}}</text>
<image src='{{char_url}}' class='article_stateimg'></image>
<text class='article_statetext'>{{chat_count}}</text>
</view>

可以正常显示之后，我们把后面几个“列表项”的数据也搬到JS中，把它们放在一个数组里面(数组名:[{1},{2},{3}])，然后把后面的几个 animal_info去掉，只留下进行了数据绑定的那一个：

//js
data: {   

    myarray: [
      {
        picture_url: "/images/news/1.jpg",
        nikename: "露露",
        describe: "温柔可人 吃可爱多长大的",
        brief_introduction: "露露温柔可人吃可爱多长大的，露露温柔可人吃可爱多长大的，露露温柔可人吃可爱多长大的。露露温柔可人吃可爱多长大的。露露温柔可人吃可爱多长大的。露露温柔可人吃可爱多长大的，露露温柔可人吃可爱多长大的，露露温柔可人吃可爱多长大的，露露温柔可人吃可爱多长大的，露露温柔可人吃可爱多长大的，露露温柔可人吃可爱多长大的露露温柔可人吃可爱多长大的。",
        star_url: "/images/news/start.png",
        star_count: 246,
        char_url: "/images/news/chat.png",
        chat_count: 230,

      },
      {
      picture_url: "/images/news/2.jpg",
      nikename: "壮壮",
        describe: "风流倜傥 玉树临风",
        brief_introduction: " 壮壮风流倜傥玉树临风， 壮壮风流倜傥玉树临风， 壮壮风流倜傥玉树临风， 壮壮风流倜傥玉树临风， 壮壮风流倜傥玉树临风， 壮壮风流倜傥玉树临风， 壮壮风流倜傥玉树临风， 壮壮风流倜傥玉树临风， 壮壮风流倜傥玉树临风， 壮壮风流倜傥玉树临风， 壮壮风流倜傥玉树临风。",
      star_url: "/images/news/start.png",
      star_count: 67,
      char_url: "/images/news/chat.png",
      chat_count: 60 
      },
      {
        picture_url: "/images/news/3.jpg",
        nikename: "妮妮",
        describe: "柔情似水 有灵性",
        brief_introduction: "妮妮柔情似水有灵性，妮妮柔情似水有灵性，妮妮柔情似水有灵性，妮妮柔情似水有灵性，妮妮柔情似水有灵性，妮妮柔情似水有灵性，妮妮柔情似水有灵性，妮妮柔情似水有灵性，妮妮柔情似水有灵性，妮妮柔情似水有灵性。",
        star_url: "/images/news/start.png",
        star_count: 200,
        char_url: "/images/news/chat.png",
        chat_count: 199  
      },
      {
        picture_url: "/images/news/4.jpg",
        nikename: "娜娜",
        describe: "可爱迷人 听话懂事",
        brief_introduction: "娜娜可爱迷人听话懂事，娜娜可爱迷人听话懂事，娜娜可爱迷人听话懂事，娜娜可爱迷人听话懂事，娜娜可爱迷人听话懂事，娜娜可爱迷人听话懂事，娜娜可爱迷人听话懂事，娜娜可爱迷人听话懂事，娜娜可爱迷人听话懂事，娜娜可爱迷人听话懂事。",
        star_url: "/images/news/start.png",
        star_count: 300,
        char_url: "/images/news/chat.png",
        chat_count: 280 
      },
      {
        picture_url: "/images/news/1.jpg",
        nikename: "欢欢",
        describe: "机灵调皮 熊孩子一枚",
        brief_introduction: "欢欢机灵调皮熊孩子一枚，欢欢机灵调皮熊孩子一枚，欢欢机灵调皮熊孩子一枚，欢欢机灵调皮熊孩子一枚，欢欢机灵调皮熊孩子一枚，欢欢机灵调皮熊孩子一枚，欢欢机灵调皮熊孩子一枚，欢欢机灵调皮熊孩子一枚，欢欢机灵调皮熊孩子一枚，欢欢机灵调皮熊孩子一枚。",
        star_url: "/images/news/start.png",
        star_count: 800,
        char_url: "/images/news/chat.png",
        chat_count: 788 
      }
      ]  
  },

//wxml
<view>
  <swiper class='swpr' indicator-dots="true" autoplay='true' indicator-color="rgba(255, 255, 255, .2)" indicator-active-color="#abf" interval="3000" circular="true">
    <swiper-item class='swpr_it'><image src='/images/news/1.jpg'></image></swiper-item>
    <swiper-item class='swpr_it'><image src='/images/news/2.jpg'></image></swiper-item>
    <swiper-item class='swpr_it'><image src='/images/news/3.jpg'></image></swiper-item>
    <swiper-item class='swpr_it'><image src='/images/news/4.jpg'></image></swiper-item>
    <swiper-item class='swpr_it'><image src='/images/news/5.jpg'></image></swiper-item>
  </swiper>
  <view class='animal_info'>
    <view class='animal_photo'>
    <image src='{{myarray[0].picture_url}}'></image>
    <text class='animal_nikename'>{{myarray[0].nikename}}</text>
    </view>
   
    <text class='animal_title'>{{myarray[0].describe}}</text>
    <image src='{{myarray[0].picture_url}}' class='animal_img'></image>
    <text class='animal_intro'>{{myarray[0].brief_introduction}}</text>

    <view class='article_state'>
    <image src='{{myarray[0].star_url}}' class='article_stateimg'></image>
    <text class='article_statetext'>{{myarray[0].star_count}}</text>
    <image src='{{myarray[0].char_url}}' class='article_stateimg'></image>
    <text class='article_statetext'>{{myarray[0].chat_count}}</text>
    </view>
  </view>
</view>

这下问题来了！去掉后面的animal_info之后，页面上就只能显示一个“列表项”了，后面那些可爱的小猫小狗都没能露面呀？

很明显我们需要一个循环来实现根据数组长度来决定渲染多少个列表项的功能（请参考列表渲染），在API中有这样一段：

在组件上使用 wx:for 控制属性绑定一个数组，即可使用数组中各项的数据重复渲染该组件。

默认数组的当前项的下标变量名默认为 index，数组当前项的变量名默认为 item
<view wx:for="{{array}}">
  {{index}}: {{item.message}}
</view>
Page({
  data: {
    array: [{
      message: 'foo',
    }, {
      message: 'bar'
    }]
  }
})
使用 wx:for-item 可以指定数组当前元素的变量名，

使用 wx:for-index 可以指定数组当前下标的变量名：
<view wx:for="{{array}}" wx:for-index="idx" wx:for-item="itemName">
  {{idx}}: {{itemName.message}}
</view>

我们试一下为animal_info所在的VIEW组件绑定数组：

但是编译之后连第一个列表项的数据都没有显示？？？

这是因为我们需要指定哪一项列表，如果我们没有指定，数组当前项的变量名默认为 item，所以正确的方式应该是{{item.varname}}

//wxml
<view>
  <swiper class='swpr' indicator-dots="true" autoplay='true' indicator-color="rgba(255, 255, 255, .2)" indicator-active-color="#abf" interval="3000" circular="true">
    <swiper-item class='swpr_it'><image src='/images/news/1.jpg'></image></swiper-item>
    <swiper-item class='swpr_it'><image src='/images/news/2.jpg'></image></swiper-item>
    <swiper-item class='swpr_it'><image src='/images/news/3.jpg'></image></swiper-item>
    <swiper-item class='swpr_it'><image src='/images/news/4.jpg'></image></swiper-item>
    <swiper-item class='swpr_it'><image src='/images/news/5.jpg'></image></swiper-item>
  </swiper>
  <view class='animal_info' wx:for="{{myarray}}">
    <view class='animal_photo'>
    <image src='{{item.picture_url}}'></image>
    <text class='animal_nikename'>{{item.nikename}}</text>
    </view>
   
    <text class='animal_title'>{{item.describe}}</text>
    <image src='{{item.picture_url}}' class='animal_img'></image>
    <text class='animal_intro'>{{item.brief_introduction}}</text>

    <view class='article_state'>
    <image src='{{item.star_url}}' class='article_stateimg'></image>
    <text class='article_statetext'>{{item.star_count}}</text>
    <image src='{{item.char_url}}' class='article_stateimg'></image>
    <text class='article_statetext'>{{item.chat_count}}</text>
    </view>
  </view>
</view>

这下图文全都显示出来啦，一共有5个。

在实际开发的过程中，我们是要从服务器取数据的，而不是直接把数据在WXML或JS中写死，然后每次去修改

从服务器获取的数据应该放在onLoad()函数里面

我们修改一下JS代码：（数据移动到onLoad()中，并且数组名变为myarray1了）


Page({

  /**
   * 页面的初始数据
   */
  data: {   
    // myarray:[ 
    //   ]
  },
  

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    var myarray1= [
      {
        picture_url: "/images/news/1.jpg",
        nikename: "露露",
        describe: "温柔可人 吃可爱多长大的",
        brief_introduction: "露露温柔可人吃可爱多长大的，露露温柔可人吃可爱多长大的，露露温柔可人吃可爱多长大的。露露温柔可人吃可爱多长大的。露露温柔可人吃可爱多长大的。露露温柔可人吃可爱多长大的，露露温柔可人吃可爱多长大的，露露温柔可人吃可爱多长大的，露露温柔可人吃可爱多长大的，露露温柔可人吃可爱多长大的，露露温柔可人吃可爱多长大的露露温柔可人吃可爱多长大的。",
        star_url: "/images/news/start.png",
        star_count: 246,
        char_url: "/images/news/chat.png",
        chat_count: 230,

      },
      {
        picture_url: "/images/news/2.jpg",
        nikename: "壮壮",
        describe: "风流倜傥 玉树临风",
        brief_introduction: " 壮壮风流倜傥玉树临风， 壮壮风流倜傥玉树临风， 壮壮风流倜傥玉树临风， 壮壮风流倜傥玉树临风， 壮壮风流倜傥玉树临风， 壮壮风流倜傥玉树临风， 壮壮风流倜傥玉树临风， 壮壮风流倜傥玉树临风， 壮壮风流倜傥玉树临风， 壮壮风流倜傥玉树临风， 壮壮风流倜傥玉树临风。",
        star_url: "/images/news/start.png",
        star_count: 67,
        char_url: "/images/news/chat.png",
        chat_count: 60
      },
      {
        picture_url: "/images/news/3.jpg",
        nikename: "妮妮",
        describe: "柔情似水 有灵性",
        brief_introduction: "妮妮柔情似水有灵性，妮妮柔情似水有灵性，妮妮柔情似水有灵性，妮妮柔情似水有灵性，妮妮柔情似水有灵性，妮妮柔情似水有灵性，妮妮柔情似水有灵性，妮妮柔情似水有灵性，妮妮柔情似水有灵性，妮妮柔情似水有灵性。",
        star_url: "/images/news/start.png",
        star_count: 200,
        char_url: "/images/news/chat.png",
        chat_count: 199
      },
      {
        picture_url: "/images/news/4.jpg",
        nikename: "娜娜",
        describe: "可爱迷人 听话懂事",
        brief_introduction: "娜娜可爱迷人听话懂事，娜娜可爱迷人听话懂事，娜娜可爱迷人听话懂事，娜娜可爱迷人听话懂事，娜娜可爱迷人听话懂事，娜娜可爱迷人听话懂事，娜娜可爱迷人听话懂事，娜娜可爱迷人听话懂事，娜娜可爱迷人听话懂事，娜娜可爱迷人听话懂事。",
        star_url: "/images/news/start.png",
        star_count: 300,
        char_url: "/images/news/chat.png",
        chat_count: 280
      },
      {
        picture_url: "/images/news/5.jpg",
        nikename: "欢欢",
        describe: "机灵调皮 熊孩子一枚",
        brief_introduction: "欢欢机灵调皮熊孩子一枚，欢欢机灵调皮熊孩子一枚，欢欢机灵调皮熊孩子一枚，欢欢机灵调皮熊孩子一枚，欢欢机灵调皮熊孩子一枚，欢欢机灵调皮熊孩子一枚，欢欢机灵调皮熊孩子一枚，欢欢机灵调皮熊孩子一枚，欢欢机灵调皮熊孩子一枚，欢欢机灵调皮熊孩子一枚。",
        star_url: "/images/news/start.png",
        star_count: 800,
        char_url: "/images/news/chat.png",
        chat_count: 788
      }
    ]
 
    
  }
})

把数据移动到函数中后并没有显示出来

这是因为我们将数据放到onLoad()中只是为了模拟向服务器取数据，但取到的数据还是要渲染出来（放在data中），所以我们应该用setData将数据从逻辑层发送到视图层

Page.prototype.setData(Object data, Function callback)

setData 函数用于将数据从逻辑层发送到视图层（异步），同时改变对应的 this.data 的值（同步）。

参数说明

字段

类型

必填

描述

最低版本

data

Object

是

这次要改变的数据

callback

Function

否

setData引起的界面更新渲染完毕后的回调函数

1.5.0

Object 以 key: value 的形式表示，将 this.data 中的 key 对应的值改变成 value。

其中 key 可以以数据路径的形式给出，支持改变数组中的某一项或对象的某个属性，如array[2].message，a.b.c.d，并且不需要在 this.data 中预先定义。

注意：

直接修改 this.data 而不调用 this.setData 是无法改变页面的状态的，还会造成数据不一致。

仅支持设置可 JSON 化的数据。

单次设置的数据不能超过1024kB，请尽量避免一次设置过多的数据。

请不要把 data 中任何一项的 value 设为 undefined ，否则这一项将不被设置并可能遗留一些潜在问题。

字段	类型	必填	描述	最低版本
data	Object	是	这次要改变的数据
callback	Function	否	setData引起的界面更新渲染完毕后的回调函数	1.5.0

解决方法是：在onLoad()函数中加上：

this.setData({

myarray: myarray1

});

myarray（KEY）:myarray1(VALUE)，将myarray1数组中的值赋给myarray（myarray与 wxml中绑定的数组名相同wx:for="{{myarray}}）（这样相当于把从“服务器取到的数据”平铺赋给data属性）

至此，新闻列表页制作就完成啦，下面贴一些JS代码，其他的都没变：

Page({

  /**
   * 页面的初始数据
   */
  data: {
    // myarray:[  
    //   ]
  },


  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function(options) {
    var myarray1 = [{
        picture_url: "/images/news/1.jpg",
        nikename: "露露",
        describe: "温柔可人 吃可爱多长大的",
        brief_introduction: "露露温柔可人吃可爱多长大的，露露温柔可人吃可爱多长大的，露露温柔可人吃可爱多长大的。露露温柔可人吃可爱多长大的。露露温柔可人吃可爱多长大的。露露温柔可人吃可爱多长大的，露露温柔可人吃可爱多长大的，露露温柔可人吃可爱多长大的，露露温柔可人吃可爱多长大的，露露温柔可人吃可爱多长大的，露露温柔可人吃可爱多长大的露露温柔可人吃可爱多长大的。",
        star_url: "/images/news/start.png",
        star_count: 246,
        char_url: "/images/news/chat.png",
        chat_count: 230,

      },
      {
        picture_url: "/images/news/2.jpg",
        nikename: "壮壮",
        describe: "风流倜傥 玉树临风",
        brief_introduction: " 壮壮风流倜傥玉树临风， 壮壮风流倜傥玉树临风， 壮壮风流倜傥玉树临风， 壮壮风流倜傥玉树临风， 壮壮风流倜傥玉树临风， 壮壮风流倜傥玉树临风， 壮壮风流倜傥玉树临风， 壮壮风流倜傥玉树临风， 壮壮风流倜傥玉树临风， 壮壮风流倜傥玉树临风， 壮壮风流倜傥玉树临风。",
        star_url: "/images/news/start.png",
        star_count: 67,
        char_url: "/images/news/chat.png",
        chat_count: 60
      },
      {
        picture_url: "/images/news/3.jpg",
        nikename: "妮妮",
        describe: "柔情似水 有灵性",
        brief_introduction: "妮妮柔情似水有灵性，妮妮柔情似水有灵性，妮妮柔情似水有灵性，妮妮柔情似水有灵性，妮妮柔情似水有灵性，妮妮柔情似水有灵性，妮妮柔情似水有灵性，妮妮柔情似水有灵性，妮妮柔情似水有灵性，妮妮柔情似水有灵性。",
        star_url: "/images/news/start.png",
        star_count: 200,
        char_url: "/images/news/chat.png",
        chat_count: 199
      },
      {
        picture_url: "/images/news/4.jpg",
        nikename: "娜娜",
        describe: "可爱迷人 听话懂事",
        brief_introduction: "娜娜可爱迷人听话懂事，娜娜可爱迷人听话懂事，娜娜可爱迷人听话懂事，娜娜可爱迷人听话懂事，娜娜可爱迷人听话懂事，娜娜可爱迷人听话懂事，娜娜可爱迷人听话懂事，娜娜可爱迷人听话懂事，娜娜可爱迷人听话懂事，娜娜可爱迷人听话懂事。",
        star_url: "/images/news/start.png",
        star_count: 300,
        char_url: "/images/news/chat.png",
        chat_count: 280
      },
      {
        picture_url: "/images/news/5.jpg",
        nikename: "欢欢",
        describe: "机灵调皮 熊孩子一枚",
        brief_introduction: "欢欢机灵调皮熊孩子一枚，欢欢机灵调皮熊孩子一枚，欢欢机灵调皮熊孩子一枚，欢欢机灵调皮熊孩子一枚，欢欢机灵调皮熊孩子一枚，欢欢机灵调皮熊孩子一枚，欢欢机灵调皮熊孩子一枚，欢欢机灵调皮熊孩子一枚，欢欢机灵调皮熊孩子一枚，欢欢机灵调皮熊孩子一枚。",
        star_url: "/images/news/start.png",
        star_count: 800,
        char_url: "/images/news/chat.png",
        chat_count: 788
      }
    ]
    this.setData({
      myarray: myarray1
    });


  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function() {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function() {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function() {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function() {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function() {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function() {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function() {

  }
})

参考资料：

小程序API文档：https://developers.weixin.qq.com/miniprogram/dev/api/

上一篇：小程序静态启动页面的制作

下一篇：小程序页面跳转