小程序的列表页-商品或新闻展示--【浅入深出系列007】

已于 2023-07-27 07:08:55 修改
阅读量583 收藏 7
点赞数 8
分类专栏： 微信小程序 文章标签： 小程序 微信小程序 列表页
于 2023-07-25 09:07:10 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/dearmite/article/details/131908923
版权

微信目录集链接在此：

详细解析黑马微信小程序视频–【思维导图知识范围】难度★✰✰✰✰

不会导入/打开小程序的看这里：参考

让别人的小程序长成自己的样子-更换window上下颜色–【浅入深出系列001】

文章目录

本系列校训

用免费公开视频，卷飞培训班哈人！打死不报班，赚钱靠狠干！
只要自己有电脑，前后项目都能搞！N年苦学无人问，一朝成名天下知！

学习资源的选择

黑马程序员微信小程序开发前端教程_零基础玩转微信小程序（130集）
https://www.bilibili.com/video/BV1nE41117BQ/
目录如下：
…
P303-微信小程序的环境准备08:21 00:00 到 05：16 获取APPid, 后面下载开发工具。

啥是列表页

在这里插入图片描述

基本上只要你看到的电商，新闻等网站（90%以上），都会看到列表页，列表页如此重要，基本上成了网站的必备的模块，
小程序上呢？也是一样，毕竟小程序大概率也是一种商业的网站。当然也得要使用列表页了
在这里插入图片描述

必备的理论知识

Flex布局

相信刚开始学习开发小程序的初学者一定对界面的布局很困扰，不知道怎么布局，怎么摆放位置，其原因是不了解CSS样式的属性，所以，今天这篇文章，给大家普及一下相关的知识。
说起CSS布局，首先要讲解的就是FLex布局，这个可以说是一个万能钥匙，遇到什么复杂的布局，都可以通过Flex布局搞定，为了方便大家理解Flex属性，我将会一步步解析FLex的属性，并附上效果图。
1、基本概念
采用 Flex 布局的元素，称为 Flex 容器（flex container），简称"容器"。它的所有子元素自动成为容器成员，称为 Flex 项目（flex item），简称"项目"。
2、Flex容器属性
Flex总共有6个属性
flex-direction 设置排列方向
flex-wrap 内容满一行，是否换行
flex-flow flex-direction属性和flex-wrap属性的简写形式
justify-content 左右对齐方式
align-items 上下对齐方式
align-content 多行上下对齐方式
如果有网页基础的，你可以认为DIV不允许使用absolute,或者bootstrap框架，它们都有相通的理解。当然了，这也是为什么熟练的前端程序员很容易接受微信小程序的原因。

列表页常见标签

视图容器 /view

官方文档在此 https://developers.weixin.qq.com/miniprogram/dev/component/view.html
渲染框架支持情况：Skyline （使用最新 Nighly 工具调试）、WebView

功能描述
视图容器

属性说明
属性 类型 默认值 必填 说明 最低版本
hover-class string none 否 指定按下去的样式类。当 hover-class=“none” 时，没有点击态效果 1.0.0
hover-stop-propagation boolean false 否 指定是否阻止本节点的祖先节点出现点击态 1.5.0
hover-start-time number 50 否 按住后多久出现点击态，单位毫秒 1.0.0
hover-stay-time number 400 否 手指松开后点击态保留时间，单位毫秒 1.0.0
Bug & Tip
tip: 如果需要使用滚动视图，请使用 scroll-view

block wx:if

注意： 并不是一个组件，它仅仅是一个包装元素，不会在页面中做任何渲染，只接受控制属性。
条件渲染
wx:if
在框架中，使用 wx:if=“” 来判断是否需要渲染该代码块：

<view wx:if="{{condition}}"> True </view>

也可以用 wx:elif 和 wx:else 来添加一个 else 块：

<view wx:if="{{length > 5}}"> 1 </view>
<view wx:elif="{{length > 2}}"> 2 </view>
<view wx:else> 3 </view>

block wx:if
因为 wx:if 是一个控制属性，需要将它添加到一个标签上。如果要一次性判断多个组件标签，可以使用一个 标签将多个组件包装起来，并在上边使用 wx:if 控制属性。

view1 view2 注意： 并不是一个组件，它仅仅是一个包装元素，不会在页面中做任何渲染，只接受控制属性。

媒体组件 /image

官方文档在此https://developers.weixin.qq.com/miniprogram/dev/component/image.html

媒体组件 /image
image
基础库 1.0.0 开始支持，低版本需做兼容处理。

微信 Windows 版：支持

微信 Mac 版：支持

渲染框架支持情况：Skyline （使用最新 Nighly 工具调试）、WebView

功能描述
图片。支持 JPG、PNG、SVG、WEBP、GIF 等格式，2.3.0 起支持云文件ID。

使用 svg 格式且 mode=scaleToFill 时，WebView 会居中（除非 svg 里加上 preserveAspectRatio=“none”），Skyline 则会撑满
svg 格式不支持百分比单位
svg 格式不支持

基础内容 /text

官方文档在此 https://developers.weixin.qq.com/miniprogram/dev/component/text.html

功能描述
文本。

内联文本只能用 text 组件，不能用 view，如 foo bar
新增 span 组件用于内联文本和图片，如 bar
通用属性
…略

最常见的列表页代码

<!--list.wxml-->
<view class="list">
<template name="list" >
<navigator url="../detail/detail?id={{id}}" hover-class="navigator-hover">
<view class='list-big'>
<!--跳转新页面-->
 <view class='list-left'>
  <image class='list-img' src='{{img}}'></image>
 </view>
<view class='list-right'>
 <view class='right-text'>{{title}}</view>
 <view class='list-time'>{{time}}</view>
</view>
</view>
</navigator>


</template>
<view wx:for="{{mydata}}" wx:key="id" class='list'>
<template is="list" data="{{...item}}"/>
 </view>
 
</view>

这是一般的小程序最常见的列表页代码段。
上面的是一种高级的wx:for 的循环方式，当然就存在着初学者的暴力方式。回想当年大家学习谭浩强老师的C语言的时候，就有“天才” 这样输出的习题集。
就问你一句，你说运行出不出来吧？

printf("*");
printf("**");
printf("***");

同样的，列表页也是如此。其实，还真的有一些页面就是这样堆上去。没啥丢人。对于初学者来说，那更是快速完成任务的利器。只不过随着项目经验的提升，你后期会对自己的“屎山代码”感到无语，但是谁又不是从初学者开始呢？

屎山代码什么意思

“屎山代码是指陈年累月且复杂低效的代码，因为改动成本巨大，所有人避之不及。它通常是指一个公司里祖传的“古董级代码”，因为使用时间较长，数量已经很多了。在系统的使用过程中，需要维护系统和不断添加新的功能，故使用时间长的系统的代码往往会很多。曾有程序员表示：改老代码，就相当于去爬一座屎山，等爬到山顶，自己又留下一滩新的屎！不要轻易修改“屎山代码”，存在即合理，可以正常运行就不要去修改，否则可能会导致代码的运行出现问题。”
在这里插入图片描述
好，让我们欣赏一下带轮播图的，列表图的“史诗”级代码吧。

<view class="m-header">
  <view class="h25"></view>
  <view class='header h45'>
    <text class="m-title">宠物社区</text>
  </view>
</view>
<view class="swiper_top">
  <swiper class="swiper_body" autoplay="true" indicator-dots="true"
  indicator-color="#646464" indicator-active-color="#ffffff" interval="2000"
  circular="true">
    <swiper-item class="swiper_item_body">
      <navigator url="/pages/district/statisticalquery/statisticalquery" open-type="switchTab">
        <image class="swiper_image" src="https://s1.ax1x.com/2022/12/15/zTKNL9.png" mode="widthFix"></image>
      </navigator>
    </swiper-item>
    <swiper-item class="swiper_item_body">
      <image class="swiper_image" src="https://s1.ax1x.com/2022/12/15/zTKszD.png" mode="widthFix"></image>
    </swiper-item>
    <swiper-item class="swiper_item_body">
      <image class="swiper_image" src="https://s1.ax1x.com/2022/12/15/zTKReA.png" mode="widthFix"></image>
    </swiper-item>
    <swiper-item class="swiper_item_body">
      <image class="swiper_image" src="https://s1.ax1x.com/2022/12/15/zTKHyQ.jpg" mode="widthFix"></image>
    </swiper-item>
    <swiper-item class="swiper_item_body">
      <image class="swiper_image" src="https://s1.ax1x.com/2022/12/15/zTKxYV.jpg" mode="widthFix"></image>
    </swiper-item>
    <!-- <swiper-item class="swiper_item_body">
      <image class="swiper_image" src="/images/del.png" mode="widthFix"></image>
    </swiper-item> -->
  </swiper>
</view>
<view class="search">
  <form bindsubmit="formBindsubmit">
    <input name="keyword" placeholder="想要领养的宠物种类" />
    <button formType="submit" style="background:#ffc0cb;">搜索</button>
  </form>
</view>

<view class="page" >
  <navigator url="/pages/list/detail">
    <view class="item bdbt">
      <view class="lt">
        <image class="aa" src="https://s1.ax1x.com/2022/12/15/zTBSVP.jpg"></image>
      </view>
      <view class="rt">
      <view class="price"><text class="money">无偿送养</text> </view>
        <view class="xinghao">品种：中华田园猫</view>
        <view class="xinghao" hidden="{{item.version==''?true:false}}">性别：妹妹</view>
        <view class="price">来源:个人救助</view>
      </view>
    </view>
  </navigator>
</view>
<view class="hr"></view>
<view class="page" >
  <navigator url="/pages/list/detail">
    <view class="item bdbt">
      <view class="lt">
        <image class="aa" src="https://s1.ax1x.com/2022/12/15/zTBl24.jpg"></image>
      </view>
      <view class="rt">
      <view class="price"><text class="money">一杯奶茶</text> </view>
        <view class="xinghao">品种：金毛</view>
        <view class="xinghao" hidden="{{item.version==''?true:false}}">性别：弟弟</view>
        <view class="price">来源:家养</view>
      </view>
    </view>
  </navigator>
</view>
<view class="hr"></view>
<view class="page" >
  <navigator url="/pages/list/detail">
    <view class="item bdbt">
      <view class="lt">
        <image class="aa" src="https://s1.ax1x.com/2022/12/15/zTBMPU.jpg"></image>
      </view>
      <view class="rt">
      <view class="price"><text class="money">无偿送养</text> </view>
        <view class="xinghao">品种：中华田园犬</view>
        <view class="xinghao" hidden="{{item.version==''?true:false}}">性别：妹妹</view>
        <view class="price">来源:个人救助</view>
      </view>
    </view>
  </navigator>
</view>
<view class="hr"></view>
<view class="page" >
  <navigator url="/pages/list/detail">
    <view class="item bdbt">
      <view class="lt">
        <image class="aa" src="https://s1.ax1x.com/2022/12/15/zTBNa6.jpg"></image>
      </view>
      <view class="rt">
      <view class="price"><text class="money">封个红包</text> </view>
        <view class="xinghao">品种：拉布拉多</view>
        <view class="xinghao" hidden="{{item.version==''?true:false}}">性别：妹妹</view>
        <view class="price">来源:家养</view>
      </view>
    </view>
  </navigator>
</view>
<view class="hr"></view>
<view class="page" >
  <navigator url="/pages/list/detail">
    <view class="item bdbt">
      <view class="lt">
        <image class="aa" src="https://s1.ax1x.com/2022/12/15/zTB0Re.jpg"></image>
      </view>
      <view class="rt">
      <view class="price"><text class="money">无偿送养</text> </view>
        <view class="xinghao">品种：柯基</view>
        <view class="xinghao" hidden="{{item.version==''?true:false}}">性别：弟弟</view>
        <view class="price">来源:个人救助</view>
      </view>
    </view>
  </navigator>
</view>
<view class="hr"></view>
<view class="page" >
  <navigator url="/pages/list/detail">
    <view class="item bdbt">
      <view class="lt">
        <image class="aa" src="https://s1.ax1x.com/2022/12/15/zTBssA.jpg"></image>
      </view>
      <view class="rt">
      <view class="price"><text class="money">无偿送养</text> </view>
        <view class="xinghao">品种：美短</view>
        <view class="xinghao" hidden="{{item.version==''?true:false}}">性别：弟弟</view>
        <view class="price">来源:个人救助</view>
      </view>
    </view>
  </navigator>
</view>

<!-- <view bindtap="more" data-type="{{type}}" wx:if="{{datas!=''&&more==1}}" class="more">查看更多</view>
<view wx:if="{{datas!=''&&more==0}}" class="nomore">没有数据了</view> -->

可以秒杀90%初学者的技巧

在“调试器”的wxml 面板 用鼠标在代码上下移动。观察左侧的“模拟器”
在这里插入图片描述
这在你修改css 里的class 还是复杂标签 的时候，特别有用。

详细解析页面代码

怎么样克服自己对代码的恐惧？ 当然是你改动一点，就可以看到程序的变化了。

第一步，就是找到文件

事实上，这一步很关键，别看我码龄20多年，事实上，不管在哪个项目，都会时不时发生改了关天，发现程序完全不起作用，然后花了N小时，最后发现，改错文件了，当项目一大，代码一多，文件那也是成倍的增长，而且很多的文件有的时候叫的名字是一个，里面的代码也差不多，这个时候那就更容易看错文件了。
友情提示 可以使用调试器的连动功能，真的很好用。

