写在前面

本篇文章是微信小程序开发入门的第九篇，介绍小程序云开发之列表页面开发

列表页面开发

我们现在已经获取了数据，并且赋值给了fruitList，但是我们并没有页面显示这些数据，接下来我们就编写一个页面来展示这些数据

打开miniprogram\pages\index\index.wxml文件，我们将展示这些数据的代码写在这个文件中，文件中代码替换成如下代码：

<view class="fruit_ul">
  <view class="furit_li" wx:for="{{fruitList}}" wx:key="index">
    <view class="furit_img"></view>
    <view class="fruit_name">
      {{item.name}}
    </view>
    <view class="fruit_intro">
      {{item.intro}}
    </view>
    <view class="fruit_price">
      <text class="oriPrice"><text class="qian">￥</text>{{item.oriPrice}}</text>
      <text class="curPrice"><text class="qian">￥</text>{{item.curPrice}}</text>
      <text class="vipPrice"><text class="qian">￥</text>{{item.vipPrice}} V</text>
    </view>
  </view>
</view>

上面的代码中用到了小程序的wx:for，wx:for一个数组，搭配wx:key，默认每一项的字段为item，默认索引为index，可以通过wx:for-index="idx"、wx:for-item="itemName"来改变默认的字段，具体可以查看官方文档-列表渲染的说明

同时打开miniprogram\pages\index\index.wxss文件，编写相应的css代码，将文件中的代码替换成如下代码：

.fruit_ul {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  width: 718rpx;
  padding: 0 16rpx;
}

.furit_li {
  width: 342rpx;
  margin-bottom: 16rpx;
}

.furit_img {
  width: 342rpx;
  height: 342rpx;
  background-color: #EEEEEE;
  border-radius: 8rpx;
}

.fruit_name {
  color: #333333;
  margin-top: 8rpx;
}

.fruit_intro {
  color: #999999;
  font-size: 28rpx;
  margin: 8rpx 0;
}

/* .fruit_price {
} */
.oriPrice {
  color: #bbbbbb;
  text-decoration: line-through;
}
.curPrice {
  color: #f44;
}
.vipPrice {
  display: inline-block;
  height: 40rpx;
  line-height: 40rpx;
  padding: 0 20rpx;
  background-color: rgba(255, 153, 0, 0.2);
  color: rgba(255, 153, 0, 1);
  border-radius: 20rpx;
  font-size: 28rpx;
}
.qian {
  font-size: 24rpx;
}

同时打开miniprogram\app.json文件，修改一些小程序的配置，清理掉一些无用的代码，最终代码如下，其中导航栏的标题改成了“多吃水果”，并且删除了pages中的其他路径，小程序中的页面都需要在这里的pages字段中提前声明，可以在官方文档-全局配置中查看更多：

{
  "pages": [
    "pages/index/index"
  ],
  "window": {
    "backgroundColor": "#F6F6F6",
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#F6F6F6",
    "navigationBarTitleText": "多吃水果",
    "navigationBarTextStyle": "black"
  },
  "sitemapLocation": "sitemap.json",
  "style": "v2"
}

最终页面展示如下：

写在最后

以上就是小程序云开发之列表页面开发的全部内容