微信小程序 《新闻列表》 案例

news/2024/3/29 14:39:23/文章来源:https://blog.csdn.net/AAAXEC/article/details/129254536

目录:

  • 一,步骤。
    • 要求1:主页头部的轮播图
    • 要求2:中间内容上的信息案列排版。
    • 要求3:上拉加载内容。
    • 要求4:在信息加载完成后,给用户提示
  • 二,过程中要注意的几点。
    • 1.在微信小程序中,你用到wx:for 时。一定要绑定key 的值。
    • 2.我们在后端请求成功的时候。
    • 3.文档第一位

今天带着练习一个小程序的基础练习
《新闻列表》
内容如图:
请添加图片描述
如要求:
1.主页头部的轮播图
2.中间内容上的信息案列排版。
3.上拉加载内容。
4.在信息加载完成后,给用户提示

一,步骤。

要求1:主页头部的轮播图

我们看一下这个关于轮播图的相关文档。

文档地址:https://developers.weixin.qq.com/miniprogram/dev/component/swiper.html

注意文档内的属性内容
请添加图片描述
我们会看到这么一个案例。

当然我们这个要求没有这么细节,只需要上边的轮播图即可。
所以我们摘取并修改后,看下面代码

<swiper class="Lun" circular="true" indicator-dots="true" autoplay="true" interval="1000" duration="500"><block wx:for="{{Lun}}" wx:key="key"><swiper-item class="Lun_1" ><image src="{{item.imgUrl}}" catchtap="tiao" data-id="{{item.id}}"></image></swiper-item></block></swiper>

在小程序中,轮播图是 swiper 人家官方封装好的。

在swiper中写你的要求
block 中是你要遍历在轮播图的图片内容。
image 就是我们看到的视图位置,我们要将遍历的图片所放的位置。

简单说一下,我们这个轮播图所用到文档中的几个属性.
当然要熟悉小程序的话,还得是多看文档。

属性1: circular boolean false 否 是否采用衔接滑动 1.0.0
属性2: indicator-dots boolean false 否 是否显示面板指示点 1.0.0
属性3: autoplay boolean false 否 是否自动切换 1.0.0
属性4: interval number 5000 否 自动切换时间间隔 1.0.0
属性5: duration number 500 否 滑动动画时长 1.0.0

 data: {Lun:[],list:[],p:2,noMore:true},* 生命周期函数--监听页面加载*/onLoad(options) {wx.request({url: 'http://localhost:8989/getData',success:(data)=>{this.setData({Lun:data.data.data,list:data.data.data})}})},

上代码,是我们在小程序中请求数据,并给原数据提交。
此时,轮播图可以拿到数据,并做上渲染。

此接口只是案例。

要求2:中间内容上的信息案列排版。

渲染中间主体内容。

 <view class="Wu_w" wx:for="{{list}}" wx:key="key"><view class="Yang" catchtap="tiao" data-id="{{item.id}}"><view class="Yang_1"><image src="{{item.imgUrl}}"></image></view><view class="from"><view>事件:{{item.title}}</view><view>时间:{{item.newTime}}</view><view class="from_1">来自:{{item.from}}</view></view></view></view>

这步操作,就是我们正常的for遍历数据的方式。
微信独特的写法:wx:for=“”

要求3:上拉加载内容。

微信小程序在一定程度上,方便了许多。
它安排上了 上拉事件的响应的处理

onReachBottom() 页面上拉触底事件的处理函数

我们看代码:

onReachBottom() {let p=this.data.p++wx.request({url: 'http://localhost:8989/getData?p='+p,success:(res)=>{this.setData({list:this.data.list.concat(res.data.data)})}}) },

如图,我们在给data:{}中的p 定义初始值为2 的情况下。

为什么p 定义初始值为2?

我们下年在修改data中的数据时,使用this.setData,concat拼接数据。
它会将我们第一次请求出来的第一页内容,重复渲染两边。导致内容重复。

我们这里的方法很笨拙。若有简便方法,按简便方法来。

要求4:在信息加载完成后,给用户提示

  onReachBottom() {let p=this.data.p++wx.request({url: 'http://localhost:8989/getData?p='+p,success:(res)=>{this.setData({list:this.data.list.concat(res.data.data)})}})
新增
???if(this.data.list.length>=23){this.setData({noMore:true})}
???},

上面的新增,是我们做的一个简单的判断条件。若我们请求的数据,达到我们知道的总数据的情况下。我们将data中的noMore值改为true,

<view wx:if="{{noMore}}" style="text-align: center;">已经到底了...</view>