第二步，先改动一下最显眼的代码

在这里插入图片描述

找到这个列表页的代码。
在这里插入图片描述

然后，找到相应的js文件。
一定要仔仔细细的看好那个mydata的结构，与前台的对应关系。（此处练10遍也不为过）


//获取应用实例
const app = getApp()
Page({
  data: {
    lastid:0,
    mydata:[{
      "id":'1',
      "img": '../../img/12.jpg',
      "title": '成功合作10年后，远卓再次成功签约世界500强中国航油集团',
      "time": '2016-09-23 17-06'
    }, {
      "id": '1',
      "img": '../../img/11.jpg',
      "title": '广州科技项目申报流程及验收结题',
      "time": '2016-09-23 17-06'
      }, {
        "id": '3',
        "img": '../../img/10.jpg',
        "title": '精益管理：7大浪费的产生原因和消除方法',
        "time": '2016-09-23 17-06'
    }, {
      "id": '4',
      "img": '../../img/9.jpg',
      "title": '中小企业应对非对称竞争的四大战略',
      "time": '2016-09-23 17-06'
      }, {
        "id": '5',
        "img": '../../img/8.jpg',
        "title": '【政策快讯】高企最高奖励100万！',
        "time": '2016-09-23 17-06'
    }, {
      "id": '6',
      "img": '../../img/7.jpg',
      "title": '2018年广东省各地高新技术企业申报时间汇总',
      "time": '2016-09-23 17-06'
      }, {
        "id": '7',
        "img": '../../img/13.jpg',
        "title": '什么样的社产品才是最好的？',
        "time": '2016-09-23 17-06'
    }, {
      "id": '8',
      "img": '../../img/14.jpg',
      "title": '2018年广东省各地高新技术企业申报时间汇总',
      "time": '2016-09-23 17-06'
      }, {
        "id": '9',
        "img": '../../img/2.png',
        "title": '中小企业应对非对称竞争的四大战略',
        "time": '2016-09-23 17-06'
    }, {
      "id": '10',
      "img": '../../img/1.png',
      "title": '什么样的社产品才是最好的？',
      "time": '2016-09-23 17-06'
    }],
  
  },
 

})

提示：如果一不小心出错
这个时候，Ctrl+Z (这个快捷键有必要记住) 基本上80%以上的编辑器程序都是用这个快捷方式恢复到前一步正确的代码。
如果在恢复这个错之前，把这个错误的截图，并保存，查看几下那就更好了。面对页面出错不是大惊小怪，而是看看是啥错误信息，那你基本具备了向高手迈进的姿势了。

配套资源

小程序的列表页-商品或新闻展示–【浅入深出系列006】配套资源
https://download.csdn.net/download/dearmite/88092903

作业：

1 下载配套资源阅读里面的JS结构，将列表改成“史诗”级代码。（难度★★★★✫）
2 查阅资料，将数据放到*.JSON文件里。（难度★★★★★✫）超五星

