页面制作示例
示例:个人信息
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15 | <!--index.wxml-->
<view>
<view class="top">
<view class="user-img">
<image src="/images/avatar.png" />
</view>
</view>
<view class="menu">
<view class="item">姓名: 小明</view>
<view class="item">年龄: 20</view>
<view class="item">性别: 女</view>
<view class="item">特长: 绘画、书法</view>
<view class="item">爱好: 编程</view>
</view>
</view>
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26 | /**index.wxss**/
.top {
background: #3A4861;
width: 100%;
padding: 30rpx 0;
}
.top.user-img {
width: 252rpx;
margin: 0 auto;
}
.top image {
width: 252rpx;
height: 252rpx;
border-radius: 50%;
border: 6rpx solid #777F92;
}
.menu .item {
height: 96rpx;
line-height: 96rpx;
border-bottom: 2rpx solid #ccc;
padding: 0 40rpx;
font-size: 34rpx;
}
|
示例:本地生活
编写轮博图区域的页面结构,具体代码如下:
| <!--pages/grid/grid.wxml-->
<view>
<swiper indicator-dots="true" autoplay="true" interval="3000">
<swiper-item>
<image src="" mode=""/>
</swiper-item>
<swiper-item>
<image src="" mode=""/>
</swiper-item>
</swiper>
</view>
|
上述代码使用 swiper、swiper-item 和 image 组件实现了轮博图区域的页面结构
编写九宫格区域的页面结构,具体代码如下:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37 | <view class="grids">
<view class="item">
<image src="" mode=""/>
<text>美食</text>
</view>
<view class="item">
<image src="" mode=""/>
<text>装修</text>
</view>
<view class="item">
<image src="" mode=""/>
<text>洗浴</text>
</view>
<view class="item">
<image src="" mode=""/>
<text>汽车</text>
</view>
<view class="item">
<image src="" mode=""/>
<text>唱歌</text>
</view>
<view class="item">
<image src="" mode=""/>
<text>住宿</text>
</view>
<view class="item">
<image src="" mode=""/>
<text>学习</text>
</view>
<view class="item">
<image src="" mode=""/>
<text>工作</text>
</view>
<view class="item">
<image src="" mode=""/>
<text>结婚</text>
</view>
|
页面样式:
轮博图区域:
| swiper {
height: 350rpx;
}
swiper image {
width: 100%;
height: 100%;
}
|
九宫格区域的整体样式
| .grids {
display: flex;
flex-wrap: wrap;
}
|
每一个格子的页面样式
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20 | .grids .item {
width: 250rpx;
height: 250rpx;
border-right: 1rpx solid #eee;
border-bottom: 1rpx solid #eee;
box-sizing: border-box;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.grids .item:nth-child(3) {
border-right: 0;
}
.grids .item:nth-child(6) {
border-right: 0;
}
.grids .item:nth-child(9) {
border-right: 0;
}
|
编写九宫格区域中每一个格子中的图片和文字的页面样式
| .grids .item image {
width: 70rpx;
height: 70rpx;
}
.grids .item text {
color: #999;
font-size: 28rpx;
margin-top: 20rpx;
}
|
婚礼邀请函