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

news2024/11/20 13:30:56

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

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/1225515.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

【C++】【Opencv】cv::warpAffine()仿射变换函数详解，实现平移、缩放和旋转等功能

【C++】【Opencv】cv::warpAffine()仿射变换函数详解，实现平移、缩放和旋转等功能

仿射变换是一种二维变换&#xff0c;它可以将一个二维图形映射到另一个二维图形上&#xff0c;保持了图形的“形状”和“大小”不变&#xff0c;但可能会改变图形的方向和位置。仿射变换可以用一个线性变换矩阵来表示&#xff0c;该矩阵包含了六个参数&#xff0c;可以进行平移…
阅读更多...
C语言运算符优先级

C语言运算符优先级

优先级表 优先级规则说明 符号的优先级是在混合运算中才讨论表中优先级号越小&#xff0c;优先级越高同一优先级中&#xff0c;看结合性 优先级注意事项 逻辑 与 优先级高于逻辑 或而表示同级逗号优先级最低从整体看&#xff0c;可以简单总结为&#xff1a;算术运算符 > …
阅读更多...
【我和Python算法的初相遇】——体验递归的可视化篇

【我和Python算法的初相遇】——体验递归的可视化篇

&#x1f308;个人主页: Aileen_0v0 &#x1f525;系列专栏:PYTHON数据结构与算法学习系列专栏&#x1f4ab;"没有罗马,那就自己创造罗马~" 目录 递归的起源 什么是递归? 利用递归解决列表求和问题 递归三定律 递归应用-整数转换为任意进制数 递归可视化 画…
阅读更多...
python趣味编程-5分钟实现一个益智数独游戏（含源码、步骤讲解）

python趣味编程-5分钟实现一个益智数独游戏（含源码、步骤讲解）

Puzzle Game In Python是用 Python 编程语言Puzzle Game Code In Python编写的，有一个 4*4 的棋盘，有 15 个数字。然后将数字随机洗牌。 在本教程中，我将教您如何使用Python 创建记忆谜题游戏。 Python Puzzle Game游戏需要遵循以下步骤，首先是将图块数量移动到空的图块空…
阅读更多...
联想系列台式机Win11系统改Win7系统BIOS设置步骤

联想系列台式机Win11系统改Win7系统BIOS设置步骤

联想最新一代的台式机默认操作系统Win11&#xff0c;采用UEFIGPT启动模式&#xff0c;并且开启了安全启动功能&#xff0c;一般用户不能直接将Win11改成Win7&#xff0c;如果需要更改操作系统&#xff0c;是需要再BIOS菜单中关闭安全启动功能的&#xff0c;并且把启动模式设置成…
阅读更多...
9 HDFS架构剖析

9 HDFS架构剖析

问题 100台服务器&#xff0c;存储空间单个200GB 20T 5T文件如何存储&#xff1f; 128MB一块 128MB81GB 1288*10241TB 5T数据分成的128MB的块数 8192 * 5 客户端(client)代表用户通过与namenode和datanode交互来访问整个文件系统。 HDFS集群有两类节点&#xff1a; 一个na…
阅读更多...
信安.网络安全.UDP协议拥塞

信安.网络安全.UDP协议拥塞

第一部分 如何解决UDP丢包问题 一、UDP 报文格式 每个 UDP 报文分为 UDP 报头和 UDP 数据区两部分。报头由 4 个 16 位长&#xff08;2 字节&#xff09;字段组成&#xff0c;分别说明该报文的源端口、目的端口、报文长度和校验值。UDP 报文格式如图所示。 UDP 报文中每个…
阅读更多...
Unity中Shader立方体纹理Cubemap

Unity中Shader立方体纹理Cubemap

文章目录 前言一、什么是立方体纹理二、立方体纹理的生成方式1、使用6个面的生成方式2、使用单张图片的生成方式 三、Cubemap的采样方式四、在Unity中看一下Cubemap五、在Shader中&#xff0c;对立方体纹理进行采样使用1、我们在属性面板定义一个Cube类型的变量来存放立方体纹理…
阅读更多...
scss的高级用法——循环

scss的高级用法——循环

周末愉快呀&#xff01;一起来学一点简单但非常有用的css小知识。 最近在一个项目中看到以下css class写法&#xff1a; 了解过tailwind css或者unocss的都知道&#xff0c;从命名就可以看出有以下样式&#xff1a; font-size: 30pxmargin-left: 5px;margin-top: 10px; 于是…
阅读更多...
基于django水果蔬菜生鲜销售系统

基于django水果蔬菜生鲜销售系统

基于django水果蔬菜生鲜销售系统 摘要 基于Django的水果蔬菜生鲜销售系统是一种利用Django框架开发的电子商务平台&#xff0c;旨在提供高效、便捷的购物体验&#xff0c;同时支持水果蔬菜生鲜产品的在线销售。该系统整合了用户管理、产品管理、购物车、订单管理等核心功能&…
阅读更多...
云课五分钟-0ALinux文件系统及权限-查询命令如何使用

