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

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

最终实现效果:

微信小程序仿写豆瓣评分我的页面相关推荐

微信小程序1：豆瓣评分（超详细版）
项目展示: 首先,自定义组件searchbar.stars,以及search组件记小本本哦: (1)自定义组件:searchbar ...
微信小程序仿网易云音乐（使用云开发，提供源码）
微信小程序仿网易云音乐(使用云开发,提供源码)!!!!!!!!!!! 源码: 链接:https://pan.baidu.com/s/1z_ZnRVbT4vjEENimi8yBQQ 提取码:u0o3 一 ...
微信小程序仿淘票票之登录注册讲解
微信小程序仿淘票票之登录注册讲解(这也是我学习的第一步嘛) 前言一.登录以及注册的业务逻辑二.核心代码 1.register代码 2.login代码总结前言愉快的期末,终于结束了,我准备把程 ...
微信小程序仿朋友圈上传图片到服务器，后端通过C#实现
现在微信小程序拍照上传的需求越来越多了,绝大部分小程序项目都会用到,虽然技术上没什么难度,但对于初学者来说,也是件费时费力的事情,三年前我在写这些代码的时候也是花费好几天的时间,最近有点空闲时间,于是 ...
微信小程序仿系统自带下拉刷新效果
微信小程序仿系统自带下拉刷新效果前言思路分析实现尾巴前言看到标题也许有人会说:系统不是已经自带了下拉刷新,你去仿照系统的下拉刷新是不是吃多了没事干?其实真相并不是这样的.在微信小程序手把手 ...
分享下自己写的一个微信小程序请求远程数据加载到页面的代码
分享下自己写的一个微信小程序请求远程数据加载到页面的代码 1 思路整理就是页面加载完毕的时候请求远程接口,然后把数据赋值给页面的变量 ,然后列表循环 2 js相关代码我是改的 onload ...
微信小程序仿微信SlideView组件slide-view
微信小程序仿微信SlideView组件. 使用 1.安装 slide-view 从小程序基础库版本 2.2.1 或以上.及开发者工具 1.02.1808300 或以上开始,小程序支持使用 npm 安装 ...
Java微信运动步数排序设计_微信小程序仿微信运动步数排行(交互)
本文介绍了微信小程序仿微信运动步数排行(交互),分享给大家,也给自己留个笔记,废话不多说了,具体如下: 效果图如下: wxml: {{item.name}} {{item.steps}} wxss: ...
android微信运动页面开发,微信小程序仿微信运动步数排行(交互)
微信小程序仿微信运动步数排行(交互) 发布时间:2020-08-20 00:51:02 来源:脚本之家阅读:101 作者:祈澈姑娘本文介绍了微信小程序仿微信运动步数排行(交互),分享给大家,也给自 ...

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

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

1.头部header模块的搭建

2. 中间items模块的搭建

2.1 profile.wxml中的代码:

2.3 profile.wxss

2.1 profile.js

微信小程序仿写豆瓣评分我的页面相关推荐

最新文章

热门文章