本文主要是小程序基础知识学习,这次主要是学习了网络请求数据,以及基础样式类似九宫格的滑动列表实现.
原文链接:原文链接
1. 顶部导航栏搜索框的实现
顶部导航栏底色为绿色,有一个白色的搜索框以及搜索图片,搜索文字等.
<view class="header">
<view class="searchwrapper">
<image class="searchImage" src="/assets/imgs/ic_search.png" />
<text class="title">搜索</text>
</view>
</view>
.main .header {
display: flex;
align-items: center;
background-color: #66B961;
height: 80rpx;
width: 100%;
}
.header .searchwrapper{
background-color: #ffffff;
width: 93%;
height: 70%;
margin: auto;
border-radius: 10rpx;
display: flex;
justify-content: center;
align-items: center;
}
.searchwrapper .searchImage{
width: 30rpx;
height: 30rpx;
margin-right: 5rpx;
}
.searchwrapper .title{
font-size: 25rpx;
color: #B2B2B2;
}
2. 影片九宫格列表搭建
九宫格列表的搭建思路是先将单个的item搭建出来,单个item的主要元素有电影图片,以及电影名,评分图片,评分等内容:
实现单个的item后配合scroll-view使用scroll-view官方文档,关于scroll-viewde的使用,有以下注意点:
- 设置scroll-view滚动方向:
2.单个的item在布局的时候如果使用flex布局,则默认是块级元素(独占整行),需要设置item的布局为inline-flex(行内元素),并设置scroll-view允许换行:
.items{
/* display: flex;
overflow-x: auto; 不使用scroll-view的时候可以设置overflow-x为auto,也可以实现横向滑动 */
white-space: nowrap; /*设置scroll-view允许换行*/
height: 328rpx;
}
.items .item{
display: inline-flex; /*设置item为行内元素*/
padding-left: 30rpx;
flex-direction: column;
width: 180rpx;
}
wxml中的实现代码:
<scroll-view scroll-x="true" class="items">
<view class="item" wx:key="unique" wx:for="{
{ row.movies }}" wx:for-item="movie">
<image class="movieImage" src="{
{movie.images.large}}"/>
<view class="title">{
{
movie.title}}</view>
<view class="bottom">
<block wx:if="{
{movie.stars}}">
<view class=