云课五分钟-0ALinux文件系统及权限-查询命令如何使用

前篇&#xff1a; 云课五分钟-09Linux基础命令实践-AI助力快速入门 视频&#xff1a; 云课五分钟-0ALinux文件系统及权限-查询命令如何使用 文本&#xff1a; Linux文件系统及权限示例教程&#xff08;Ubuntu&#xff09; 一、Linux文件系统基础 在Linux中&#xff0c;一切…
阅读更多...
windows nodejs 15.0.0下载安装

windows nodejs 15.0.0下载安装

下载 Node v15.0.0 (Current) | Node.js (nodejs.org) 下载地址 https://nodejs.org/dist/v15.0.0/node-v15.0.0-x64.msi 安装 双击运行 等待安装完成 确认安装成功 管理员运行cmd 查看版本号
阅读更多...
buildadmin+tp8表格操作（2）----表头上方按钮绑定事件处理，实现功能（全选/全不选）

buildadmin+tp8表格操作（2）----表头上方按钮绑定事件处理，实现功能（全选/全不选）

buildAdmin 表格上方的按钮添加完成之后&#xff0c; 就要对其实现功能了 有了上面的说明&#xff0c; 我就只要得到了 ref 中的表格对象&#xff0c; 就可以象el-table 一样来操作表格的属性和方法了 我们来实现上面的几个按钮的方法 全选/全不选 上面就是添加按钮功能的全过…
阅读更多...
Activiti,Apache camel,Netflex conductor对比，业务选型

Activiti,Apache camel,Netflex conductor对比，业务选型

Activiti,Apache camel,Netflex conductor对比&#xff0c;业务选型 1.activiti是审批流&#xff0c;主要应用于人->系统交互&#xff0c;典型应用场景&#xff1a;请假&#xff0c;离职等审批 详情可见【精选】activti实际使用_activiti通过事件监听器实现的优势_记录点滴…
阅读更多...
某60区块链安全之重入漏洞实战记录

某60区块链安全之重入漏洞实战记录

区块链安全 文章目录 区块链安全重入漏洞实战实验目的实验环境实验工具实验原理实验内容 重入漏洞实战 实验目的 学会使用python3的web3模块 学会以太坊重入漏洞分析及利用 实验环境 Ubuntu18.04操作机 实验工具 python3 实验原理 以太坊智能合约的特点之一是能够调用和…
阅读更多...
搭建内部知识库，解决企业内部琐碎信息问题

搭建内部知识库，解决企业内部琐碎信息问题

企业内部面临着大量琐碎的信息&#xff0c;这些信息可能分散在各个部门、员工之间&#xff0c;导致查找和共享变得困难。这种情况下&#xff0c;搭建一个内部知识库可以解决这一问题。通过内部知识库&#xff0c;企业可以将琐碎的信息整理、分类&#xff0c;并提供一个集中存储…
阅读更多...
在vmware中给linux添加硬盘

在vmware中给linux添加硬盘

1.必须在断开linux电源的情况下&#xff0c;才能添加硬盘成功。注&#xff1a;自己好几次在开机状态下添加硬盘都失败了&#xff0c;然后关机后&#xff0c;又试了下&#xff0c;居然成功了。
阅读更多...
【开源】基于Vue.js的开放实验室管理系统的设计和实现

【开源】基于Vue.js的开放实验室管理系统的设计和实现

项目编号&#xff1a; S 013 &#xff0c;文末获取源码。 \color{red}{项目编号&#xff1a;S013&#xff0c;文末获取源码。} 项目编号&#xff1a;S013&#xff0c;文末获取源码。 目录 一、摘要1.1 项目介绍1.2 项目录屏 二、研究内容2.1 实验室类型模块2.2 实验室模块2.3 实…
阅读更多...
机器视觉工程师吐槽的常见100个名场面

机器视觉工程师吐槽的常见100个名场面

学了后发现真没用&#xff0c;只能越干越多 德创跑的快&#xff0c;苏映视裁的快&#xff0c;上帝说&#xff0c;要有光&#xff0c;我是凌云光。 这群里面有多少从德创跑路的 去年我辛辛苦苦干一年顶两年了&#xff0c;单双休变单休或者无休&#xff0c;节假日全部对半砍。加班…
阅读更多...
「git 系列」git 如何存储代码的？

「git 系列」git 如何存储代码的？

这里写自定义目录标题 git 文件存储位置git 数据模型示例分析分析前准备命令哈希值 具体示例 不同版本的提交&#xff0c;git 做了什么工作&#xff1f;snapshot vs delta-based vs backup参考资料 git 文件存储位置 想要了解如何存储&#xff0c;首先需要知道存储位置。 当我…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023