1.1：创建项⽬
在微信开发者⼯具的开始界⾯左侧检查项⽬类型，需要为 [⼩程序]。
然后在右侧点击 [+] 开始新建项⽬。
最后在弹出的界⾯中输⼊项⽬相关的信息，点击确定即可
2.商品列表组件
轮播图代码
首页代码页面
分类页面
<view>
<view class="category-container">
<!-- 左侧的滚动视图区域 -->
<scroll-view class="category-left-view" scroll-y>
<!-- 一级分类 -->
<view class="left-view-item active">爱礼精选</view>
<view class="left-view-item">鲜花玫瑰</view>
<view class="left-view-item">永生玫瑰</view>
<view class="left-view-item">玫瑰珠宝</view>
</scroll-view>
<!-- 右侧的滚动视图区域 -->
<scroll-view class="category-right-view" scroll-y>
<!-- 二级分类 -->
<view class="test">
<view wx:for="{{10}}" wx:key="index" class="right-view-item">
<navigator
class="navigator"
url="/pages/goods/list/list?category2Id=1"
>
<image class="" src="../../assets/images/cate-1.png" mode=""/>
<text class="goods_item_name">真情告白</text>
</navigator>
</view>
</view>
</scroll-view>
</view>
</view>
所谓“伪元素” 就是在dom结构本来是不存在的 但是通过css创建出来的元素
::before ::after
用于向指定元素的前面或者后面加入特定的内容
样式图
小程序知识点
1.flex布局
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.demoOne{
width: 800px;
height: 800px;
border: 2px solid blue;
/* 设置弹性盒子布局，将块级元素转化为行内元素。 */
display: flex;
/* flex-direction属性
flex-direction属性用于设置主轴方向，通过设置主轴方向可以规定项目的排列方向。 */
/* row:默认值，主轴为从左到右的水平方向。
row-reverse:主轴为从右到左的水平方向。
column:主轴为从上到下的垂直方向。
column-reverse:主轴为从下到上的垂直方向。 */
/* flex-direction: row; */
/* flex-direction: row-reverse; */
/* flex-direction::column; */
/* flex-direction: column-reverse; */
/* justify-content属性
justify-content属性用于设置项目在主轴方向上的对齐方式。能够分配项目之间及其周围多余的空间。 */
/* flex-start:默认值，表示项目对齐到主轴起点，项目间不留空隙。
flex-end:项目对齐到主轴终点，项目间不留空隙。
center:项目在主轴上居中排列，项目间不留空隙。
主轴上第一个项目离主轴起点的距离等于最后一个项目离主轴终点的距离。
space-between:两端对齐，两端的项目分别靠向容器的两端，其他项目之间的间隔相等space-around:每个项目之间的距离相等，
第一个项目离主轴起点和最后一个项目离终点的距离为中间项目间距的一半。 */
/* justify-content: flex-start; */
/* justify-content: flex-end; */
/* justify-content: center; */
/* justify-content: space-between; */
/* justify-content:space-around; */
/* align-items属性align-items属性用于设置项目在交叉轴上的对齐方式。*/
/* center:项目在交叉轴的中间位置对齐。
flex-start:项目顶部与交叉轴起点对齐,flex-end:项目底部与交叉轴终点对齐。
baseline:项目的第一行文字的基线对齐。 */
/* align-items: center; */
/* align-items: flex-start; */
/* align-items: flex-end; */
/* align-items: baseline; */
/* 若要设置元素水平垂直居中
display: flex;
justify-content: center;
align-items: center;
*/
}
.boxOne{
width: 100px;
height: 100px;
background-color: green;
}
.boxTwo{
width: 200px;
height: 200px;
background-color: red;
}
.boxThree{
width: 300px;
height: 300px;
background-color: yellow;
}
</style>
</head>
<body>
<!-- 块级元素会独占一行 默认的宽度占满父级元素，行内元素不会换行。 -->
<div class="demoOne">
<div class="boxOne">1</div>
<div class="boxTwo">2</div>
<div class="boxThree">3</div>
</div>
</body>
</html>
扫一扫
1360
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
