微信小程序仿写豆瓣评分我的页面
搭建豆瓣评分我的页面,先在pages文件夹下创建pages,得到4个文件,在这4文件中来实现界面的搭建;
原文链接
1.头部header模块的搭建
头部模块的搭建比较简单,主要是一个背景图片和一个居中的按钮;
-
按钮的阴影效果: box-shdow
-
图片的填充: image
- aspectFill: 保持长宽比, 拉伸到最长的边填充完全 (拉伸以后会居中显示图片)
- aspectFit: 保持长宽比, 拉伸到最短的边填充完全
2. 中间items模块的搭建
中间item模块分为两大部分:我的书影音-分析items
- 我的书影音: 分为两个view;使用flex布局;
- 分析items: 分为4个view: image-观影分析-描述-立即开启
2.1 profile.wxml中的代码:
<view class="container">
<view class="login-wrapper">
<view class="login">登录</view>
<image src="/assets/imgs/bg_mine_login.png" mode="aspectFill" />
</view>
<view class="item-wrapper">
<view class="top-item">
<view class="my-source">我的书影音</view>
<view class="login-see">
<view class="login-see-title"> 登录查看</view>
<view class="arrow"></view>
</view>
</view>
<view class="items">
<view wx:for="{{ items }}" class="item" wx:key="unique">
<view class="info">
<image src="{{ item.imageUrl }}" />
<view class="left-item">
<view class="left-title">{{ item.leftTitle }}</view>
<view class="had">
<view class="count">{{ item.count }}</view>
<view class="des">{{ item.seeTitle }}</view>
</view>
</view>
<text class="center-item">{{ item.centerDes }}</text>
<view class="right-item">
<view class="start">立即开启</view>
<view class="arrow"></view>
</view>
</view>
<view class="devider"></view>
</view>
</view>
</view>
<view class="version">版本1.0.39</view>
</view>
列表循环: 微信列表循环解释 for循环创建列表ListView;
代码实现步骤可以先写profile.wxss文件,先将view控件及层级搭建出来,然后布局实现profile.wxss文件,最后对数据处理,实现profile.js中的数据,点击事件等的处理;
2.3 profile.wxss
/* pages/profile/profile.wxss */
.login-wrapper {
width: 100%;
height: 400rpx;
/* background-color: chartreuse; */
display: flex;
justify-content: center;
align-items: center;
position: relative; /*使得子元素相对于它布局*/
}
.login-wrapper image{
position: absolute; /*子绝父相: 子元素是绝对布局,父元素是相对布局, 所以子元素的相对布局就是相对于父元素来说*/
left: 0;
top: 0;
width: 100%;
height: 100%;
z-index: -1;
}
.login-wrapper .login {
color: #1E4826;
background-color: #fff;
border-radius: 40rpx;
font-size: 50rpx;
height: 80rpx;
width: 200rpx;
line-height: 80rpx;
text-align: center;
font-size: 30rpx;
box-shadow: 2rpx 2rpx 10rpx 0 rgba(0, 0, 0, 1);
}
.version{
position: absolute;
bottom: 20rpx;
width: 100%;
text-align: center;
font-size: 24rpx;
color: #c9c9c9;
}
.item-wrapper .top-item {
display: flex;
justify-content:space-between ;
margin: 30rpx 30rpx;
}
.item-wrapper .top-item .login-see{
display: flex;
}
.item-wrapper .arrow{
border: 4rpx solid #7F7F7F;
height: 18rpx;
width: 18rpx;
border-left: none;
border-top: none;
transform: rotate(-45deg);
margin-left: 15rpx;
}
.top-item .my-source{
font-size: 36rpx;
font-weight: bold;
}
.top-item .login-see-title{
font-size: 28rpx;
color: #8B8B8B;
}
.top-item .login-see{
display: flex;
align-items: center;
}
.item-wrapper .items image{
height: 80rpx;
width: 80rpx;
}
.item-wrapper .items .item{
margin-right: 30rpx;
margin-left: 30rpx;
margin-bottom: 25rpx;
display: flex;
justify-content: space-between;
align-items: center;
}
.item-wrapper .items .left-item .had{
display: flex;
margin-top: 15rpx;
font-size: 28rpx;
color: #808080;
align-items:center;
}
.items .left-item .had .count{
margin-right: 10rpx;
font-size: 50rpx;
color: #808080;
}
.item-wrapper .items .center-item{
text-align: center;
line-height: 100%;
font-size: 28rpx;
color: #C1C1C1;
}
.item-wrapper .items .right-item{
display: flex;
align-items: center;
}
.items .right-item .start{
color: #4A4A4A;
background-color: #F5F5F5;
padding: 10rpx 15rpx;
border-radius: 10rpx;
font-size: 28rpx;
}
.items .item .line{
width: 100%;
height: 2rpx;
background-color: rgba(0, 0, 0, 1);
margin-top: 15rpx;
}
.items .item{
display: flex;
flex-direction: column;
}
.items .info{
display: flex;
width: 100%;
align-items: center;
justify-content: space-between;
}
.item .devider{
width: 100%;
height: 2rpx;
background-color: rgba(0, 0, 0, 0.1);
margin-top: 15rpx;
}
-
子绝父相: 子元素是绝对布局,父元素是相对布局, 所以子元素的相对布局就是相对于父元素来说
-
使得登录按钮在绿色背景的上方:设置图片z-index为-1(参照立体想x,y,z轴)
-
底部的version:使用绝对布局,绝对布局是相对于当前页面来说的;
-
箭头>:
- 要想使所有的箭头共用一个样式:.item-wrapper .arrow(将箭头的样式放在同一父视图的层级下)
- 箭头的普通用法是使用图片;另一个用法是创建一个view,给它的border一个颜色,然后旋转45°
border: 4rpx solid #7F7F7F;
height: 18rpx;
width: 18rpx;
border-left: none;
border-top: none;
transform: rotate(-45deg);
margin-left: 15rpx; -
立即开启按钮的背景边框延伸:padding: 左右 上下
2.1 profile.js
// pages/profile/profile.js
Page({
data:{
items :[
{
imageUrl:'/assets/imgs/ic_cat_movie.png',
leftTitle:'观影分析',
count: 0,
seeTitle:'看过',
centerDes:'标记10部影片\n开启观影分析'
},
{
imageUrl:'/assets/imgs/ic_cat_book.png',
leftTitle:'读书分析',
count: 0,
seeTitle:'读过',
centerDes:'标记10本书籍\n开启读书分析'
},
{
imageUrl:'/assets/imgs/ic_cat_music.png',
leftTitle:'音乐分析',
count: 0,
seeTitle:'听过',
centerDes:'标记10首音乐\n开启音乐分析'
}
]
},
})
数据绑定: 微信官方数据绑定解释
- 数据必须放在Page中的data中,对应的是数组或者字典map
- 使用的时候用{{}}包装起来,代表的是data中的数据
最终实现效果: