网页美工设计网站,手机百度经验首页登录官网,深圳网红打卡旅游景点,视觉设计招聘常用样式和组件 1. 组件和样式介绍 在开 Web 网站的时候#xff1a;
页面的结构由 HTML 进行编写#xff0c;例如#xff1a;经常会用到 div、p、 span、img、a 等标签
页面的样式由 CSS 进行编写#xff0c;例如#xff1a;经常会采用 .class 、#id 、element 等选择器…常用样式和组件 1. 组件和样式介绍 在开 Web 网站的时候
页面的结构由 HTML 进行编写例如经常会用到 div、p、 span、img、a 等标签
页面的样式由 CSS 进行编写例如经常会采用 .class 、#id 、element 等选择器 但在小程序中不能使用 HTML 标签也就没有 DOM 和 BOM同时仅仅支持部分 CSS选择器
不过不用担心小程序中提供了同样的角色 其中 WXML 充当的就是类似 HTML 的角色只不过在 WXML 中没有div、p、 span、img、a 等标签在 WXML 中需要使用 小程序提供的 view、text 、image、navigator 等标签来构建页面结构小程序提供的这些标签我们称为 组件开发者可以通过组合这些基础组件进行快速开发。 WXSS 则充当的就是类似 CSS 的角色WXSS 具有 CSS 大部分的特性小程序在 WXSS 也做了一些扩充和修改新增了尺寸单位 rpx、提供了全局的样式和局部样式另外需要注意的是WXSS 仅支持部分 CSS 选择器。 小程序给提供的组件文档WXML
小程序样式官方文档WXSS 2. 样式-尺寸单位 随着智能手机的发展手机设备的宽度也逐渐多元化这就需要开发者在开发的时候需要适配不同屏幕宽度的手机。为了解决屏幕适配的问题微信小程序推出了 rpx 单位 小程序运行在手机移动端宿主环境是微信因为手机尺寸的不一致在写 CSS 样式时开发者需要考虑到手机设备的屏幕会有不同的宽度和设备像素比会采用一些技巧来算像素单位从而实现页面的适配。而 WXSS 在底层支持新的尺寸单位 rpx 开发者可以免去换算的烦恼只要交给小程序底层来换算即可。 rpx: 小程序新增的拓展单位可以根据屏幕宽度进行自适应小程序规定任何型号手机屏幕宽都为 750 rpx。 注意事项 小程序规定任何型号手机屏幕宽都为 750 rpx 开发建议 开发微信小程序时设计师可以用 iPhone6 作为视觉稿的标准。 iPhone6 的设计稿一般是 750px小程序的宽是 750rpx 在我们开发小程序页面时量取多少 px 直接写多少 rpx开发起来更方便也能够适配屏幕的适配 原因 设计稿宽度是 750px而 iPhone6 的手机设备宽度是 375px 设计稿想完整展示到手机中就需要缩小一倍 在 iPhone6 下px 和 rpx 的换算关系是1rpx 0.5px 750rpx 375px刚好能够填充满整个屏幕的宽度 落地代码
➡️ pages/index/index.wxml
span stylebackground-color:#f8f8f8span stylecolor:#333333span stylecolor:#aa5500!-- 需求绘制一个盒子让盒子的宽度占据屏幕的一半 --/span
span stylecolor:#aa5500!-- view 是小程序提供的组件是容器组件类似于 div也是一个块级元素占据一行 --/span
span stylecolor:#aa5500!-- 如果想实现需求不能使用 pxpx 使固定单位不能实现自适应需要使用小程序提供的 rpx --/span
span stylecolor:#aa5500!-- 微信小程序规定不管是什么型号的手机屏幕的宽度都是 750rpx --/span
span stylecolor:#aa5500!-- rpx 单位能够实现自适应的 --/span
span stylecolor:#117700/spanspan stylecolor:#117700view/span span stylecolor:#0000ccclass/spanspan stylecolor:#aa1111box/spanspan stylecolor:#117700/span尚硅谷span stylecolor:#117700//spanspan stylecolor:#117700view/spanspan stylecolor:#117700/span/span/span ➡️ pages/index/index.wxss
span stylebackground-color:#f8f8f8span stylecolor:#333333span stylecolor:#aa5500/* 通过演示使用 css 作为单位px 是不具有响应式的 *//span
span stylecolor:#aa5500/* image {/span
span stylecolor:#aa5500 width: 375px;/span
span stylecolor:#aa5500 height: 600px;/span
span stylecolor:#aa5500 background-color: lightgreen;/span
span stylecolor:#aa5500} *//span
span stylecolor:#555555.box/span {span stylecolor:#000000width/span: span stylecolor:#116644375rpx/span;span stylecolor:#000000height/span: span stylecolor:#116644600rpx/span;span stylecolor:#000000background-color/span: span stylecolor:#770088lightgreen/span;
}
/span/span 3. 样式-全局样式和局部样式 在进行网页开发时我们经常创建 global.css、base.css 或者 reset.css 作为全局样式文件进行重置样式或者样式统一然后在每个页面或组件中写当前页面或组件的局部样式小程序中也存在全局样式和局部样式这一节我们来学习一下小程序中的全局样式和局部样式 知识点 全局样式指在 app.wxss中定义的样式规则作用于每一个页面例如设置字号、背景色、宽高等全局样式
局部样式指在page.wxss中定义的样式规则只作用在对应的页面并会覆盖 app.wxss 中相同的选择器。 案例 在 app.wxss 中定义全局样式设置 text 组件的颜色以及字号大小这段样式将会作用于任意页面的 text 组件
span stylebackground-color:#f8f8f8span stylecolor:#333333span stylecolor:#aa5500/* app.wxss *//span
span stylecolor:#117700text/span {span stylecolor:#000000color/span: span stylecolor:#770088lightseagreen/span;span stylecolor:#000000font-size/span: span stylecolor:#11664450rpx/span;
}
/span/span 然后在 cate.wxss 中定义局部样式设置 text 组件的颜色以及字号大小会发现局部样式将全局样式进行了覆盖
span stylebackground-color:#f8f8f8span stylecolor:#333333span stylecolor:#aa5500/* pages/index/index.wxss *//span
span stylecolor:#117700text/span {span stylecolor:#000000color/span: span stylecolor:#770088red/span;span stylecolor:#000000font-size/span: span stylecolor:#11664430rpx/span;
}
/span/span 4. 划分页面结构-view 组件 使用小程序常用的组件实现项目首页的效果会使用以下组件 1.view 组件
2.text 组件
3.image 组件
4.navigator 组件
5.swiper 和 swiper-item 组件
6.scroll-view 组件
7.字体图标 分析页面结构使用 view 组件将页面拆分成 4 个区域 view 是小程序提供的组件是容器组件类似于 div也是一个块级元素占据一行 span stylebackground-color:#f8f8f8span stylecolor:#333333span stylecolor:#aa5500!-- 轮播图区域 --/span
span stylecolor:#117700/spanspan stylecolor:#117700view/span span stylecolor:#0000ccclass/spanspan stylecolor:#aa1111swiper/spanspan stylecolor:#117700/span1span stylecolor:#117700//spanspan stylecolor:#117700view/spanspan stylecolor:#117700/span
span stylecolor:#aa5500!-- 公司相关信息 --/span
span stylecolor:#117700/spanspan stylecolor:#117700view/span span stylecolor:#0000ccclass/spanspan stylecolor:#aa1111info/spanspan stylecolor:#117700/span2span stylecolor:#117700//spanspan stylecolor:#117700view/spanspan stylecolor:#117700/span
span stylecolor:#aa5500!-- 商品导航区域 --/span
span stylecolor:#117700/spanspan stylecolor:#117700view/span span stylecolor:#0000ccclass/spanspan stylecolor:#aa1111goods-nav/spanspan stylecolor:#117700/span3span stylecolor:#117700//spanspan stylecolor:#117700view/spanspan stylecolor:#117700/span
span stylecolor:#aa5500!-- 商品推荐区域 --/span
span stylecolor:#117700/spanspan stylecolor:#117700view/span span stylecolor:#0000ccclass/spanspan stylecolor:#aa1111hot/spanspan stylecolor:#117700/span4span stylecolor:#117700//spanspan stylecolor:#117700view/spanspan stylecolor:#117700/span
/span/span 5. 首页轮播图区域-swiper 组件 在前面我们已经介绍了小程序的组件应该怎么使用又学习了小程序中的样式接下来带着大家使用小程序提供的组件完成小程序的基本结构通过这个案例我们能够学习到小程序常用的组件以及一些布局技巧。 知识点 在进行网页开发的时候实现轮播图的时候我们通常先使用 HTML 、CSS 实现轮播图的样式结构然后使用 JS 控制轮播图的效果或者直接使用插件实现轮播图的功能而在小程序中实现小程序功能则相对简单很多。 在小程序中提供了 swiper 和 swiper-item 组件实现轮播图 swiper滑块视图容器常用来实现轮播图其中只可放置 swiper-item 组件否则会导致未定义的行为 swiper-item仅可放置在swiper组件中宽高自动设置为100%代表 swiper 中的每一项 我们可以使用 swiper 组件提供的属性实现轮播图的订制常见属性如下
属性说明类型indicator-dots是否显示面板指示点boolean (默认 false)indicator-color指示点颜色color (默认rgba(0, 0, 0, .3))indicator-active-color当前选中的指示点颜色color (默认#000000)autoplay是否自动切换boolean (默认 false)interval自动切换时间间隔number (默认 5000)circular是否采用衔接滑动boolean (默认 false)其他属性... 落地代码 ➡️ pages/index/index.wxml
span stylebackground-color:#f8f8f8span stylecolor:#333333span stylecolor:#aa5500!-- 轮播图区域 --/span
span stylecolor:#117700/spanspan stylecolor:#117700view/span span stylecolor:#0000ccclass/spanspan stylecolor:#aa1111swiper/spanspan stylecolor:#117700/spanspan stylecolor:#aa5500!-- swiper 组件实现轮播图区域的绘制 --/spanspan stylecolor:#aa5500!-- swiper 组件滑块视图容器 --/spanspan stylecolor:#117700/spanspan stylecolor:#117700swiper/spanspan stylecolor:#0000cccircular/spanspan stylecolor:#0000ccautoplay/spanspan stylecolor:#0000ccindicator-dots/spanspan stylecolor:#0000ccinterval/spanspan stylecolor:#aa11112000/spanspan stylecolor:#0000ccindicator-color/spanspan stylecolor:#aa1111#efefef/spanspan stylecolor:#0000ccindicator-active-color/spanspan stylecolor:#aa1111#ccc/spanspan stylecolor:#117700/spanspan stylecolor:#aa5500!-- swiper 组件内部不能写其他组件或内容 --/spanspan stylecolor:#aa5500!-- 在 swiper 组件内部只能写 swiper-item 组件 --/spanspan stylecolor:#aa5500!-- swiper-item 组件只能放到 swiper 组件中宽高自动设置为 100% --/spanspan stylecolor:#117700/spanspan stylecolor:#117700swiper-item/spanspan stylecolor:#117700/span第一张轮播图span stylecolor:#117700//spanspan stylecolor:#117700swiper-item/spanspan stylecolor:#117700/span
span stylecolor:#117700/spanspan stylecolor:#117700swiper-item/spanspan stylecolor:#117700/span第二张轮播图span stylecolor:#117700//spanspan stylecolor:#117700swiper-item/spanspan stylecolor:#117700/span
span stylecolor:#117700/spanspan stylecolor:#117700swiper-item/spanspan stylecolor:#117700/span第三张轮播图span stylecolor:#117700//spanspan stylecolor:#117700swiper-item/spanspan stylecolor:#117700/spanspan stylecolor:#117700//spanspan stylecolor:#117700swiper/spanspan stylecolor:#117700/span
span stylecolor:#117700//spanspan stylecolor:#117700view/spanspan stylecolor:#117700/span/span/span ➡️ pages/index/index.scss
span stylebackground-color:#f8f8f8span stylecolor:#333333span stylecolor:#117700page/span {span stylecolor:#000000height/span: span stylecolor:#116644100vh/span;span stylecolor:#000000background-color/span: span stylecolor:#221199#efefef/span span stylecolor:#770088!important/span;
}
span stylecolor:#117700swiper/span {span stylecolor:#000000swiper-item/span {
// 在 span stylecolor:#000000Sass/span 拓展语言中 符号表示父选择器的引用。它用于在嵌套的选择器中引用父选择器// 下面这段代码在编译以后生成的代码是 span stylecolor:#000000swiper-item/span:span stylecolor:#000000first-child/span:span stylecolor:#000000first-child/span {span stylecolor:#000000background-color/span: span stylecolor:#770088skyblue/span;}
:span stylecolor:#008855nth-child/span(span stylecolor:#1166442/span) {span stylecolor:#000000background-color/span: span stylecolor:#770088lightcoral/span;}
:span stylecolor:#008855last-child/span {span stylecolor:#000000background-color/span: span stylecolor:#770088lightseagreen/span;}}
}/span/span 6. 首页轮播图区域-image 组件 在这一节中我们开始来学习小程序中的image组件通过学习该组件掌握组件的学习方法和使用技巧
在小程序中没有 img 标签添加图片需要使用小程序提供的image组件image组件的语法如下 span stylebackground-color:#f8f8f8span stylecolor:#333333span stylecolor:#aa5500!-- src图片资源地址 --/span
span stylecolor:#aa5500!-- mode图片裁剪、缩放的模式 --/span
span stylecolor:#aa5500!-- lazy-load图片懒加载在即将进入一定范围上下三屏时才开始加载 --/span
span stylecolor:#117700/spanspan stylecolor:#117700image/span span stylecolor:#0000ccsrc/spanspan stylecolor:#aa1111/assets/tom.png/span span stylecolor:#0000ccmode/spanspan stylecolor:#aa1111heightFix/span span stylecolor:#0000cclazy-load/spanspan stylecolor:#aa1111”{{/span span stylecolor:#0000cctrue/span span stylecolor:#0000cc}}“/span span stylecolor:#117700//span/span/span 落地代码 ➡️ pages/index/index.wxml
span stylebackground-color:#f8f8f8span stylecolor:#333333span stylecolor:#aa5500!-- 轮播图区域 --/span
span stylecolor:#117700/spanspan stylecolor:#117700view/span span stylecolor:#0000ccclass/spanspan stylecolor:#aa1111swiper/spanspan stylecolor:#117700/spanspan stylecolor:#117700/spanspan stylecolor:#117700swiper/spanspan stylecolor:#0000cccircular/spanspan stylecolor:#0000ccautoplay/spanspan stylecolor:#0000ccindicator-dots/spanspan stylecolor:#0000ccinterval/spanspan stylecolor:#aa11112000/spanspan stylecolor:#0000ccindicator-color/spanspan stylecolor:#aa1111#efefef/spanspan stylecolor:#0000ccindicator-active-color/spanspan stylecolor:#aa1111#ccc/spanspan stylecolor:#117700/spanspan stylecolor:#117700/spanspan stylecolor:#117700swiper-item/spanspan stylecolor:#117700/spanspan stylecolor:#aa5500!-- 在小程序中图片不能使用 img 标签使用后不会生效 --/spanspan stylecolor:#aa5500!-- img src../../assets/banner/banner-1.png alt/ --/span
span stylecolor:#aa5500!-- 需要使用 images 组件 --/spanspan stylecolor:#aa5500!-- image 组件不给 src 属性设置默认值也占据宽和高 --/spanspan stylecolor:#aa5500!-- image 默认具有宽度宽是 320px 高度是 240px --/span
span stylecolor:#aa5500!-- mode 属性用来设置图片的裁切模式、纵横比例、显示的位置 --/spanspan stylecolor:#aa5500!-- show-menu-by-longpress 属性长按转发给朋友、收藏、保存图片 --/spanspan stylecolor:#117700/spanspan stylecolor:#117700image/span span stylecolor:#0000ccsrc/spanspan stylecolor:#aa1111../../assets/banner/banner-1.png/span span stylecolor:#0000ccmode/spanspan stylecolor:#aa1111aspectFill/span span stylecolor:#0000ccshow-menu-by-longpress/span span stylecolor:#117700//spanspan stylecolor:#117700//spanspan stylecolor:#117700swiper-item/spanspan stylecolor:#117700/span
span stylecolor:#117700/spanspan stylecolor:#117700swiper-item/spanspan stylecolor:#117700/spanspan stylecolor:#117700/spanspan stylecolor:#117700image/span span stylecolor:#0000ccsrc/spanspan stylecolor:#aa1111../../assets/banner/banner-2.png/span span stylecolor:#117700//spanspan stylecolor:#117700//spanspan stylecolor:#117700swiper-item/spanspan stylecolor:#117700/span
span stylecolor:#117700/spanspan stylecolor:#117700swiper-item/spanspan stylecolor:#117700/spanspan stylecolor:#117700/spanspan stylecolor:#117700image/span span stylecolor:#0000ccsrc/spanspan stylecolor:#aa1111../../assets/banner/banner-3.png/span span stylecolor:#117700//spanspan stylecolor:#117700//spanspan stylecolor:#117700swiper-item/spanspan stylecolor:#117700/spanspan stylecolor:#117700//spanspan stylecolor:#117700swiper/spanspan stylecolor:#117700/span
span stylecolor:#117700//spanspan stylecolor:#117700view/spanspan stylecolor:#117700/span
/span/span ➡️ pages/index/index.scss
span stylebackground-color:#f8f8f8span stylecolor:#333333span stylecolor:#aa5500/** index.wxss **//span
span stylecolor:#117700page/span {span stylecolor:#000000height/span: span stylecolor:#116644100vh/span;span stylecolor:#000000background-color/span: span stylecolor:#221199#efefef/span span stylecolor:#770088!important/span;
}
span stylecolor:#117700swiper/span {span stylecolor:#000000height/span: span stylecolor:#116644360rpx/span;
span stylecolor:#117700swiper-item/span {span stylecolor:#117700image/span {span stylecolor:#000000width/span: span stylecolor:#116644100%/span;span stylecolor:#000000height/span: span stylecolor:#116644100%/span;}
span stylecolor:#aa5500// 在 Sass 拓展语言中 符号表示父选择器的引用。它用于在嵌套的选择器中引用父选择器/spanspan stylecolor:#aa5500// 下面这段代码在编译以后生成的代码是 swiper-item:first-child/spanspan stylecolor:#aa5500// :first-child {/spanspan stylecolor:#aa5500// background-color: skyblue;/spanspan stylecolor:#aa5500// }/span
span stylecolor:#aa5500// :nth-child(2) {/spanspan stylecolor:#aa5500// background-color: lightcoral;/spanspan stylecolor:#aa5500// }/span
span stylecolor:#aa5500// :last-child {/spanspan stylecolor:#aa5500// background-color: lightseagreen;/spanspan stylecolor:#aa5500// }/span}
}/span/span 7. 公司宣传语区域-text 组件 落地代码 ➡️ pages/index/index.wxml
span stylebackground-color:#f8f8f8span stylecolor:#333333span stylecolor:#aa5500!-- 公司相关信息 --/span
span stylecolor:#117700/spanspan stylecolor:#117700view/span span stylecolor:#0000ccclass/spanspan stylecolor:#aa1111info/spanspan stylecolor:#117700/spanspan stylecolor:#aa5500!-- text 是文本组件类似于 span是行内元素 --/span
span stylecolor:#aa5500!-- user-select文本是否可选 --/spanspan stylecolor:#aa5500!-- space是否连续展示空格 --/spanspan stylecolor:#aa5500!-- text user-select spaceensp同城 配送/text --/span
span stylecolor:#117700/spanspan stylecolor:#117700text/spanspan stylecolor:#117700/span同城配送span stylecolor:#117700//spanspan stylecolor:#117700text/spanspan stylecolor:#117700/spanspan stylecolor:#117700/spanspan stylecolor:#117700text/spanspan stylecolor:#117700/span行业龙头span stylecolor:#117700//spanspan stylecolor:#117700text/spanspan stylecolor:#117700/spanspan stylecolor:#117700/spanspan stylecolor:#117700text/spanspan stylecolor:#117700/span半小时送达span stylecolor:#117700//spanspan stylecolor:#117700text/spanspan stylecolor:#117700/spanspan stylecolor:#117700/spanspan stylecolor:#117700text/spanspan stylecolor:#117700/span100% 好评span stylecolor:#117700//spanspan stylecolor:#117700text/spanspan stylecolor:#117700/span
span stylecolor:#117700//spanspan stylecolor:#117700view/spanspan stylecolor:#117700/span/span/span ➡️ pages/index/index.scss
span stylebackground-color:#f8f8f8span stylecolor:#333333span stylecolor:#555555.info/span {span stylecolor:#000000display/span: span stylecolor:#221199flex/span;span stylecolor:#000000justify-content/span: span stylecolor:#221199space-between/span;span stylecolor:#000000align-items/span: span stylecolor:#221199center/span;span stylecolor:#000000margin/span: span stylecolor:#11664416rpx/span span stylecolor:#1166440rpx/span;span stylecolor:#000000padding/span: span stylecolor:#11664420rpx/span;span stylecolor:#000000font-size/span: span stylecolor:#11664424rpx/span;span stylecolor:#000000background-color/span: span stylecolor:#221199#fff/span;span stylecolor:#000000border-radius/span: span stylecolor:#11664410rpx/span;
}/span/span 8. 商品导航的区域-组件结合使用 到目前为止我们已经学习了 view 、text、image 以及 swiper 和 swiper-item组件的使用
接下来我们继续来使用小程序提供的组件实现首页的功能这节我们需要实现的是商品导航区域的结构 知识点 在网页开发中实现该布局非常简单使用 div 嵌套 或者 ul 包裹住 lili 在包裹住 img 就能够实现该效果
但在小程序中没有 HTML 中的 div、ul、li 标签所以绘制导航区域需要使用小程序提供的的组件我们先来学习小程序的两个组件 view视图容器组件相当于 HTML 中的 div是一个块级元素独占一行 text文本组件相当于 span是一个行内元素 落地代码 ➡️ pages/index/index.wxml
span stylebackground-color:#f8f8f8span stylecolor:#333333span stylecolor:#aa5500!-- view视图容器作用类似于 div是一个块级元素独占一行 --/span
span stylecolor:#117700/spanspan stylecolor:#117700view/span span stylecolor:#0000ccclass/spanspan stylecolor:#aa1111navs/spanspan stylecolor:#117700/spanspan stylecolor:#117700/spanspan stylecolor:#117700view/spanspan stylecolor:#117700/spanspan stylecolor:#aa5500!-- text文本组件类似于 span是一个行内元素 --/spanspan stylecolor:#117700/spanspan stylecolor:#117700image/span span stylecolor:#0000ccsrc/spanspan stylecolor:#aa1111/assets/cate-1.png/span span stylecolor:#0000ccalt/spanspan stylecolor:#aa1111/spanspan stylecolor:#117700//spanspan stylecolor:#117700/spanspan stylecolor:#117700text/spanspan stylecolor:#117700/span爱礼精选span stylecolor:#117700//spanspan stylecolor:#117700text/spanspan stylecolor:#117700/spanspan stylecolor:#117700//spanspan stylecolor:#117700view/spanspan stylecolor:#117700/spanspan stylecolor:#117700/spanspan stylecolor:#117700view/spanspan stylecolor:#117700/spanspan stylecolor:#117700/spanspan stylecolor:#117700image/span span stylecolor:#0000ccsrc/spanspan stylecolor:#aa1111/assets/cate-2.png/span span stylecolor:#0000ccalt/spanspan stylecolor:#aa1111/spanspan stylecolor:#117700//spanspan stylecolor:#117700/spanspan stylecolor:#117700text/spanspan stylecolor:#117700/span鲜花玫瑰span stylecolor:#117700//spanspan stylecolor:#117700text/spanspan stylecolor:#117700/spanspan stylecolor:#117700//spanspan stylecolor:#117700view/spanspan stylecolor:#117700/spanspan stylecolor:#117700/spanspan stylecolor:#117700view/spanspan stylecolor:#117700/spanspan stylecolor:#117700/spanspan stylecolor:#117700image/span span stylecolor:#0000ccsrc/spanspan stylecolor:#aa1111/assets/cate-3.png/span span stylecolor:#0000ccalt/spanspan stylecolor:#aa1111/spanspan stylecolor:#117700//spanspan stylecolor:#117700/spanspan stylecolor:#117700text/spanspan stylecolor:#117700/span永生玫瑰span stylecolor:#117700//spanspan stylecolor:#117700text/spanspan stylecolor:#117700/spanspan stylecolor:#117700//spanspan stylecolor:#117700view/spanspan stylecolor:#117700/spanspan stylecolor:#117700/spanspan stylecolor:#117700view/spanspan stylecolor:#117700/spanspan stylecolor:#117700/spanspan stylecolor:#117700image/span span stylecolor:#0000ccsrc/spanspan stylecolor:#aa1111/assets/cate-4.png/span span stylecolor:#0000ccalt/spanspan stylecolor:#aa1111/spanspan stylecolor:#117700//spanspan stylecolor:#117700/spanspan stylecolor:#117700text/spanspan stylecolor:#117700/span玫瑰珠宝span stylecolor:#117700//spanspan stylecolor:#117700text/spanspan stylecolor:#117700/spanspan stylecolor:#117700//spanspan stylecolor:#117700view/spanspan stylecolor:#117700/spanspan stylecolor:#117700/spanspan stylecolor:#117700view/spanspan stylecolor:#117700/spanspan stylecolor:#117700/spanspan stylecolor:#117700image/span span stylecolor:#0000ccsrc/spanspan stylecolor:#aa1111/assets/cate-5.png/span span stylecolor:#0000ccalt/spanspan stylecolor:#aa1111/spanspan stylecolor:#117700//spanspan stylecolor:#117700/spanspan stylecolor:#117700text/spanspan stylecolor:#117700/span香水护体span stylecolor:#117700//spanspan stylecolor:#117700text/spanspan stylecolor:#117700/spanspan stylecolor:#117700//spanspan stylecolor:#117700view/spanspan stylecolor:#117700/span
span stylecolor:#117700//spanspan stylecolor:#117700view/spanspan stylecolor:#117700/span/span/span ➡️ pages/index/index.wxss
span stylebackground-color:#f8f8f8span stylecolor:#333333// 商品导航区域
span stylecolor:#555555.good-nav/span {span stylecolor:#000000display/span: span stylecolor:#221199flex/span;span stylecolor:#000000justify-content/span: span stylecolor:#221199space-between/span;span stylecolor:#000000background-color/span: span stylecolor:#221199#fff/span;span stylecolor:#000000padding/span: span stylecolor:#11664420rpx/span span stylecolor:#11664416rpx/span;span stylecolor:#000000border-radius/span: span stylecolor:#11664410rpx/span;
span stylecolor:#000000view/span {span stylecolor:#000000display/span: span stylecolor:#221199flex/span;span stylecolor:#000000flex-direction/span: span stylecolor:#221199column/span;span stylecolor:#000000align-items/span: span stylecolor:#221199center/span;
span stylecolor:#000000image/span {span stylecolor:#000000width/span: span stylecolor:#11664480rpx/span;span stylecolor:#000000height/span: span stylecolor:#11664480rpx/span;}
span stylecolor:#000000text/span {span stylecolor:#000000font-size/span: span stylecolor:#11664424rpx/span;span stylecolor:#000000margin-top/span: span stylecolor:#11664412rpx/span;}}
}
/span/span 9. 跳转到商品列表页面-navigator 知识点 点击商品导航区域需要跳转到商品列表界面在网页开发中如果想实现页面的跳转需要使用 a 标签在小程序中如果想实现页面的跳转则需要使用 navigator 组件语法如下 span stylebackground-color:#f8f8f8span stylecolor:#333333span stylecolor:#aa5500!-- url当前小程序内的跳转链接 --/span
span stylecolor:#117700/spanspan stylecolor:#117700navigator/span span stylecolor:#0000ccurl/spanspan stylecolor:#aa1111/pages/list/list/spanspan stylecolor:#117700/span/span/span 在小程序中如果需要进行跳转需要使用 navigation 组件常用的属性有 2 个 url 当前小程序内的跳转链接 open-type 跳转方式 navigate保留当前页面跳转到应用内的某个页面。但是不能跳到 tabbar 页面 redirect 关闭当前页面跳转到应用内的某个页面。但不能跳转到 tabbar 页面 switchTab跳转到 tabBar 页面并关闭其他所有非 tabBar 页面 reLaunch关闭所有页面打开到应用内的某个页面 navigateBack关闭当前页面返回上一页面或多级页面 注意事项 路径后可以带参数。参数与路径之间使用 ? 分隔参数键与参数值用 相连不同参数用 分隔 例如/list?id10namehua在 onLoad(options) 生命周期函数 中获取传递的参数 属性 open-typeswitchTab 时不支持传参 落地代码 ➡️ pages/index/index.wxml 调整 view 为 navigator
span stylebackground-color:#f8f8f8span stylecolor:#333333span stylecolor:#aa5500!-- view视图容器作用类似于 div是一个块级元素独占一行 --/span
span stylecolor:#117700/spanspan stylecolor:#117700view/span span stylecolor:#0000ccclass/spanspan stylecolor:#aa1111navs/spanspan stylecolor:#117700/spanspan stylecolor:#117700/spanspan stylecolor:#117700navigator/span span stylecolor:#0000ccurl/spanspan stylecolor:#aa1111/pages/list/list/spanspan stylecolor:#117700/spanspan stylecolor:#aa5500!-- text文本组件类似于 span是一个行内元素 --/spanspan stylecolor:#117700/spanspan stylecolor:#117700image/span span stylecolor:#0000ccsrc/spanspan stylecolor:#aa1111/assets/cate-1.png/span span stylecolor:#0000ccalt/spanspan stylecolor:#aa1111/spanspan stylecolor:#117700//spanspan stylecolor:#117700/spanspan stylecolor:#117700text/spanspan stylecolor:#117700/span爱礼精选span stylecolor:#117700//spanspan stylecolor:#117700text/spanspan stylecolor:#117700/spanspan stylecolor:#117700//spanspan stylecolor:#117700navigator/spanspan stylecolor:#117700/spanspan stylecolor:#117700/spanspan stylecolor:#117700navigator/span span stylecolor:#0000ccurl/spanspan stylecolor:#aa1111/pages/list/list/spanspan stylecolor:#117700/spanspan stylecolor:#117700/spanspan stylecolor:#117700image/span span stylecolor:#0000ccsrc/spanspan stylecolor:#aa1111/assets/cate-2.png/span span stylecolor:#0000ccalt/spanspan stylecolor:#aa1111/spanspan stylecolor:#117700//spanspan stylecolor:#117700/spanspan stylecolor:#117700text/spanspan stylecolor:#117700/span鲜花玫瑰span stylecolor:#117700//spanspan stylecolor:#117700text/spanspan stylecolor:#117700/spanspan stylecolor:#117700//spanspan stylecolor:#117700navigator/spanspan stylecolor:#117700/spanspan stylecolor:#117700/spanspan stylecolor:#117700navigator/span span stylecolor:#0000ccurl/spanspan stylecolor:#aa1111/pages/list/list/spanspan stylecolor:#117700/spanspan stylecolor:#117700/spanspan stylecolor:#117700image/span span stylecolor:#0000ccsrc/spanspan stylecolor:#aa1111/assets/cate-3.png/span span stylecolor:#0000ccalt/spanspan stylecolor:#aa1111/spanspan stylecolor:#117700//spanspan stylecolor:#117700/spanspan stylecolor:#117700text/spanspan stylecolor:#117700/span永生玫瑰span stylecolor:#117700//spanspan stylecolor:#117700text/spanspan stylecolor:#117700/spanspan stylecolor:#117700//spanspan stylecolor:#117700navigator/spanspan stylecolor:#117700/spanspan stylecolor:#117700/spanspan stylecolor:#117700navigator/span span stylecolor:#0000ccurl/spanspan stylecolor:#aa1111/pages/list/list/spanspan stylecolor:#117700/spanspan stylecolor:#117700/spanspan stylecolor:#117700image/span span stylecolor:#0000ccsrc/spanspan stylecolor:#aa1111/assets/cate-4.png/span span stylecolor:#0000ccalt/spanspan stylecolor:#aa1111/spanspan stylecolor:#117700//spanspan stylecolor:#117700/spanspan stylecolor:#117700text/spanspan stylecolor:#117700/span玫瑰珠宝span stylecolor:#117700//spanspan stylecolor:#117700text/spanspan stylecolor:#117700/spanspan stylecolor:#117700//spanspan stylecolor:#117700navigator/spanspan stylecolor:#117700/spanspan stylecolor:#117700/spanspan stylecolor:#117700navigator/span span stylecolor:#0000ccurl/spanspan stylecolor:#aa1111/pages/list/list/spanspan stylecolor:#117700/spanspan stylecolor:#117700/spanspan stylecolor:#117700image/span span stylecolor:#0000ccsrc/spanspan stylecolor:#aa1111/assets/cate-5.png/span span stylecolor:#0000ccalt/spanspan stylecolor:#aa1111/spanspan stylecolor:#117700//spanspan stylecolor:#117700/spanspan stylecolor:#117700text/spanspan stylecolor:#117700/span香水护体span stylecolor:#117700//spanspan stylecolor:#117700text/spanspan stylecolor:#117700/spanspan stylecolor:#117700//spanspan stylecolor:#117700navigator/spanspan stylecolor:#117700/span
span stylecolor:#117700//spanspan stylecolor:#117700view/spanspan stylecolor:#117700/span/span/span ➡️ pages/index/index.wxss
span stylebackground-color:#f8f8f8span stylecolor:#333333// 商品导航区域
span stylecolor:#555555.good-nav/span {span stylecolor:#000000display/span: span stylecolor:#221199flex/span;span stylecolor:#000000justify-content/span: span stylecolor:#221199space-between/span;span stylecolor:#000000background-color/span: span stylecolor:#221199#fff/span;span stylecolor:#000000padding/span: span stylecolor:#11664420rpx/span span stylecolor:#11664416rpx/span;span stylecolor:#000000border-radius/span: span stylecolor:#11664410rpx/span;
span stylecolor:#000000view/span {span stylecolor:#000000navigator/span {span stylecolor:#000000display/span: span stylecolor:#221199flex/span;span stylecolor:#000000flex-direction/span: span stylecolor:#221199column/span;span stylecolor:#000000align-items/span: span stylecolor:#221199center/span;}
span stylecolor:#000000image/span {span stylecolor:#000000width/span: span stylecolor:#11664480rpx/span;span stylecolor:#000000height/span: span stylecolor:#11664480rpx/span;}
span stylecolor:#000000text/span {span stylecolor:#000000font-size/span: span stylecolor:#11664424rpx/span;span stylecolor:#000000margin-top/span: span stylecolor:#11664412rpx/span;}}
}
/span/span 10. 商品推荐区域-scroll-view 可滚动视图区域适用于需要滚动展示内的场景它可以在小程序中实现类似于网页中的滚动条效果用户可以通过手指滑动或者点击滚动条来滚动内容scroll-view 组件可以设置滚动方向、滚动条样式、滚动到顶部或底部时的回调函数等属性可以根据实际需求进行灵活配置。 3.10.1 scroll-view 横向滚动 知识点 使用横向滚动时需要添加 scroll-x 属性然后通过 css 进行结构绘制实现页面横向滚动 落地代码 ➡️ pages/index/index.wxml
span stylebackground-color:#f8f8f8span stylecolor:#333333span stylecolor:#aa5500!-- 商品推荐区域 --/span
span stylecolor:#117700/spanspan stylecolor:#117700view/span span stylecolor:#0000ccclass/spanspan stylecolor:#aa1111hot/spanspan stylecolor:#117700/spanspan stylecolor:#117700/spanspan stylecolor:#117700scroll-view/span span stylecolor:#0000ccclass/spanspan stylecolor:#aa1111scroll-x/span span stylecolor:#0000ccscroll-x/spanspan stylecolor:#117700/spanspan stylecolor:#117700/spanspan stylecolor:#117700view/spanspan stylecolor:#117700/span1span stylecolor:#117700//spanspan stylecolor:#117700view/spanspan stylecolor:#117700/spanspan stylecolor:#117700/spanspan stylecolor:#117700view/spanspan stylecolor:#117700/span2span stylecolor:#117700//spanspan stylecolor:#117700view/spanspan stylecolor:#117700/spanspan stylecolor:#117700/spanspan stylecolor:#117700view/spanspan stylecolor:#117700/span3span stylecolor:#117700//spanspan stylecolor:#117700view/spanspan stylecolor:#117700/spanspan stylecolor:#117700//spanspan stylecolor:#117700scroll-view/spanspan stylecolor:#117700/span
span stylecolor:#117700//spanspan stylecolor:#117700view/spanspan stylecolor:#117700/span/span/span ➡️ pages/index/index.wxss
span stylebackground-color:#f8f8f8span stylecolor:#333333span stylecolor:#555555.hot/span {span stylecolor:#000000margin-top/span: span stylecolor:#11664416rpx/span;
span stylecolor:#555555.scroll-x/span {span stylecolor:#000000width/span: span stylecolor:#116644100%/span;span stylecolor:#000000white-space/span: span stylecolor:#221199nowrap/span;span stylecolor:#000000background-color/span: span stylecolor:#770088lightblue/span;
span stylecolor:#117700view/span{span stylecolor:#000000display/span: span stylecolor:#221199inline-block/span;span stylecolor:#000000width/span: span stylecolor:#11664450%/span;span stylecolor:#000000height/span: span stylecolor:#11664480rpx/span;
:span stylecolor:#008855last-child/span{span stylecolor:#000000background-color/span: span stylecolor:#770088lightseagreen/span;}
:span stylecolor:#008855first-child/span{span stylecolor:#000000background-color/span: span stylecolor:#770088lightpink/span;}} }
}/span/span 3.10.2 scroll-view 纵向滚动 知识点 使用竖向滚动时需要给scroll-view一个固定高度同时添加 scroll-y 属性实现页面纵向滚动 落地代码 ➡️ pages/index/index.wxml
span stylebackground-color:#f8f8f8span stylecolor:#333333span stylecolor:#aa5500!-- 商品推荐区域 --/span
span stylecolor:#117700/spanspan stylecolor:#117700view/span span stylecolor:#0000ccclass/spanspan stylecolor:#aa1111hot/spanspan stylecolor:#117700/spanspan stylecolor:#117700/spanspan stylecolor:#117700scroll-view/span span stylecolor:#0000ccclass/spanspan stylecolor:#aa1111scroll-x/span span stylecolor:#0000ccscroll-x/spanspan stylecolor:#117700/spanspan stylecolor:#117700/spanspan stylecolor:#117700view/spanspan stylecolor:#117700/span1span stylecolor:#117700//spanspan stylecolor:#117700view/spanspan stylecolor:#117700/spanspan stylecolor:#117700/spanspan stylecolor:#117700view/spanspan stylecolor:#117700/span2span stylecolor:#117700//spanspan stylecolor:#117700view/spanspan stylecolor:#117700/spanspan stylecolor:#117700/spanspan stylecolor:#117700view/spanspan stylecolor:#117700/span3span stylecolor:#117700//spanspan stylecolor:#117700view/spanspan stylecolor:#117700/spanspan stylecolor:#117700//spanspan stylecolor:#117700scroll-view/spanspan stylecolor:#117700/span
span stylecolor:#117700/spanspan stylecolor:#117700scroll-view/span span stylecolor:#0000ccclass/spanspan stylecolor:#aa1111scroll-y/span span stylecolor:#0000ccscroll-y/spanspan stylecolor:#117700/spanspan stylecolor:#117700/spanspan stylecolor:#117700view/spanspan stylecolor:#117700/span1span stylecolor:#117700//spanspan stylecolor:#117700view/spanspan stylecolor:#117700/spanspan stylecolor:#117700/spanspan stylecolor:#117700view/spanspan stylecolor:#117700/span2span stylecolor:#117700//spanspan stylecolor:#117700view/spanspan stylecolor:#117700/spanspan stylecolor:#117700/spanspan stylecolor:#117700view/spanspan stylecolor:#117700/span3span stylecolor:#117700//spanspan stylecolor:#117700view/spanspan stylecolor:#117700/spanspan stylecolor:#117700//spanspan stylecolor:#117700scroll-view/spanspan stylecolor:#117700/span
span stylecolor:#117700//spanspan stylecolor:#117700view/spanspan stylecolor:#117700/span/span/span ➡️ pages/index/index.wxss
span stylebackground-color:#f8f8f8span stylecolor:#333333span stylecolor:#555555.hot/span {span stylecolor:#000000margin-top/span: span stylecolor:#11664416rpx/span;
span stylecolor:red.scroll-x/span {span stylecolor:#000000width/span: span stylecolor:#116644100%/span;span stylecolor:#000000white-space/span: span stylecolor:#221199nowrap/span;span stylecolor:#000000background-color/span: span stylecolor:#770088lightblue/span;
span stylecolor:#000000view/span{span stylecolor:#000000display/span: span stylecolor:#221199inline-block/span;span stylecolor:#000000width/span: span stylecolor:#11664450%/span;span stylecolor:#000000height/span: span stylecolor:#11664480rpx/span;
:span stylecolor:#008855last-child/span{span stylecolor:#000000background-color/span: span stylecolor:#770088lightseagreen/span;}
:span stylecolor:#008855first-child/span{span stylecolor:#000000background-color/span: span stylecolor:#770088lightcoral/span;}} }
span stylecolor:red.scroll-y/span {span stylecolor:#000000height/span: span stylecolor:#116644400rpx/span;span stylecolor:#000000background-color/span: span stylecolor:#770088lightsalmon/span;span stylecolor:#000000margin-top/span: span stylecolor:#11664460rpx/span;span stylecolor:#000000view/span {span stylecolor:#000000height/span: span stylecolor:#116644400rpx/span;:span stylecolor:#008855nth-child/span(span stylecolor:#000000odd/span) {span stylecolor:#000000background-color/span: span stylecolor:#770088lightseagreen/span;}:span stylecolor:#008855nth-child/span(span stylecolor:#000000even/span) {span stylecolor:#000000background-color/span: span stylecolor:#770088lightcoral/span;}} }
}/span/span 3.10.3 实现商品推荐区域横向滚动 落地代码 ➡️ pages/index/index.wxml
span stylebackground-color:#f8f8f8span stylecolor:#333333span stylecolor:#aa5500!-- 推荐商品 --/span
span stylecolor:#117700/spanspan stylecolor:#117700view/span span stylecolor:#0000ccclass/spanspan stylecolor:#aa1111good-hot/spanspan stylecolor:#117700/spanspan stylecolor:#117700/spanspan stylecolor:#117700scroll-view/span span stylecolor:#0000ccscroll-x/span span stylecolor:#0000ccclass/spanspan stylecolor:#aa1111scroll-x/spanspan stylecolor:#117700/spanspan stylecolor:#117700/spanspan stylecolor:#117700view/spanspan stylecolor:#117700/spanspan stylecolor:#117700/spanspan stylecolor:#117700view/span span stylecolor:#0000ccclass/spanspan stylecolor:#aa1111good-item/spanspan stylecolor:#117700/spanspan stylecolor:#117700/spanspan stylecolor:#117700image/span span stylecolor:#0000ccsrc/spanspan stylecolor:#aa1111../../assets/floor/1.png/span span stylecolor:#0000ccmode/spanspan stylecolor:#aa1111/spanspan stylecolor:#117700//spanspan stylecolor:#117700/spanspan stylecolor:#117700text/spanspan stylecolor:#117700/span鲜花玫瑰span stylecolor:#117700//spanspan stylecolor:#117700text/spanspan stylecolor:#117700/spanspan stylecolor:#117700/spanspan stylecolor:#117700text/spanspan stylecolor:#117700/span66span stylecolor:#117700//spanspan stylecolor:#117700text/spanspan stylecolor:#117700/spanspan stylecolor:#117700//spanspan stylecolor:#117700view/spanspan stylecolor:#117700/spanspan stylecolor:#117700//spanspan stylecolor:#117700view/spanspan stylecolor:#117700/span
span stylecolor:#117700/spanspan stylecolor:#117700view/spanspan stylecolor:#117700/spanspan stylecolor:#117700/spanspan stylecolor:#117700view/span span stylecolor:#0000ccclass/spanspan stylecolor:#aa1111good-item/spanspan stylecolor:#117700/spanspan stylecolor:#117700/spanspan stylecolor:#117700image/span span stylecolor:#0000ccsrc/spanspan stylecolor:#aa1111../../assets/floor/2.png/span span stylecolor:#0000ccmode/spanspan stylecolor:#aa1111/spanspan stylecolor:#117700//spanspan stylecolor:#117700/spanspan stylecolor:#117700text/spanspan stylecolor:#117700/span鲜花玫瑰span stylecolor:#117700//spanspan stylecolor:#117700text/spanspan stylecolor:#117700/spanspan stylecolor:#117700/spanspan stylecolor:#117700text/spanspan stylecolor:#117700/span77span stylecolor:#117700//spanspan stylecolor:#117700text/spanspan stylecolor:#117700/spanspan stylecolor:#117700//spanspan stylecolor:#117700view/spanspan stylecolor:#117700/spanspan stylecolor:#117700//spanspan stylecolor:#117700view/spanspan stylecolor:#117700/span
span stylecolor:#117700/spanspan stylecolor:#117700view/spanspan stylecolor:#117700/spanspan stylecolor:#117700/spanspan stylecolor:#117700view/span span stylecolor:#0000ccclass/spanspan stylecolor:#aa1111good-item/spanspan stylecolor:#117700/spanspan stylecolor:#117700/spanspan stylecolor:#117700image/span span stylecolor:#0000ccsrc/spanspan stylecolor:#aa1111../../assets/floor/3.png/span span stylecolor:#0000ccmode/spanspan stylecolor:#aa1111/spanspan stylecolor:#117700//spanspan stylecolor:#117700/spanspan stylecolor:#117700text/spanspan stylecolor:#117700/span鲜花玫瑰span stylecolor:#117700//spanspan stylecolor:#117700text/spanspan stylecolor:#117700/spanspan stylecolor:#117700/spanspan stylecolor:#117700text/spanspan stylecolor:#117700/span88span stylecolor:#117700//spanspan stylecolor:#117700text/spanspan stylecolor:#117700/spanspan stylecolor:#117700//spanspan stylecolor:#117700view/spanspan stylecolor:#117700/spanspan stylecolor:#117700//spanspan stylecolor:#117700view/spanspan stylecolor:#117700/span
span stylecolor:#117700/spanspan stylecolor:#117700view/spanspan stylecolor:#117700/spanspan stylecolor:#117700/spanspan stylecolor:#117700view/span span stylecolor:#0000ccclass/spanspan stylecolor:#aa1111good-item/spanspan stylecolor:#117700/spanspan stylecolor:#117700/spanspan stylecolor:#117700image/span span stylecolor:#0000ccsrc/spanspan stylecolor:#aa1111../../assets/floor/4.png/span span stylecolor:#0000ccmode/spanspan stylecolor:#aa1111/spanspan stylecolor:#117700//spanspan stylecolor:#117700/spanspan stylecolor:#117700text/spanspan stylecolor:#117700/span鲜花玫瑰span stylecolor:#117700//spanspan stylecolor:#117700text/spanspan stylecolor:#117700/spanspan stylecolor:#117700/spanspan stylecolor:#117700text/spanspan stylecolor:#117700/span99span stylecolor:#117700//spanspan stylecolor:#117700text/spanspan stylecolor:#117700/spanspan stylecolor:#117700//spanspan stylecolor:#117700view/spanspan stylecolor:#117700/spanspan stylecolor:#117700//spanspan stylecolor:#117700view/spanspan stylecolor:#117700/span
span stylecolor:#117700/spanspan stylecolor:#117700view/spanspan stylecolor:#117700/spanspan stylecolor:#117700/spanspan stylecolor:#117700view/span span stylecolor:#0000ccclass/spanspan stylecolor:#aa1111good-item/spanspan stylecolor:#117700/spanspan stylecolor:#117700/spanspan stylecolor:#117700image/span span stylecolor:#0000ccsrc/spanspan stylecolor:#aa1111../../assets/floor/5.png/span span stylecolor:#0000ccmode/spanspan stylecolor:#aa1111/spanspan stylecolor:#117700//spanspan stylecolor:#117700/spanspan stylecolor:#117700text/spanspan stylecolor:#117700/span鲜花玫瑰span stylecolor:#117700//spanspan stylecolor:#117700text/spanspan stylecolor:#117700/spanspan stylecolor:#117700/spanspan stylecolor:#117700text/spanspan stylecolor:#117700/span100span stylecolor:#117700//spanspan stylecolor:#117700text/spanspan stylecolor:#117700/spanspan stylecolor:#117700//spanspan stylecolor:#117700view/spanspan stylecolor:#117700/spanspan stylecolor:#117700//spanspan stylecolor:#117700view/spanspan stylecolor:#117700/span
span stylecolor:#117700//spanspan stylecolor:#117700scroll-view/spanspan stylecolor:#117700/span
span stylecolor:#117700//spanspan stylecolor:#117700view/spanspan stylecolor:#117700/span/span/span ➡️ pages/index/index.wxss
span stylebackground-color:#f8f8f8span stylecolor:#333333span stylecolor:#aa5500// 推荐商品区域/span
span stylecolor:#555555.good-hot/span {span stylecolor:#000000background-color/span: span stylecolor:#221199#fff/span;span stylecolor:#000000padding/span: span stylecolor:#11664416rpx/span;span stylecolor:#000000border-radius/span: span stylecolor:#11664410rpx/span;span stylecolor:#000000font-size/span: span stylecolor:#11664424rpx/span;
span stylecolor:#555555.scroll-x/span {span stylecolor:#000000width/span: span stylecolor:#116644100%/span;span stylecolor:#000000white-space/span: span stylecolor:#221199nowrap/span;
span stylecolor:#117700view/span {span stylecolor:#000000display/span: span stylecolor:#221199inline-block/span;span stylecolor:#000000width/span: span stylecolor:#116644320rpx/span;span stylecolor:#000000height/span: span stylecolor:#116644440rpx/span;span stylecolor:#000000margin-right/span: span stylecolor:#11664416rpx/span;
span stylecolor:#555555.good-item/span {span stylecolor:#000000display/span: span stylecolor:#221199flex/span;span stylecolor:#000000flex-direction/span: span stylecolor:#221199column/span;span stylecolor:#000000justify-content/span: span stylecolor:#221199space-between/span;
span stylecolor:#117700text/span {:span stylecolor:#008855nth-of-type/span(span stylecolor:#1166441/span) {span stylecolor:#000000font-weight/span: span stylecolor:#221199bold/span;}}}
span stylecolor:#117700image/span {span stylecolor:#000000width/span: span stylecolor:#116644100%/span;span stylecolor:#000000height/span: span stylecolor:#116644320rpx/span;}
:span stylecolor:#008855last-child/span {span stylecolor:#000000margin-right/span: span stylecolor:#1166440/span;}}}
}/span/span 11. 字体图标的使用 在项目中使用到的小图标一般由公司设计师进行设计如果如果自行设计这些图标会比较麻烦且耗费时间这时候我们就可以使用到阿里巴巴矢量图库设计好以后上传到阿里巴巴矢量图标库然后方便程序员来进行使用。 阿里巴巴矢量图库是阿里巴巴集团推出的一个免费的矢量图标库和图标管理工具。它汇集了大量的精美图标资源包括品牌图标和各种主题和分类的图标。用户可以在阿里巴巴矢量图库中搜索和浏览所需的图标也可以上传和管理自己的图标资源。 小程序中的字体图标使用方式与 Web 开发中的使用方式是一样的。
首先我们先找到所需的图标加入到项目库进入项目库中生成链接。也快将字体图标库下载到本地 点击链接会将生成的 CSS 在新的链接页面进行打开ctrl s将该文件重命名为.wxss 后缀名然后保存到项目根目录下的static 文件夹下。 在全局样式文件app.wxss中导入fonts.wxss字体图标文件然后获取到图标类名在项目中使用即可应用于页面
span stylebackground-color:#f8f8f8span stylecolor:#333333import ./static/fonts.wxss;/span/span
span stylebackground-color:#f8f8f8span stylecolor:#333333view classmyTestview classiconfont icon-tuikuan/view
/view/span/span 注意使用字体图标可能会报错 span stylebackground-color:#f8f8f8[渲染层网络层错误] Failed to load font http://at.alicdn.com/t/c/font_3946178_q5oidsl5xo.woff2?t1680795910637 net::ERR_CACHE_MISS (env: Windows,mp,1.06.2303220; lib: 2.30.4)/span 该错误可忽略详见下面这个链接 wx.loadFontFace(Object object) | 微信开放文档 但在控制台出现错误会影响开发调试解决方案是将字体图标转换成 base64 的格式 落地代码 ➡️ app.wxss
span stylebackground-color:#f8f8f8span stylecolor:#333333// 在导入样式文件以后必须以分号结尾否则会出现异常import ./iconfont/iconfont.scss;/span/span ➡️ pages/index/index.wxml
span stylebackground-color:#f8f8f8span stylecolor:#333333!-- 公司信息 --
view classinfotexttext classiconfont icon-ps/text 同城配送/texttexttext classiconfont icon-lx/text 行业龙头/texttexttext classiconfont icon-time/text 半小时送达/texttexttext classiconfont icon-hp/text 100% 好评/text
/view
/span/span ➡️ pages/index/index.wxss
span stylebackground-color:#f8f8f8span stylecolor:#333333// 公司信息区域
.info {display: flex;justify-content: space-between;background-color: #fff;padding: 20rpx 16rpx;border-radius: 10rpx;font-size: 24rpx; .iconfont {font-size: 24rpx;}
}
/span/span 12. 背景图片的使用 注提供的网络地址连接 http://8.131.91.46:6677/bgimage.png http://8.131.91.46:6677/TomAndJerry.jpg 当编写小程序的样式文件时我们可以使用 background-image 属性来设置一个元素的背景图像但是小程序的 background-image 不支持本地路径。 span stylebackground-color:#f8f8f8span stylecolor:#333333view classimage/view/span/span
span stylebackground-color:#f8f8f8span stylecolor:#333333.image {background-image: url(../../static/微信.jpg);
}/span/span 如图在使用了本地资源图片以后微信开发者工具提供的提示
本地资源图片无法通过 WXSS 获取可以使用网络图片或者 base64或者使用image/标签
span stylebackground-color:#f8f8f8span stylecolor:#333333.image {width: 100%;height: 400rpx;/* 本地资源图片无法通过 WXSS 获取 *//* background-image: url(../../static/微信.jpg); *//* 使用网络图片 *//* background-image: url(http://8.131.91.46:6677/TomAndJerry.jpg); *//* 使用 base64 格式展示图片 *//* base64 编码的文件很长这个地址老师在这边进行了简写在测试的时候需要自己将这里转成完成的 64 编码 */background-image: url(data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEAeAB4AAD/.....)background-position: center;background-size: cover;}/span/span
