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

其他 2018-12-02 03:13:34 阅读次数: 0

今天，我们要构建一个如下图所示的新闻列表页面（手机截不了长图，大家将就看吧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({})

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

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

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

扫描二维码关注公众号，回复： 4324602 查看本文章

首先，我们来实现图片轮播，在小程序中提供了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组件绑定数组：

<view class='animal_info' wx:for="{{myarray}}">

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

这是因为我们需要指定哪一项列表，如果我们没有指定，数组当前项的变量名默认为 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 中预先定义。

注意：

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

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

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

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

解决方法是：在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/

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

猜你喜欢

转载自blog.csdn.net/hst_gogogo/article/details/84674461
今日推荐
基于大语言模型的开源知识库问答系统 MaxKB GitHub Star 数量突破 5,000 个！
美国拟限制 AI 大模型出口中国和俄罗斯
苹果将与 OpenAI 达成协议，将 ChatGPT 应用于 iPhone
openKylin 社区生态委员会第六次会议圆满召开
阿里云正式发布通义千问 2.5
Python 3.13 发布首个 Beta：实验性自由线程模式和 JIT、改进交互式解释器
Stack Overflow 拿我的代码去训练 AI 大模型，还封了我的账号
Pop!_OS 的 COSMIC 桌面完成 App Store 上架工作
报告：Django 仍然是 74% 开发者的首选
《2024 年一季度互联网投融资运行情况》研究报告
15 年前上了“FFmpeg 耻辱柱”，今天他还得谢谢咱——腾讯QQPlayer一雪前耻？
TIOBE 5 月榜单：Fortran “复活”进入 Top 10
周排行
BPM为企业带来的实际利益
好程序员web前端分享css常用属性缩写
Java文件下载（excel）
css样式的动态添加及显示和隐藏等零碎用法
axios全局配置以及拦截器
使用Logstash来实时同步MySQL和log日志数据到ES
C++获取当前时间（年月日、时分秒、毫秒）
Odoo产品分析 (四) -- 工具板块(11) -- 网站即时聊天(1)
Java环境配置正确，但是java、javac、java -version均返回“不是内部或外部命令，也不是可运行的程序或批处理文件”？
01 官网下载各种CentOS教程（超详细版）
每日归档
更多
2024-05-14(0)
2024-05-13(18)
2024-05-12(0)
2024-05-11(38)
2024-05-10(38)
2024-05-09(35)
2024-05-08(42)
2024-05-07(14)
2024-05-06(40)
2024-05-05(0)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022