【食疗坊小程序开发】学习笔记2---index页面

【食疗坊小程序】原视频指路：B站-我的大学老师

话不多说

先看看今天我们要实现的效果图

在上一篇笔记中，我们已经做完了banner中的轮播图，所以这篇我们努力装修剩下的“每日一测”和“商品列表”

那要是没有看过，且需要的宝汁可以点这里查看哦！

操作用到的images文件夹，压缩包在资源里自取哦~

--------------------------今日份装修安排--------------------------

内容简述

• “每日一测”
  • wxml代码分析
  • wxss代码分析
    • position 定位
    • flex 弹性布局
    • justify-content
• “商品信息展示”
  • wxml代码分析
  • wxss代码分析
  • js代码分析

-----------------------加油努力装修ing----------------------------

1.每日一测

我们先来分析效果图

从图中可以分析出：
----该图不会随着数据的变化而变化
所以我们可以直接将图片url固定在页面。
----在布局上，盒子分别向两边均分排列
所以我们需要使用flex，将两个盒子均匀排列对齐。

【wxml代码分析】

看看页面大致结构

根据草图 开始搭建

源码放送

<view class="everday">
  <view class="item">
    <image src="../../images/info_left.jpg"></image>
    <view>每日一测</view>
  </view>
  <view class="item">
    <image src="../../images/info_right.jpg"></image>
    <view>每日食谱</view>
  </view>
</view>

内容挺基础的 我已经没什么能叭叭的了
这一块我感觉wxss可以讲讲知识点
那么…

【wxss代码分析】

源码放送

.everday{
  display: flex;
  padding: 20rpx;
  justify-content: space-around;
}
.item{
  text-align: center;
  font-size: 30rpx;
  color: #999;
}
.item image{
  width: 306rpx;
  height: 185rpx;
}

position定位

• 相对定位 relative
  • 占据空间
  • 不脱离文档流
  • 相对于原位进行定位
• 绝对定位 absolute
  • 不占据空间
  • 脱离文档流
  • 相对于离自己最近的父元素进行定位

flex布局 （弹性布局）

• display：flex
  • 将纵向排列的子元素进行横向排列

这里补充一下display
display属性

• 外部
  • block 块级元素
    • 独占一行 宽高允许改变
    • 上下边距有效
    • 例：div p
  • inline 行内元素
    • 根据内容撑开的大小定 宽高不允许改变
    • 上下边距无效
    • 例：span a
• 内部
  • flex 弹性盒子
  • table 表格

justify-content

在学习这个之前，我们先了解页面主线和交叉线

是的，和我们数学中的x/y轴很像

在flex布局中，我们都跟随主线和交叉线进行排列布局
这里的justify-content 就是用来定义主线内容的

• 主线（justify-content）

  • flex-start 元素靠左对齐

  • center 元素居中对齐

  • space-between 元素向左右均匀分离

  • space-arround 元素左右两侧均等排列对齐

• 交叉线（align-content）

  • stretch 垂直拉伸
  • flex-start 元素保持原有尺寸
  • center 元素保持原有尺寸并居中对齐

当然主轴和交叉轴是可以变换的
flex-direction:colum

设置后，会调换主轴和交叉轴的位置
则justify-content属性会设置新主轴
align-content属性会设置新交叉轴
（如图）

2.商品信息展示

不难发现，想要实现该效果，我们必须做动态数据
（我的意思是 我们必须通过js进行数据调用）

• 先将页面基本框架搭好
• 再调整出合适的样式
• 请求数据，将数据传入页面

【wxml代码分析】

OK~
那我们先看框架草图

(OMG…我做完整篇才发现，这里的wrapper我看错了，不是一个大盒子，而是一个纯纯占位盒，不过，对本篇影响可谓是一点没有，所以还大家请自动闭掉它 蜗~)

从图中可以看出，我们首先需要对页面整体进行分析

• wrapper:大盒子-用来存放遍历出的每一个list
• list:存放商品信息数据盒子
• title:商品信息的标题
• content:商品信息内容盒子
• text:商品文本内容盒子
• desc:商品内容介绍信息
• num:商品浏览数盒子

源码放送

<view class="wrapper"></view>
<view class="list" wx:for="{{listArr}}" wx:key="index" bind:tap="tiao" data-id="{{item.id}}">
    <view class="title">{{item.title}}</view>
    <view class="content">
      <image src="{{item.image}}"></image>
      <view class="text">
        <view class="desc">{{item.desc}}</view>
         <view class="num"><text>{{item.readNum}}</text>阅读</view>
      </view>
     </view>
</view>
</view>

【wxss代码分析】

源码放送

/* 列表展示 */
.warpper{
  margin-left: 20rpx;
  margin-right: 20rpx;
}
.list{
  border-bottom: 1rpx solid #eee;
  padding:10rpx 20rpx;
}
.list .title{
  font-size: 30rpx;
  color: #1a1a1a;
  margin-bottom: 10rpx;
}
.list .content{
  display: flex;
}
.content image{
  width: 210rpx;
  height: 140rpx;
  padding-right: 20rpx;
}
.text{
  flex: 1;
  height: 140rpx;
  font-size: 26rpx;
  color: #777777;
  position: relative;
}
.desc{
  font-size: 26rpx;
  color: #777777;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}
.num{
  position: absolute;
  right: 0;
  bottom: 0;
  color: #4d4d4d;
  font-size: 26rpx;
}
.num text{
  color: red;
  padding-right: 4rpx;
}

flex: 1

• flex-grow:1 分配剩余空间比例
• flex-shrink:1 元素收缩规则
• flex-basis:0% 设置主轴方向的初始大小
  

【js代码分析】

OK~
样式我们也定完了，接下来到数据调用了
还记得我们在建wxml的时候定义的wx:for吗？

wx:for 就像一个循环函数
这里的意思是不断遍历listArr数组中的内容

整个页面原理如图

我们的js只需做两件事

• 1.请求有效数据 wx.request
• 2.返回给页面 setData({ })

源码放送

onLoad(options) {
	var that=this
	//1.请求有效数据 wx.request
	wx.request({
	      url: 'http://iwenwiki.com:3002/api/indexlist',
	      success:function(res){
	            if(res.data.status==200){
	            //2.返回给页面 setData({ })
	              that.setData({
	                listArr:res.data.data
	              })
	            }else{
	              console.log("无数据")
	            }
	      }
	    })
 }

通过setData({ }),直接将数据返回给页面了，所以不用再另外在外面定义一个listArr承接数据了。

OK~
那到这里
我们的index页面就这样愉快又迅速的建完啦！


那我们 明天见啦~~~~~~~
（吃饭去咯 看到这的大家都饭否啊）