微信小程序仿写豆瓣评分我的页面

微信小程序仿写豆瓣评分我的页面

搭建豆瓣评分我的页面,先在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中的数据

最终实现效果: