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

201 阅读1分钟

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

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