来达到此文字的显示效果。很简单也有点简陋。若有优化的空间,和想法。按各位大佬你们的思路和想法。

二,过程中要注意的几点。

我们总结一下,在编写中可能遇到的一些问题。

1.在微信小程序中,你用到wx:for 时。一定要绑定key 的值。

2.我们在后端请求成功的时候。

success:(res)=>{this.setData({list:this.data.list.concat(res.data.data)})}

要按照这个箭头函数的格式来书写,否则,函数内部的this定义就错了。会找不到。

3.文档第一位

内容就这么些,后续待小作者努力。。。。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.luyixian.cn/news_show_75643.aspx

如若内容造成侵权/违法违规/事实不符,请联系dt猫网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

HNU工训中心:电子开关与信号隔离

工训中心的牛马实验 1.实验目的&#xff1a; 1) 认识三极管和MOS管构成三端电子开关电路&#xff1b; 认识信号隔离的继电器和光电隔离方式。 2) 认识施密特触发器&#xff0c;掌握一种波形变换方法。 3) 实现一种脉冲波形发生器。 2.实验资源 HBE硬件基础电路实验箱、示波…

第八节 构造器和this关键字、封装

构造器的作用 定义在类中的&#xff0c;可以用于初始化一个类的对象&#xff0c;并返回对象的地址。 构造器的注意事项 1.任何类定义出来&#xff0c;默认就自带了无参数构造器&#xff0c;写不写都有。 2.一旦定义了有参数构造器&#xff0c;那么无参数构造器就没有了&#xf…

Adversarially-Aware Robust Object Detector

目标检测作为计算机视觉的基本任务&#xff0c;随着深度神经网络的出现而取得了显著的进展。然而&#xff0c;很少有研究在各种现实场景中探索目标检测器抵抗对抗攻击的对抗鲁棒性。探测器已经受到不可察觉的扰动的极大挑战&#xff0c;在干净图像上的性能急剧下降&#xff0c;…

记录pytorch安装 windows10 64位--(可选)安装paddleseg

安装完paddlepaddle之后&#xff0c;就可以安装paddleseg了。一、安装Git可以参考这个网址&#xff1a;https://blog.csdn.net/u010348546/article/details/124280236windows下安装git和gitbash安装教程二、安装paddleseghttps://github.com/PaddlePaddle/PaddleSeg记得翻墙啊这…

Ubuntu 交叉编译工具链安装

Ubuntu 交叉编译工具链安装 1 交叉编译器安装 ARM 裸机、Uboot 移植、Linux 移植这些都需要在 Ubuntu 下进行编译&#xff0c;编译就需要编译器&#xff0c;我们在第三章“Linux C 编程入门”里面已经讲解了如何在 Liux 进行 C 语言开发&#xff0c;里面使用 GCC 编译器进行代…

试题 算法训练 JOE的矩阵

问题描述 最近JOE又在线性代数的模拟考中拿满分了&#xff0c;这直接导致了JOE对于计算矩阵的热情急剧下降&#xff0c;所以JOE希望能有这样一个程序能帮助他计算矩阵的秩。 输入格式 第一行&#xff0c;两个数n,m&#xff0c;表示矩阵是n*m的。   下面共n行&#xff0c;每行…

Airbnb(三) Managing Diversity in Airbnb Search 搜索多样性

abstract 搜索系统中一个长期的问题是结果多样性。从产品角度讲&#xff0c;给用户多种多样的选择&#xff0c;有助于提升用户体验及业务指标。 多样性需求和模型的目标是相矛盾的&#xff0c;因为传统ctr模型是 point wise&#xff0c;只看单个相关性不管相邻之间item差异。 …

设计模式-笔记

文章目录七大原则单例模式桥模式 bridge观察者模式 observer责任链模式 Chain of Responsibility命令模式 Command迭代器模式 Iterator中介者模式 Mediator享元模式 Flyweight Pattern组合模式 composite装饰模式 Decorator外观模式 Facade简单工厂模式工厂方法模式工厂抽象模式…

数学小课堂:无穷小(平均速度和瞬间速度的关系)

文章目录 引言I 速度1.1 平均速度1.2 瞬间速度(某一时刻特定的速度)1.3 解释飞箭是静止的悖论II 导数2.1 概念2.2 导数的现实影响2.3 微积分的意义III 无穷小3.1 贝克莱挑战牛顿(无穷小悖论)3.2 无穷小的定义引言 柯西和魏尔斯特拉斯给出的无穷小的定义: 它不是零;它的绝对…

【GUI】Robo 3T(Studio 3T Free) for Mongodb安装与使用教程

