【微信小程序创作之路】- 小程常用页面样式

news2024/11/26 0:50:37

【微信小程序创作之路】- 小程常用页面样式

第四章 微信小程序用页面样式

文章目录

  • 【微信小程序创作之路】- 小程常用页面样式
  • 前言
  • 一、总体样式--全局样式and局部样式
    • 1.全局样式
    • 2.局部样式
  • 二、Flex布局
    • 🍉🍉🍉rpx单位
  • 三、样式导入
  • 四、常用按钮样式
  • 五、图片插入
  • 六、图片轮播
  • 七、图片滚动
  • 八、条件渲染
    • 1.< wx:if>
    • 2.< wx:for>
  • 总结

前言

本章节主要讲解，小程序中常用样式，涉及到WXML和WXSS文件。例如：页面布局、整体样式、按钮、图片轮播、条件渲染（wx:if wx:for）等。

一、总体样式–全局样式and局部样式

1.全局样式

微信小程序顶层的app.wxss文件，代表小程序全局样式，作用于所有页面。采用CSS语法设置页面样式。
在这里插入图片描述
🧀我们通过代码来演示
🏀🏀🏀在最顶层的app.wxss文件中设置整个页面背景为紫色，<text>标签的字体为30磅，颜色字体为粉红色。

page {
  background-color: blueviolet;
}

text{
  font-size: 30pt;
  color: pink;
}

小程序第一页
在这里插入图片描述
🏀🏀🏀页面跳转

<view>
<navigator url="../home/home">跳转到第二页</navigator>
</view>

小程序第二页
在这里插入图片描述

2.局部样式

在页面文件内创建的.wxss文件为局部样式，只作用于当前页面。
🍉🍉🍉注：当局部样式和全局样式冲突时，根据就近原则，局部样式会覆盖全局样式。
在这里插入图片描述
🧀我们通过代码来演示
🏀🏀🏀把home文件中的home.wxss文件中设置整个页面背景为黑色，<text>标签的字体为30磅，颜色字体为白色。

home.wxss代码

/* pages/home/home.wxss */

page {
  background-color: black;
}

text{
  font-size: 30pt;
  color: white;
}

首页
在这里插入图片描述
第二页
在这里插入图片描述

二、Flex布局

各种页面元素的位置关系，称为布局（layout），小程序官方推荐使用 Flex 布局。如果有想了解Flex布局的同学，可以看阮一峰老师的《Flex 布局教程》。

🧀我们通过代码来演示
在home.wxss文件中加入以下代码

page {
  height: 100%;
  width: 750rpx;
  display: flex;
  justify-content: center;
  align-items: center;
}

在这里插入图片描述
下面解释一下上面这段 WXSS 代码，还是很简单的。

（1）height: 100%;：页面高度为整个屏幕高度。
（2）width: 750rpx;：页面宽度为整个屏幕宽度。
（3）display: flex;：页面（home）采用 Flex 布局。
（4）justify-content: center;：页面的一级子元素（这个示例是< view>）水平居中。
（5）align-items: center;：页面的一级子元素（这个示例是< view>）垂直居中。一个元素同时水平居中和垂直中央，就相当于处在页面的中央了。

🍉🍉🍉rpx单位

通过上面的代码示例我们发现设置高度和宽度的单位是rpx，那rpx和px之间的有什么关系呢？
①rpx简介
rpx（responsive pixel）是微信小程序用来解决屏幕适配的尺寸单位。

②rpx原理
rpx实现原理：因为不同的手机屏幕大小不同，为了使小程序适应所有设备，rpx把所有的设备屏幕宽度分为750份（任何设备的屏幕总宽度为750rpx）。在较小的设备上，1rpx所代表的宽度较小；较大的设备上，1rpx所代表的宽度较大。

小程序在不同设备上运行时，就会把 rpx 的样式单位换算成对应的像素单位（px）来渲染，从而实现屏幕适配。

③rpx和px之间的单位换算
小程序官方建议：开发小程序时，可以用IPhone6作为视觉稿的标准。
因为IPhone6，屏幕宽度为375px，换算成rpx:

设备rpx换算pxpx换算rpx
IPhone61rpx=0.5px1px=2rpx

三、样式导入

使用WXSS提供的@import语法，可以导入样式表。
🧀我们通过代码来演示
项目结构
在这里插入图片描述

index.wxss中加入使字体变绿的样式

/**index.wxss**/
.indexss{
  font-size: 30pt;
  color: green;
}

home.wxml引入样式

<view>
  <text class="indexss">第二页</text>
</view>

在这里插入图片描述
我们发现并没有改变
在home.wxss中引入index.wxss

@import"../index/index.wxss"

字体颜色发生了变化
在这里插入图片描述

四、常用按钮样式

小程序按钮使用<button> </button>闭合标签。
按钮基本属性，更多属性可以查看小程序官网 button

属性类型默认值必填说明
sizestringdefault否按钮的大小
typestringdefault否按钮的样式类型
plainbooleanfalse否按钮是否镂空，背景色透明
disabledbooleanfalse否是否禁用
loadingbooleanfalse否名称前是否带 loading 图标
form-typestring否用于 form 组件，点击分别会触发 form 组件的 submit/reset 事件
open-typestring否微信开放能力

🧀我们通过代码来演示
🏀🏀🏀type属性指定按钮的颜色类型

<!-- 通过type属性指定按钮颜色类型 -->
<button >普通按钮</button>
<button type="default" >默认按钮</button>
<button type="primary">主色调</button>
<button type=warn">警告</button>

在这里插入图片描述

🏀🏀🏀size属性指定按钮的大小 默认值只有两个

  • default 默认大小
  • mini 小尺寸
<!-- 通过size属性指定按钮的大小 -->
<button size="mini" >普通按钮</button>
<button type="default" size="default" >默认按钮</button>

在这里插入图片描述

🏀🏀🏀各种样式按钮
点击进入
在博主“热爱编程的小白白”文章中看到此网站，很优秀。感谢大佬的文章
选择自己喜欢的按钮
在这里插入图片描述

把CSS和HTML直接复制到wxss和wxml中
在这里插入图片描述
index.wxss

.btn {
  display: block;
  padding: 0.7em 1em;
  background: transparent;
  outline: none;
  border: 0;
  color: #d4af37;
  letter-spacing: 0.1em;
  font-family: monospace;
  font-size: 17px;
  font-weight: bold;
  z-index: 1;
 }
 
 .cube {
  position: relative;
  transition: all 0.5s;
 }
 
 .cube .bg-top {
  position: absolute;
  height: 10px;
  background: #d4af37;
  bottom: 100%;
  left: 5px;
  right: -5px;
  transform: skew(-45deg, 0);
  margin: 0;
  transition: all 0.4s;
 }
 
 .cube .bg-top .bg-inner {
  bottom: 0;
 }
 
 .cube .bg {
  position: absolute;
  left: 0;
  bottom: 0;
  top: 0;
  right: 0;
  background: #d4af37;
  transition: all 0.4s;
 }
 
 .cube .bg-right {
  position: absolute;
  background: #d4af37;
  top: -5px;
  z-index: 0;
  bottom: 5px;
  width: 10px;
  left: 100%;
  transform: skew(0, -45deg);
  transition: all 0.4s;
 }
 
 .cube .bg-right .bg-inner {
  left: 0;
 }
 
 .cube .bg-inner {
  background: #28282d;
  position: absolute;
  left: 2px;
  right: 2px;
  top: 2px;
  bottom: 2px;
 }
 
 .cube .text {
  position: relative;
  transition: all 0.4s;
 }
 
 .cube:hover .bg-inner {
  background: #d4af37;
  transition: all 0.4s;
 }
 
 .cube:hover .text {
  color: #28282d;
  transition: all 0.4s;
 }
 
 .cube:hover .bg-right,
 .cube:hover .bg,
 .cube:hover .bg-top {
  background: #28282d;
 }
 
 .cube:active {
  z-index: 9999;
  animation: bounce .1s linear;
 }
 
 @keyframes bounce {
  50% {
   transform: scale(0.9);
  }
 }

