微信小程序入门与实战之更多电影列表与电影搜索

news2024/11/20 19:33:03

wx.request的更多参数详解

在网络请求中我们可以采用下面这种形式:
在这里插入图片描述
如果我们可以不采用直接写在url的方式我们可以采用data的方式:
在这里插入图片描述

默认请求方式是GET我们可以通过设置method修改请求方式:
在这里插入图片描述

更多电影页面

我们要实现的效果:
在这里插入图片描述

首先创建好more-movie页面:

在这里插入图片描述

引入我们之前写好的movie自定义组件:
在这里插入图片描述

引入app:
在这里插入图片描述
定义data:
在这里插入图片描述

发起网络请求:
在这里插入图片描述
编写wxml代码,使用循环渲染:

<block wx:for="{{movies}}" wx:key="index">
  <movie movie="{{item}}"/>
</block>

实现效果:
在这里插入图片描述

flex-wrap的应用

使用样式:

.container{
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  padding: 30rpx 28rpx;
}
.movie{
  margin-right: 30rpx;
}

布局代码:

<view class='container'>
<block wx:for="{{movies}}" wx:key="index">
  <movie class='movie' movie="{{item}}"/>
</block>
</view>

也可以使用justify-content使页面平均分配:
在这里插入图片描述
在这里插入图片描述
实现效果:
在这里插入图片描述

加载不同类型的电影数据

通过自己定义data,并绑定点击事件:
在这里插入图片描述

跳转的时候带上参数:
在这里插入图片描述
跳转到页面后获取参数并请求数据:
在这里插入图片描述

使用LinUI快速构建搜索栏

首先引入LinUI的组件:

在这里插入图片描述
使用:

<l-search-bar l-class="ex-search-bar" placeholder="盗梦空间" ></l-search-bar>

编写样式:

.ex-search-bar{
  height:90rpx !important ;
}

实现效果:
在这里插入图片描述

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

应用层——HTTP协议

文章目录一、应用层1.1 应用层概念1.2 再谈协议二、网络版本的计算器网络计算器编码部分版本1&#xff1a;原生版本版本2&#xff1a;引入序列化和反序列化三、HTTP协议3.1 URL3.2 urlencode和urldecode3.3 HTTP协议格式3.3.1 请求报文3.3.2 响应报文3.4 HTTPDemo3.4.1改进3.4.…

这里不适合做技术

6点&#xff0c;の&#xff0c;下班了又是一个差不多一样的星期过去了&#xff0c;又是一个差不多的周末要到来了。我也差不多要离开这家公司了&#xff0c;入职4年多&#xff0c;那时候雄心壮志&#xff0c;决定干一番大事业&#xff0c;那个时候的自己&#xff0c;技术的炉火…

【图像融合】基于 DCT结合拉普拉斯金字塔的图像融合附matlab代码

✅作者简介&#xff1a;热爱科研的Matlab仿真开发者&#xff0c;修心和技术同步精进&#xff0c;matlab项目合作可私信。 &#x1f34e;个人主页&#xff1a;Matlab科研工作室 &#x1f34a;个人信条&#xff1a;格物致知。 更多Matlab仿真内容点击&#x1f447; 智能优化算法 …

论文理解与笔记【CVPR_2022.6】Region-Aware Face Swapping

论文理解与笔记【CVPR_2022】Region-Aware Face Swapping论文的缩写全拼&#xff1a;一、贡献二、介绍三、提出问题&#xff0c;也是论文解决的问题四、具体实现方案五、实验六、最终感想和总结论文地址&#xff1a;传送门或者传送门2 先看看效果&#xff1a; 论文的缩写全拼…

【单片机毕业设计】【mcuclub-jj-003】基于单片机的八层电梯的设计

最近设计了一个项目基于单片机的八层电梯系统&#xff0c;与大家分享一下&#xff1a; 一、基本介绍 项目名&#xff1a;八层电梯 项目编号&#xff1a;mcuclub-jj-003 单片机类型&#xff1a;STC89C52、STM32F103C8T6 功能简介&#xff1a; 1、通过3*4矩阵键盘实现电梯内部…

【Linux修炼】5.vim详解

每一个不曾起舞的日子&#xff0c;都是对生命的辜负。 Linux-yum&vim工具的使用本节目标1. Linux 软件包管理器 yum1.1 什么是软件包1.2 关于rzsz1.3 查看软件包1.4 如何安装软件1.5 如何卸载软件2. Linux编辑器-vim的使用&#xff08;重点&#xff09;2.1 什么是vim&#…

C++内存管理

1.C内存分布 学习C内存分布之前&#xff0c;先小试牛刀一下。 int globalVar 1; static int staticGlobalVar 1; void Test() {static int staticVar 1;int localVar 1;int num1[10] { 1, 2, 3, 4 };char char2[] "abcd";const char* pChar3 "abcd&quo…

webpack--》webpack底层深入讲解,从初识到精通,真正实现从0到1的过程

目录 webpack webpack的基本使用 安装 配置 修改自定义打包的入口与出口 优化js或图片的存放路径 配置webpack中符号的使用 webpack中相关插件安装 webpack-dev-server html-webpack-plugin clean-webpack-plugin webpack中的loader 打包处理css文件 打包处理les…

