微信小程序的一个典型列表页面

wxml

<import src="../templete/templete" />
<view class="content">
<view class="img">
<image src="../images/haibao/haibao-1.jpg" style="width:100%;height:230px;"></image>
</view>

<view class="nav">
<view class="nav-item">
<view><image src="../images/icon_type.png" style="height:25px;width:23px"></image></view>
<view>菜谱分类</view>
</view>
<view class="nav-item">
<view><image src="../images/icon_type.png" style="height:25px;width:23px"></image></view>
<view>菜谱分类</view>
</view>
<view class="nav-item">
<view><image src="../images/icon_type.png" style="height:25px;width:23px"></image></view>
<view>菜谱分类</view>
</view>
<view class="nav-item">
<view><image src="../images/icon_type.png" style="height:25px;width:23px"></image></view>
<view>菜谱分类</view>
</view>
</view>
<view class="hr"></view>
<view class="head">
<view>香哈头条</view>
<view class="right">></view>
</view>
<view class="list">
<template is="cooks" data="{{array}}" />
</view>
</view>

其中使用了模板
在项目中引入模板

模板的内容定义

<template name="cooks">
<block wx:for="{{array}}">
  <view class="item" bindtap="seeDetail" id="0">
    <image src="{{item.img}}" style="width:75px;height:58px;"></image>

  <view class="desc">
    <view class="title">{{item.title}} </view>
    <view class="count">
      <view>{{item.type}}</view>
      <view class="liulan">{{item.liulan}}</view>
      <view class="pinglun"> {{item.pinglun}}</view>
    </view>
  </view>
</view>
  <view class="hr2"></view>
</block>
</template>

wxss

/**index.wxss**/
.nav{
  display: flex;
  flex-direction: row;
  text-align:center
}
.nav-item{
  width: 25%;
  margin-top:20px;
  font-size: 12px;
}
.hr{
  height: 5px;
  background-color: #cccccc;
  margin-top: 10px;
  opacity: 0.2
}
.head{
  display: flex;
  flex-direction: row;
  margin: 10px;
  font-size: 13px;
  color: #999999
}
.right{
  position: absolute;
  right: 10px;
  color: #cccccc
}
.hr2{
  height: 2px;
  background-color: #cccccc;
  opacity: 0.2;

}
.item{
  display: flex;
  flex-direction: row;
  margin-left: 10px;
  margin-bottom: 5px;
}
.desc{
  margin-left: 20px;
  line-height: 30px;
}
.title{
  font-weight: bold;
}
.count{
  display: flex;
  flex-direction: row;
  font-size: 12px;
  color: #999999
}
.liulan{
  position: absolute;
  right: 50px;
}
.pinglun{
  position: absolute;
  right: 10px;
}

js

//index.js
//获取应用实例
const app = getApp()

Page({
  data: {
    array:[]
  },
  onLoad:function(){
    var array = this.iniData();
    this.setData({array:array});
  },
  iniData:function(){
    var array=[];
    var object1 = new Object();
    object1.img="../images/haibao/haibao-1.jpg";
    object1.title="爱心早餐";
    object1.type="健康养生";
    object1.liulan="20926浏览";
    object1.pinglun = "7评论"

    array[0] =object1;
    array[1] =object1;
    array[2] = object1;
    array[3] = object1;
    return array;
  }
 
})

预览界面

参考资料:微信小程序开发图解案例教程