index.wxml

<button type="button" class="btn cube cube-hover">
  <div class="bg-top">
  <div class="bg-inner"></div>
  </div>
  <div class="bg-right">
  <div class="bg-inner"></div>
  </div>
  <div class="bg">
  <div class="bg-inner"></div>
  </div>
  <div class="text">Hover Me</div>
</button>

在这里插入图片描述

五、图片插入

图片插入使用<image> </image>标签实现。
<image> </image>标签有很多属性，点击查看

属性类型默认值必填说明
srcstring否图片资源地址
modestringscaleToFill否图片裁剪、缩放的模式
stylestring否图片样式

🧀我们通过代码来演示
🏀🏀🏀通过代码指定图片的高度和宽度占屏幕一半

<view>
   <image src='https://img1.baidu.com/it/u=1919509102,1927615551&fm=253&fmt=auto&app=120&f=JPEG?w=889&h=500' 
   style="height: 375rpx; width: 375rpx;"></image>
 </view>

在这里插入图片描述

六、图片轮播

图片轮播使用<swiper> </swiper>标签实现
此标签有很多属性

属性类型默认值必填说明
indicator-dotsbooleanfalse否是否显示面板指示点
indicator-colorcolorrgba(0, 0, 0, .3)否指示点颜色
indicator-active-colorcolor#000000否当前选中的指示点颜色
autoplaybooleanfalse否是否自动切换
intervalnumber5000否自动切换时间间隔
circularbooleanfalse否是否采用衔接滑动

🧀我们通过代码来演示
🏀🏀🏀通过代码实现图片轮播
这里我们直接引用《阮一峰老师的例子》

<view>
  <swiper
    indicator-dots="{{true}}"  
    autoplay="{{true}}"
    style="width: 750rpx;"
    indicator-active-color="#000000">
    <swiper-item>
      <image src="https://picsum.photos/200"></image>
    </swiper-item>
    <swiper-item>
      <image src="https://picsum.photos/250"></image>
    </swiper-item>
    <swiper-item>
      <image src="https://picsum.photos/300"></image>
    </swiper-item>
  </swiper>
</view>

上述代码中，**< swiper>组件就是轮播组件，里面放置了三个< swiper-item>组件，表示有三个轮播项目，每个项目就是一个< image>**组件。
在这里插入图片描述

七、图片滚动

图片滚动使用<scroll-view> </scroll-view>标签实现
🧀我们通过代码来演示
🏀🏀🏀通过代码实现纵向滚动
home.wxss

.container_2 view{
width: 100px;
height: 100px;
text-align: center;
line-height: 100px;
}
.container_2 view:nth-child(1){
background-color: red;
}
.container_2 view:nth-child(2){
  background-color: yellowgreen;
}
.container_2 view:nth-child(3){
  background-color: blue;
}
.container_2{
  display: flex;
  justify-content: space-around
}
 
.container_2{
  border: 1px solid yellowgreen;
  height: 130px;
  width: 100px;
}

home.wxml

<scroll-view class="container_2" scroll-y>
 <view>G</view>
<view>C</view>
<view>L</view>
</scroll-view>

在这里插入图片描述

八、条件渲染

条件渲染使用<wx:if> </wx:if> <wx:for> </wx:for>标签实现

1.< wx:if>

🧀我们通过代码来演示
🏀🏀🏀通过代码实现wx:if
index.wxml

<button wx:if="{{flag==0}}">普通按钮</button>
<button type="default" wx:elif="{{flag==1}}">默认按钮</button>
<button type="primary" wx:elif="{{flag==2}}">主色调</button>
<button type=warn" wx:else>警告</button>