下载 robo 3T现已更名为studio 3T free&#xff0c;官网即可下载 studio 3T free下载地址 安装 mac电脑下载的是dmg安装包&#xff0c;直接正常安装即可&#xff0c;windows电脑也是一样的&#xff0c;不需要配置环境&#xff0c;安装即可使用。&#xff08;前提是你已经安装…

什么是接口测试,我们如何实现接口测试?

1. 什么是接口测试 顾名思义&#xff0c;接口测试是对系统或组件之间的接口进行测试&#xff0c;主要是校验数据的交换&#xff0c;传递和控制管理过程&#xff0c;以及相互逻辑依赖关系。其中接口协议分为HTTP,WebService,Dubbo,Thrift,Socket等类型&#xff0c;测试类型又主…

SkyWalking简介和安装

APM系统 早期的监控系统功能比较单一&#xff0c;主要以监控CPU、内存、网络、I/O等基础设置为主&#xff08;cacti、nagios&#xff09; 后来随着中间件技术的不断发展&#xff0c;监控系统也开始监控缓存、数据库、MQ等各种基础组件的性能&#xff08;zabbix、prommethus&a…

【MinIO】文件断点续传和分块合并

【MinIO】文件断点续传和分块合并 文章目录【MinIO】文件断点续传和分块合并0. 准备工作1. 检查文件是否存在1.1 定义接口1.2 编写实现方法2. 检查分块文件是否存在2.1 定义接口2.2 编写实现方法3. 上传分块文件接口3.1 定义接口3.2 编写实现方法4. 合并分块文件接口4.1 定义接…

Python - Opencv应用实例之CT图像检测边缘和内部缺陷

Python - Opencv应用实例之CT图像检测边缘和内部缺陷 将传统图像处理处理算法应用于CT图像的边缘检测和缺陷检测,想要实现效果如下: 关于图像处理算法,主要涉及的有:灰度、阈值化、边缘或角点等特征提取、灰度相似度变换,主要偏向于一些2D的几何变换、涉及图像矩阵的一些统…

java中使用protobuf总结

基本没怎么接触过java编程&#xff0c;别的团队发过来一个用java编写的存储pb的文件&#xff0c;让拆分和解析&#xff0c;硬着头皮做一下&#xff0c;在此将步骤做个记录&#xff1a;下载安装protobufhttps://github.com/protocolbuffers/protobuf/tags?afterv3.6.1.2编译pro…

AI/CV大厂笔试LeetCode高频考题之基础核心知识点

AI/CV互联网大厂笔试LeetCode高频考题之基础核心知识点算法复习1、二叉树的遍历2、回溯算法3、二分搜索4、滑动窗口算法题5、经典动态规划6、动态规划答疑篇6.1、总结一下如何找到动态规划的状态转移关系7、编辑距离8、戳气球问题9、最长公共子序列 Longest Common Subsequence…

系统性能测试指标

性能测试的目的 1.评估系统的能力&#xff0c;测试中得到的负荷和响应时间数据可以被用于验证所计划的模型的能力&#xff0c;并帮助作出决策。 2.识别体系中的弱点&#xff1a;受控的负荷可以被增加到一个极端的水平&#xff0c;并突破它&#xff0c;从而修复体系的瓶颈或薄…

兴达易控Modbus转Profinet网关将丹佛斯变频器接入西门子1200PLC配置案例

案例简介&#xff1a; 本案例是兴达易控Modbus转Profinet网关连接丹佛斯变频器在西门子1200PLC程序控制实例&#xff0c;实现对变频器频率读写&#xff0c;及工作模式切换。 用到的设备为西门子1200PLC一台&#xff0c;丹佛斯变频器一台,兴达易控Modbus转Profinet网关一个 Modb…

OSPF -- (开放式最短路径优先协议)(公共协议)

OSPF -- &#xff08;开放式最短路径优先协议&#xff09;&#xff08;公共协议&#xff09; 1、属性&#xff1a;无类别链路状态IGP协议 无类别&#xff1a;更新携带精确掩码 链路状态&#xff1a;共享拓扑&#xff08;共享LSA&#xff09;本地计算路由IGP&#xff1a; 基于…

读取/etc/profile时发现错误:

读取/etc/profile时发现错误&#xff1a; /etc/profile:行XX&#xff1a;***************** /etc/profile:行XX&#xff1a;***************** 今天遇到这个错误&#xff0c;发现是首行被我编辑时删错了一个符号导致报错&#xff0c;导致每次开机都会报这个文件错误&#xff0…