微信小程序:九宫格列表,if条件渲染及本地数据缓存(仿XX评分首页)

本文主要是小程序基础知识学习,这次主要是学习了网络请求数据,以及基础样式类似九宫格的滑动列表实现.
原文链接:原文链接

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的使用,有以下注意点:

1. 设置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}}"