微信小程序开发学习——页面布局、初始导航栏与跳转-编程知识

1.盒模型

要求实现效果如图所示：

所有WXML元素都可以看作盒子，在WXSS中"box model”这一术语是用来设计和布局时使用盒模型本质上是一个盒子，封装周围的WXML元素它包括: 边距，边框，填充和实际内容，模型结构如所示。

其中border，margin，padding的各个属性在实操中可以体会作用是什么。

完整代码如下：

wxml

<view class="box"><view class="title">盒模型</view><view class="boxModel01">.boxModel01{width:80%; height:120px; background-color:yellow; border:3px dashed #FF0000; padding:20px; margin:20px;}</view><view class="boxModel02">.boxModel02{ width:80%; height:120px; border:5px solid rgb(0,255,0); padding-top:20px; margin-bottom:20px;}</view><view class="boxModel03">.boxModel02{ width:80%; height:120px; border:5px dotted rgba(0,0,255,0.3); padding-left:20px; margin:0 20px;}</view>
</view>

wxss文件：

.boxModel01{width:80%;height:100px;background-color:yellow;border:3px dashed #FF0000;padding:20px;margin:20px;
}
.boxModel02{width:80%;height:100px;border:5px solid rgb(0,255,0);padding-top:20px;margin-bottom:20px;
}
.boxModel03{width:80%;height:120px;border:5px dotted rgba(0,0,255,0.3);padding-left:20px;margin:0 20px;
}

需要注意的是：在CSS中所有边界的长度，可以存在叠加，如果都为空，取最大的为最后的值。

2.flex弹性布局

需要实现如图布局：

Flex是Flexible Box的缩写，用来对盒状模型进行布局。

默认的flex-direction为main方向，即row水平方向。如果要垂直堆叠，需要改变为column

需要注意line-height和height的关联，如果二者相等，最终实现效果为在垂直方向上是居中对齐的。

<!--flexlayout.wxml-->
<view class="box"><view class='title'>页面布局示例</view><!--实现三栏水平均匀布局--><view style='display:flex;text-align:center;line-height:80rpx;'><view style='background-color:red;flex-grow:1;'>1</view><view style='background-color:green;flex-grow:1;'>2</view><view style='background-color:blue;flex-grow:1;'>3</view><!--flex-grow的权重值都是1，因此平分剩余空间--></view>------------------------------------------------<!--实现垂直布局--><view style='display:flex;text-align:center;height:300rpx;'><view style='background-color: red;width:250rpx;line-height:150rpx;'>1</view><view style='display:flex;flex-direction:column;flex-grow:1;line-height:150rpx;'><view style='background-color:green;flex-grow:1;'>2</view><view style='background-color:blue;flex-grow:1;'>3</view></view></view>------------------------------------------------<!--实现水平均匀布局--><view style='display: flex;text-align: center;flex-direction: column;line-height: 300rpx;'><view style='background-color:red;height:100rpx;line-height:100rpx;'>1</view><view style='display: flex;flex-direction: row;'><view style='background-color:green;flex-grow:1;'>2</view><view style='background-color:blue;flex-grow:1;'>3</view></view></view></view>

读者可尝试更改flex-grow的值看看效果，体会平分剩余空间的意思。

3.float布局

在float布局中，最重要的一个属性就是float属性

float属性：浮动的框可以向左或者向右移动，直到它的外边缘碰到包含框或者另外一个浮动框为止。

配套的属性有clear：

在我们用完了浮动后，要记得及时清除float，不然将会出现新的内容布置不合理。

注意点2：利用margin属性实现水平居中对齐：

margin属性中分为4个：上右下左，即顺时针方向，如果我们只输入两个，则第一个为上下，第二个为左右。

想要实现水平居中对齐，我们只需要给左右属性赋值auto即可。

代码如下：

<!--pages/float/float.wxml-->
<view class = 'bg1'><view class = 'box1'>box1</view><view class = 'box2'>box2</view><view class = 'box3'>box3</view><view class = 'box4'>box4</view>
</view><view class = 'bg2'><view class = 'header'>head</view><view class = 'leftbar'>left</view><view class = 'main'>main</view><view class = 'rightbar'>right</view><view class = 'footer'>foot</view>
</view>

wxss属性：

.bg1{height: 240px;width: 200px;margin:10px auto;
}.box1{width: 100px;height: 80px;background-color: red;margin:0 auto;
}.box2{width:100px;height:80px;background-color: yellow;float:left;
}
.box3{width:100px;height:80px;background-color: yellowgreen;float:right;
}
.box4{width:100px;height:80px;background-color: green;clear: both;margin:0 auto;
}.bg2{height:400px;text-align: center;margin: 10px auto;
}.header{line-height:100px;background-color: red;
}.leftbar{width:20%;line-height: 200px;background-color: yellow;float: left;
}.main{width:60%;line-height: 200px;background-color:green;float: left;
}.rightbar{width:20%;line-height: 200px;background-color:yellowgreen;float: right;
}.footer{line-height: 100px;background-color:red;clear: both;
}

4.输入模块

实现如图页面及功能。

利用input组件：

其中type属性有4种：

转换函数写在js中：

定义变量var C,F

然后获取传入参数的值采用赋值参数 = 传入参数.detail.value

然后利用this.setData({

进行变量的传递到前端。

传递的变量：赋值函数。

})

代码如下：

<!--tem.wxml-->
<view class="box"><view class="title">摄氏度转华氏度计算器</view><view><input placeholder='请输入摄氏度' type="digit" bindblur="calc"></input></view><view>华氏温度为：{{F}}</view>
</view>

/* pages/temperature/tem.wxss */
input{margin: 20px 0; /*设置input组件上下边距为20px，左右边距为0*/border-bottom: 1px solid blue;  /*设置input组件下边框粗细为1px、实心、蓝色*/
}

// pages/temperature/tem.js
Page({calc:function(e){var C,F;C = e.detail.value;this.setData({F: C * 9 / 5 + 32})}
})

5.导航跳转

如果想要点击跳转，那么我们需要利用navigator组件

需要注意的是：

如果你是小程序内跳转页面，请记得在app.json文件中加入文件路径，否则无法找到路径跳转！！

然后，为了显示好看，我们想加入图标，利用icon组件

<!--index.wxml-->
<navigator url="../index/flexlayout">
<view class = 'rowLayout'><icon type = 'success' class = "myLeft"></icon><view class = "myCenter">Flex</view><image src = "https://z3.ax1x.com/2021/03/21/64WWgH.png"></image>
</view>
</navigator><navigator url="../float/float"><view class = 'rowLayout'><icon type = 'success' class = "myLeft"></icon><view class = "myCenter">Float</view><image src = "https://z3.ax1x.com/2021/03/21/64WWgH.png"></image>
</view>
</navigator><navigator url="../temperature/tem"><view class = 'rowLayout'><icon type = 'success' class = "myLeft"></icon><view class = "myCenter">摄氏温度转华氏温度计算器</view><image src = "https://z3.ax1x.com/2021/03/21/64WWgH.png"></image>
</view>
</navigator>

input{margin:20px auto;border-bottom: 1px solid rgba(0,0,255,0.3);
}.rowLayout{display: flex;flex-direction: row;margin: 20px;
}
image{width: 24px;height: 24px;
}
.myLeft{margin-right: 10px;size: 20px;
}
.myCenter{flex-grow: 1;font-size: 16px;
}