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

素颜马尾好姑娘i 2021-11-11 03:48 406阅读 0赞

## wxml ##

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

模板的内容定义

<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;
      }
     
    })

预览界面

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly96aGFvemhlbi5ibG9nLmNzZG4ubmV0_size_16_color_FFFFFF_t_70]

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

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly96aGFvemhlbi5ibG9nLmNzZG4ubmV0_size_16_color_FFFFFF_t_70]: /images/20211109/0b89393eb1e742518849921bc453c087.png