一切皆是映射：深度迁移学习：AI在不同域间的知识转移
AI天才研究院
10-07 1005
一切皆是映射：深度迁移学习：AI在不同域间的知识转移 作者：禅与计算机程序设计艺术 / Zen and the Art of Computer Programming 关键词：深度迁移学习，知识迁移，跨域学习，预训练模型，迁移学习，模型蒸馏，元学习，多任务学习
微信小程序 列表展示+详情
lh25946的博客
07-09 3178
首先你需要去微信开发者官网注册一个小程序，每个邮箱只能申请一个，申请过程很简单我就不细说了。 申请成功之后你拿到你的AppID，并且去下载小程序开发者工具。 列表展示代码 //商品列表 public function GoodsIndex(){ $data=GoodBlog::all(); if($data){ return ['code'=>200,'msg'=>'查询成功','result'=>$data];
微信小程序 新闻列表及详情页
m0_56598099的博客
04-10 6762
微信小程序 新闻列表及详情页 页面效果 新闻列表 <view class="conatiner"> <view class="news-item" wx:for="{{newsList}}" wx:for-index="index"> <view class="title" bindtap="todetail" data-options="{{item.id}}" >{{item.title}}</view> <vi
微信小程序列表页
zhouguizhi
11-14 4818
我们在做Android开发时,几乎每个app都有几个列表,在Android中列表一般是用listview，后来就使用recyclerview做了,不管是小程序还是Android或者ios，列表都是常见的一种数据展示方式,那么在小程序中怎么实现呢？先使用最笨的方法做, 如图： 针对上面的列表分析:它整体是一个垂直布局,第一部分 头像+日期是一个横向布局,下面是一张图片,再下面是一段文字描述,...
微信小程序--列表展示
weixin_51747920的博客
04-24 4134
例题采用了scroll-view和swiper组件。二维甚至多维数组应该如何遍历？
小程序——列表，详情页（模板）
热门推荐
Abenazhan的博客
05-16 2万+
page目录下建立：list（列表页）和detail（详情页）列表页：wxml页面：js页面：template：模板 name：模板名称，用于调用模板。block：循环wx:for   js里面定义的数据名称wx:for-item   默认是item，改item的名字is：模板调用，模板的名称，与模板的name名称相同。data：数据获取，默认是{{...item}}，如果改过item的名字就用改...
微信小程序信息展示列表
chixi9603的博客
12-30 3941
微信小程序信息展示列表 效果展示: 代码展示: wxml <view class="head"> <view class="head_item">分类</view> <view class="ring"></view>...
小程序实现经典的列表页
03-29
结果示例图 (此图片来源于网络，如有侵权，请联系删除! ) conversation.png  思路 善用flex 对row左右对开  东边上面对开  东北角左右分散对齐     class="row" wx:for="{{list}}" wx:key="" bindtap="rowTapped" data-id="{{item.id}}">   src="{{item.head_img_url}}" />   class="content"> class="top"> class="nickname">{{item.nickname}} class="datetime">{{it
小程序的列表页-商品或新闻展示-【浅入深出系列006】配套资源
07-25
微信本系列校训 ...详细解析黑马微信小程序视频--【思维导图知识范围】 https://blog.csdn.net/dearmite/article/details/131849296 总目录链接 黑马B站视频JAVA部分的知识与学习-【思维导图知识范围】 ...
微信小程序列表页设计与资源分享【浅入深出系列006】
资源摘要信息:"小程序的列表页-商品或新闻展示-【浅入深出系列006】配套资源" 在本节资源中，我们将围绕微信小程序的开发来展开，特别是列表页的设计与实现。微信小程序是一种不需要下载安装即可使用的应用，它实现...
微信小程序开发教程：轮播图到列表项详解
本系列名为“浅入深出系列011”，作者通过免费的公开视频和教程，引导读者从零基础开始，逐步学习微信小程序的开发。在这个过程中，读者将学会如何使用微信小程序的wx:for指令来实现列表项的开发。此外，作者还推荐...
微信小程序-好看的页面
08-25
微信小程序，页面样式如图https://mp.csdn.net/postedit/82048790
微信小程序商城列表页
05-25
微信小程序商城列表页前端实现，下拉刷新、排序、价格区间、商品类别、加购、搜索商品，基本满足需要。
小程序新闻详情页的小程序
03-16
有关新闻详情页的小程序。
小程序的学习资料收集
weixin_30414245的博客
02-23 3127
收集学习资料 1：官方工具：https://mp.weixin.qq.com/debug/w ... tml?t=1476434678461 2：简易教程：https://mp.weixin.qq.com/debug/wxadoc/dev/?t=1476434677599 3：设计指南：https://mp.weixin.qq.com/debug/wxadoc/desig...
微信小程序新闻列表详情页
2201_75294326的博客
04-16 1254
点击这里即可获取，包括答案解析。完善之： 总控开关控制音乐开关在 post-detail.js 文件 load 函数中添加代码：// 定义一个变量来接受 posts_data.js文件输出的对象// 注意：require 只能使用相对路径！Page({data: {},// 接收post.js传进来的postid值。// 拿到数据文件对应id的数据元素// 数据绑定// 替换发现前端的数据},// ···// }// 数据绑定})} else {
微信小程序显示列表数据
洛塔博士的博客
11-01 6704
概述 列表数据分为两篇，本篇为基本数据列表展示，下一篇为分页列表展示，即加载更多效果。 本篇最终展示样式 技术总结 等待效果wx.showLoading 取消等待效果wx.hideLoading() 列表展示，view的wx:for="{{list}}" 样式 偷懒直接使用了之前导入的样式 @import "../index/weui.wxss"; 流程 // pages/ship/ship.js Page({ /** * 页面的初始数据 */ data: { page:
微信小程序之横向列表展示
最新发布
qq_39772439的博客
06-20 1244
【代码】微信小程序之横向列表展示。
评论 7
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

项目花园范德彪

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值