TPM分析笔记(十二)TPM PCR操作

目录一、PCR初始化&#xff08;Initializing PCR&#xff09;二、PCR的扩展&#xff08;Extend of a PCR&#xff09;2.1 其他PCR命令三、使用PCR Banks进行扩展&#xff08;Using Extend with PCR Banks&#xff09;四、事件记录&#xff08;Recording Events&#xff09;五、…

Java递归实现树形结构的两种方式

目录0、引言1、数据准备2、类型转化3、递归实现方法3.1、Java7及以下纯Java递归实现3.2、Java8及以上借助lamda表达式实现0、引言 在开发的过程中&#xff0c;很多业务场景需要一个树形结构的结果集进行前端展示&#xff0c;也可以理解为是一个无限父子结构&#xff0c;常见的…

【老师见打系列】:我只是写了一个自动回复讨论的脚本~

文章目录&#x1f31f;好久不见⛳️实现过程&#x1f334;老操作了兄弟们~&#x1f422;一步拿捏讨论&#x1f496;美图结束语专栏Python零基础入门篇&#x1f4a5;Python网络蜘蛛&#x1f4a5;Python数据分析Django基础入门宝典&#x1f4a5;小玩意儿&#x1f4a5;Web前端学习…

2022海德堡桂冠论坛(HLF)见闻录

今年9月下旬&#xff0c;我前往德国参加了第九届海德堡桂冠论坛。因疫情原因停摆两年后&#xff0c;海德堡桂冠论坛再次以线下形式举办&#xff0c;会场热闹非凡&#xff0c;作为计算机与数学界的社交盛宴当之无愧。 海德堡桂冠论坛&#xff08;Heidelberg Laureate Forum, HLF…

IGV-GSAman |「功能基因组时代」的高效率科研工具

写在前面 今天周末&#xff0c;转眼10月份只剩一周。万万没想到&#xff0c;一个月下去&#xff0c;我还是花了不少时间在完善「GSAman」。至于为什么本来「两个小时」就干完的事情&#xff0c;可以干成「22天」&#xff1f;到底还是我对前面的版本&#xff0c;不太满意。当然…

Attack Lab

Attack Lab 从CMU官网下载完所需实验包后&#xff0c;内有官方文档以及.tar压缩包&#xff0c;使用tar -xvf targetk.tar解压后&#xff0c;得到如下文件 The fifiles in targetk include: README.txt: A fifile describing the contents of the directory ctarget: An execut…

web自动化测试框架

本文介绍web自动化测试框架 ●Base&#xff1a;用来对Selenium API进行二次封装。 对Selenium API进行二次封装的目的是简化一些复杂的操作&#xff0c;但是千万不要为了封装而封装。 封装好后&#xff0c;其他页面类可以集成basepage&#xff0c;调用这些方法。 from sele…

【iOS】—— 仿写知乎日报第一周总结

目录知乎日报第一周完成情况遇到的问题&#xff1a;1.线程问题&#xff1a;2.SDWebImage加载图片3.实现无限刷新界面4.点击主界面cell进入后的界面知乎日报第一周完成情况 在这周开始了仿写知乎日报的任务&#xff0c;在第一周里&#xff0c;我完成了主界面&#xff0c;以及滚…

新人入手mac折腾过程中遇到的解决方案

本文将长期更新&#xff0c;以记录个人的使用。 终端美化 …还没有美化完&#xff0c;不过推荐看这篇文章Mac终端美化指南 homebrew homebrew是Mac OS X上的强大的包管理工具&#xff0c;可以高效管理各种软件包&#xff0c;官方说法是&#xff1a;The missing package mana…

ArcGIS:如何新建图层组并添加数据、切换数据视图和布局视图、修改符号系统?

目录 01 如何新建图层组&#xff1f; 02 如何在图层组中添加数据 03 如何切换数据视图和布局视图 03 如何修改符号系统&#xff1f; 3.1 如何快捷的修改一下符号样式&#xff1f; 3.2 如何修改符号系统的色带 3.2.1 色带视图的取消 3.3 修改符号系统中的标注显示 3.4 如…

大气湍流退化图像复原技术研究及DSP实现

目录 第一章 绪论 1 1.1 研究背景 1 1.2 国内外研究现状 1 1.3 本文的研究内容 5 1.4 本文的组织结构 5 第二章 大气湍流退化图像复原技术 7 2.1 图像退化及复原数学模型概述 7 2.1.1 图像退化的数学模型 7 2.1.2 图像复原的数学模型 8 2.2 大气湍流退化图像概述 9 2.2.1 大气…

插件内存分析

rtspsrc 1. 当pipleline为rtspsrc加其他插件时&#xff0c;如果让其他插件卡主会发生什么事情呢&#xff1f;以rtspsrcfakesink为例&#xff08;gst-launch-1.0.exe rtspsrc locationrtsp://xxx ! fakesink&#xff09;&#xff0c;修改fakesink的代码&#xff0c;让render中…