欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

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

程序员文章站 2022-03-14 13:56:56
...

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

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

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

最终实现效果:
微信小程序仿写豆瓣评分我的页面

相关标签: 小程序