index.js

Page({
  data: {
    now: (new Date()).toLocaleString(),
    flag: 1
  }
})

在这里插入图片描述
当我们把flag改为10

index.js

Page({
  data: {
    now: (new Date()).toLocaleString(),
    flag: 10
  }
})

在这里插入图片描述

🏀🏀🏀一次性通过<wx:if>控制多个组件，使用<block>

<block wx:if="{{flag==10}}">
  <button type="default">默认按钮</button>
  <button type="primary">主色调</button>
</block>

在这里插入图片描述

🍉🍉🍉注：wx:if 与 hidden不同

wx:if 使用动态创建和移除元素的方式控制
hidden使用切换样式方式控制

2.< wx:for>

该标签有很多属性

属性类型默认值必填说明
wx:for-indexstring否指定当前循环项的索引变量名
wx:for-itemstring否指定当前项变量名
wx:keystring否指定当前数组key

🏀🏀🏀通过代码实现< wx:for>
当我们引入js中数组时，可以通过index得到索引，通过item得到内容
index.js

Page({
  data: {
    now: (new Date()).toLocaleString(),
    flag: 10,
    arry:['java','pyhton','C++']
  }
})

index.wxml

<view wx:for="{{arry}}">
 数组索引为:{{index}}，内容为:{{item}}
</view>

在这里插入图片描述

🏀🏀🏀wx:for-index于wx:for-item使用
index.wxml

<view wx:for="{{arry}}" wx:for-index="id" wx:for-item="name"> 
 数组索引为:{{id}}，内容为:{{name}}
</view>

在这里插入图片描述

总结

本文通过很多代码示例来展示了小程序常用页面样式，这里非常感谢阮一峰老师和小白白大佬的博客，下一章我们讲解JSON文件配置小程序导航栏信息等。

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

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

相关文章

unpkg 与 npm 的基本介绍

unpkg 与 npm 的基本介绍

目录 定义 特点 原理 使用 npm安装流程 npm install npm update registry 区别 总结 定义 UNPKG是一个基于npm registry 的静态资源 CDN 服务&#xff0c;它可以快速获取和使用任何JavaScript包&#xff0c;无需安装任何软件或包。UNPKG可以从NPM仓库中获取任何包&am…
阅读更多...
不受环境干扰，这套声学全息方案实现了虚实交互

不受环境干扰，这套声学全息方案实现了虚实交互

一谈到全息显示&#xff0c;大家默认想到的就是光学全息方案&#xff0c;比如需要将光投射到某样东西上&#xff0c;比如视网膜&#xff0c;或是烟雾等介质上&#xff0c;才能成像。市面上一些常见的2D、3D全息方案&#xff0c;如全息风扇、Voxon全息系统等等&#xff0c;分别采…
阅读更多...
【STM32MP135】修复10.1寸屏显示异色问题，添加极性配置

【STM32MP135】修复10.1寸屏显示异色问题，添加极性配置

文件路径&#xff1a;u-boot-stm32mp-v2021.10-stm32mp1-r1/drivers/video/stm32/stm32_ltdc.c
阅读更多...
代码随想录算法训练营第17期第14天 | 理论基础 、递归遍历、迭代遍历、统一迭代

代码随想录算法训练营第17期第14天 | 理论基础 、递归遍历、迭代遍历、统一迭代

理论基础 种类 满二叉树、完全二叉树、二叉搜索树 满二叉树 如果一颗二叉树只有度为0的节点和度为2的节点&#xff0c;并且度为0的节点都在同一层 完全二叉树 在完全二叉树中&#xff0c;除了最底层节点可能没填满外&#xff0c;其余每层节点数都达到最大值&#xff0c;并…
阅读更多...
Android Java代码与JNI交互 引用类型转换(五)

Android Java代码与JNI交互 引用类型转换(五)

🔥 Android Studio 版本 🔥 🔥 Java中基础数据类型对应Native的数据类型 🔥 * Java中基础数据类型对应Native中的数据类型* ｜Java ｜Native ｜* ｜boolean ｜jboolean ｜* ｜byte ｜jbyte ｜* ｜short ｜jshort ｜* ｜int ｜jint ｜* ｜long…
阅读更多...
c++编写消消乐游戏

c++编写消消乐游戏

#include <SFML/Graphics.hpp> #include <SFML/Audio.hpp> #include <time.h> using namespace sf;#define GAME_ROWS_COUNT 8 #define GAME_COLS_COUNT 8int ts 57; // 每一个游戏小方块区域的大小bool isMoving false; bool isSwap false;// 相邻位置…
阅读更多...
springboot基于协同过滤算法商品推荐系统

springboot基于协同过滤算法商品推荐系统

开发语言&#xff1a;Java 框架&#xff1a;springboot JDK版本&#xff1a;JDK1.8 服务器&#xff1a;tomcat7 数据库&#xff1a;mysql 5.7 数据库工具&#xff1a;Navicat11 开发软件&#xff1a;eclipse/myeclipse/idea Maven包&#xff1a;Maven3.3.9 浏览器&…
阅读更多...
MybatisPlus中的save方法和insert方法区别

MybatisPlus中的save方法和insert方法区别

insert方法时直接插入一条数据&#xff0c;需要手动设置每个字段的值&#xff0c;例如&#xff1a; save方法首先会先判断该数据是否已经存在于数据库中&#xff0c;如果存在则更新数据&#xff0c;如果不存在则插入数据。使用save方法时&#xff0c;需要先设置主键值&#xff…
阅读更多...
41.RocketMQ之高频面试题大全

41.RocketMQ之高频面试题大全

消息重复消费 影响消息正常发送和消费的重要原因是网络的不确定性。 引起重复消费的原因 ACK 正常情况下在consumer真正消费完消息后应该发送ack&#xff0c;通知broker该消息已正常消费&#xff0c;从queue中剔除。当ack因为网络原因无法发送到broker&#xff0c;broker会认为…
阅读更多...
【单片机】msp430f5529 万年历，数字时钟，矩阵键盘修改时间，7针OLED显示，内部温度读取

【单片机】msp430f5529 万年历，数字时钟，矩阵键盘修改时间，7针OLED显示，内部温度读取

文章目录 功能实物图原理图一些程序片段矩阵键盘内部温度读取将年月日转为星期 功能 1 显示万年历&#xff0c;利用内部RTC模块 2 按键修改时间 3 显示芯片内部的温度数值 实物图 原理图 一些程序片段 矩阵键盘 https://qq742971636.blog.csdn.net/article/details/1316505…
阅读更多...
Vue3 + TS + Element-Plus 封装Tree组件 《亲测可用》

Vue3 + TS + Element-Plus 封装Tree组件 《亲测可用》

前期回顾 Vite Vue3 Ts 《企业级项目》二次封装 el-table、el-pagination、el-tooltip、el-dialog_vue后台管理系统需要二次封装的组件有哪些_彩色之外的博客-CSDN博客封装的功能有哪些&#xff1f;分页、表格排序、文字居中、溢出隐藏、操作列、开关、宽、最小宽、type类型…
阅读更多...
【Vue H5项目实战】从0到1的自助点餐系统—— 搭建脚手架(Vue3.2 + Vite + TS + Vant + Pinia + Node.js)

【Vue H5项目实战】从0到1的自助点餐系统—— 搭建脚手架(Vue3.2 + Vite + TS + Vant + Pinia + Node.js)

前言 H5 项目基于 Web 技术&#xff0c;可以在智能手机、平板电脑等移动设备上的浏览器中运行&#xff0c;无需下载和安装任何应用程序&#xff0c;且H5 项目的代码和资源可以集中在服务器端进行管理&#xff0c;只需更新服务器上的代码&#xff0c;即可让所有顾客访问到最新的…
阅读更多...
6.2Java EE——Spring的入门程序

6.2Java EE——Spring的入门程序

下面通过一个简单的入门程序演示Spring框架的使用&#xff0c;要求在控制台打印“张三&#xff0c;欢迎来到Spring”&#xff0c;实现步骤具体如下。 1、在IDEA中创建名称为chapter06的Maven项目&#xff0c;然后在pom.xml文件中加载需使用到的Spring四个基础包以及Spring依赖…
阅读更多...
【域渗透篇】渗透域环境下的windows7与2008-r2

【域渗透篇】渗透域环境下的windows7与2008-r2

目录 前言 域环境搭建测试 主机发现&&端口服务扫描&&漏洞脚本扫描 主机发现 全端口扫描 漏洞脚本扫描 永恒之蓝获取shell 主机信息收集 查看当前所在域及当前域用户 找到域控制器 收集域成员的IP msf后渗透阶段 Hashdump获取本地密码信息 破解ha…
阅读更多...
cesium学习文档

cesium学习文档

文章目录 1. 简易的cesium安装依赖修改 vite.config.js申请token创建简单的cesium 2. 修改查看器3. 修改摄像头4. 设置纽约城市模型5. 划分城市区域并且着色6. 地图标记显示7. 实现无人机巡城 1. 简易的cesium 安装依赖 yarn add -D cesium vite vite-plugin-cesium修改 vite…
阅读更多...
Openlayers实战：小物块运动轨迹动画

Openlayers实战：小物块运动轨迹动画

Openlayers地图在做轨迹的时候，除了标注各个位置点，连线，还经常会用到轨迹动画。 本实战就是这样示例，一个物块在轨迹上移动。其实质是用setInterval，每个一小段时间，重新计算定位一下小物块位置，整体串起来就是在移动。 效果图 源代码 /* * @Author: 大剑师兰特（xia…
阅读更多...
TextMining Day3 基于信息抽取的文本挖掘

TextMining Day3 基于信息抽取的文本挖掘

TextMining Day3 基于信息抽取的文本挖掘 1. 简介2. 背景:文本挖掘与信息提取3. 数据挖掘与信息提取相结合3.1 DISCOTEX系统3.2 评价 4. 使用挖掘规则改进IE4.1 算法4.2 评价 7. 结论 1. 简介 图1:基于IE&#xff08;信息抽取&#xff09;的文本挖掘框架概述 本文报告了计算机…
阅读更多...
stm32 使用CubeIDE 移植RTX5

stm32 使用CubeIDE 移植RTX5

STM32 使用st的官方开发环境 cubeide &#xff08;eclipse gcc&#xff09;移植 cmsis rtos2 RTX5 实时操作系统 这套环境的主要优势是免费。cubeide免费使用。RTX5 免商业版税&#xff08;已从原keil中剥离出来&#xff0c;现在完全开源免费&#xff09;。 一&#xff0c;环…
阅读更多...
微软开源社区上线，能够给微软Win95等“上古系统”打补丁

微软开源社区上线，能够给微软Win95等“上古系统”打补丁

日前一个基于社区的项目“Windows Update Restored”上线&#xff0c;据了解该项目的目的是为老系统重新提供对Windows Update的支持&#xff0c;可为 Windows 95 / NT 4.0/98(包括 SE)/ME/ 2000 SP2 等“上古时期”的微软操作系统提供升级补丁、修复 bug 或安全漏洞。 据悉&a…
阅读更多...
Python+Requests+Excel接口测试实战

Python+Requests+Excel接口测试实战

1、EXCEL文件接口保存方式&#xff0c;如图。 2、然后就是读取EXCEL文件中的数据方法&#xff0c;如下&#xff1a; 1 import xlrd2 3 4 class readExcel(object):5 def __init__(self, path):6 self.path path7 8 property9 def getSheet(self): 10 …
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023