微信小程序3天课程学习的第2天笔记
以下是flex布局的总结:
以下是关于主轴与交叉轴的示意图:
如图所示: 主轴是可以变化的, 它与flex-direction有关
如果垂直排列, 那么垂直方向上就是主轴:
介绍了ionic框架, 它是基于Angular的app flatform
官网: ionicframework.com
https://ionicframework.com/docs/components/#alert-prompt
Ionic is the app platform for web developers.
Build amazing mobile, web, and desktop apps all with one shared code base .
自己来实现一下栅格式布局
代码如下:
<style type="text/css">
*{
margin:0;
padding: 0;
list-style: none;
text-decoration: none;
/* 这个必须加 */
box-sizing: border-box;
}
.class_row > div {
height: 80px;
border: 1px solid black;
background-color: skyblue;
}
/* row flex 布局 */
.class_row {
display: flex;
/* row 占全部宽度 */
flex: 1;
}
/* row flex 布局(带折行) */
.class_row_wrap {
flex-wrap: wrap;
}
/* 12等分 */
.class_col_1 {flex: 0 0 8.33%;}
.class_col_2 {flex: 0 0 16.66%;}
.class_col_3 {flex: 0 0 25%;}
.class_col_4 {flex: 0 0 33.33%;}
.class_col_5 {flex: 0 0 41.66%;}
.class_col_6 {flex: 0 0 50%;}
.class_col_7 {flex: 0 0 58.33%;}
.class_col_8 {flex: 0 0 66.66%;}
.class_col_9 {flex: 0 0 75%;}
.class_col_10 {flex: 0 0 83.33%;}
.class_col_11 {flex: 0 0 91.66%;}
.class_col_12 {flex: 0 0 100%;}
</style>
<div class="class_row class_row_wrap">
<div class="class_col_3">
3
</div>
<div class="class_col_9">
9
</div>
<div class="class_col_6">
6
</div>
<div class="class_col_6">
6
</div>
<div class="class_col_3">
3首页
</div>
<div class="class_col_3">
3发现
</div>
<div class="class_col_3">
3收藏
</div>
<div class="class_col_3">
3我的
</div>
</div>
效果如下:
关于tab bar 官方文档建议 图片大小是 : 81px * 81px
代码如下:
"tabBar": {
"color": "#595b6c",
"selectedColor": "#1782d2",
"list": [{
"pagePath": "pages/index/index",
"text": "首页",
"iconPath": "/img/home_normal.png",
"selectedIconPath": "/img/home_high.png"
},{
"pagePath": "pages/index/index",
"text": "查询",
"iconPath": "/img/search_normal.png",
"selectedIconPath": "/img/search_high.png"
},{
"pagePath": "pages/index/index",
"text": "我的",
"iconPath": "/img/user_normal.png",
"selectedIconPath": "/img/user_high.png"
}]
}
效果如下:
tabBar
如果小程序是一个多 tab 应用(客户端窗口的底部或顶部有 tab 栏可以切换页面),
可以通过 tabBar 配置项指定 tab 栏的表现,以及 tab 切换时显示的对应页面。
Tip:
- 当设置 position 为 top 时,将不会显示 icon
- tabBar 中的 list 是一个数组,只能配置最少2个、最多5个 tab,tab 按数组的顺序排序。
属性说明:
属性 | 类型 | 必填 | 默认值 | 描述 |
---|---|---|---|---|
color | HexColor | 是 | tab 上的文字默认颜色 | |
selectedColor | HexColor | 是 | tab 上的文字选中时的颜色 | |
backgroundColor | HexColor | 是 | tab 的背景色 | |
borderStyle | String | 否 | black | tabbar上边框的颜色, 仅支持 black/white |
list | Array | 是 | tab 的列表,详见 list 属性说明,最少2个、最多5个 tab | |
position | String | 否 | bottom | 可选值 bottom、top |
其中 list 接受一个数组,数组中的每个项都是一个对象,其属性值如下:
属性 | 类型 | 必填 | 说明 |
---|---|---|---|
pagePath | String | 是 | 页面路径,必须在 pages 中先定义 |
text | String | 是 | tab 上按钮文字 |
iconPath | String | 否 | 图片路径,icon 大小限制为40kb,建议尺寸为 81px * 81px,当 postion 为 top 时,此参数无效,不支持网络图片 |
selectedIconPath | String | 否 | 选中时的图片路径,icon 大小限制为40kb,建议尺寸为 81px * 81px ,当 postion 为 top 时,此参数无效 |
如果把tabbar的position属性设置为: "top",那么效果如下:
下面开始写「动漫列表」页面
为了使程序一保存编译,直接来到「动漫列表」页面, 有3种实现方法
1. 在app.json中, 把pages数组中的anime路径放到第1个位置
那么程序一编译,就来到了anime页面
如下所示:
"pages":[
"pages/anime/anime",
"pages/index/index",
"pages/girl/girl",
"pages/user/user",
"pages/setting/setting"
],
2. 使用条件编译
3. 在index.js的onload方法中,调用 API wx.navigateTo手动进行跳转
代码如下:
//index.js
//获取应用实例
const app = getApp()
Page({
data: {
// 驱动视图的ViewModel数据
},
//事件处理函数
onLoad: function () {
wx.navigateTo({
url: '../anime/anime',
})
}
})
4. 手动点击首页的九宫格中的 按钮进行跳转
代码如下:
<navigator url="/pages/anime/anime" open-type="navigate" class="class_nav class_border_right">
<image src='/img/anime_high.png'></image>
<text class='class_text'>动漫推荐</text>
</navigator>
下面开始实现动漫列表菜单项中的卡片效果
anime.json 修改导航栏标题(注意: 这儿的根节点就是window)
如下:
{
"navigationBarTitleText": "补番记录"
}
anime.wxml文档结构如下:
<view class='class_view_anime' >
<text class='class_title'>
我们仍未知道那天所看见的花的名字
</text>
<text class='class_pubtime'>
2010年4月
</text>
<image class='class_img' src="{{anime.imgurl}}" mode="widthFix" >
</image>
<text class='class_description'>《我们仍未知道那天所看见的花的名字》(あの日見た花の名前を僕達はまだ知らない,未闻花名,那朵花),制作:A-1 Pictures,监督:长井龙雪,编剧:冈田麿里,片尾曲《Secret Base ~君がくれたもの》,哭成狗~</text>
</view>
如何使用了循环生成列表的话, 则代码如下:
<!--pages/anime/anime.wxml-->
<view class='class_view_anime' wx:for="{{animeArr}}" wx:for-index="index" wx:for-item="anime">
<text class='class_title'>
{{anime.titleFull}}
</text>
<text class='class_pubtime'>
{{anime.pubtime}}
</text>
<image class='class_img' src="{{anime.imgurl}}" mode="widthFix" >
</image>
<text class='class_description'>{{ anime.content }}~</text>
</view>
anime.wxss样式代码如下:
/* pages/anime/anime.wxss */
page {
background-color: #f1f1f1;
box-sizing: border-box;
}
.class_view_anime {
margin: 20rpx 20rpx 30rpx 20rpx;
padding: 0 10rpx;
border-radius: 16rpx;
background-color: #fff;
/* 阴影 */
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.07);
/* flex */
display: flex;
flex-direction: column;
}
/* 标题 */
.class_title {
font-size: 18px;
line-height: 20rpx;
padding-top: 10rpx;
padding-bottom: 5rpx;
}
/* 日期 */
.class_pubtime {
font-size: 12px;
color: #999;
display: block;
line-height: 20rpx;
padding: 0;
padding-bottom: 20rpx;
/* 分隔线 */
border-bottom: 1rpx solid #eee;
margin-bottom: 0rpx;
}
/* 图片 */
.class_img {
box-sizing: border-box;
border:0prx solid red;
width: 102.8%;
padding: 0;
margin-left:-9rpx;
}
/* 介绍 */
.class_description {
margin-top: 0rpx;
/* 分隔线 */
border-top: 1rpx solid #eee;
padding-top: 10rpx;
padding-bottom: 10rpx;
/* 字体颜色 */
font-size: 14px;
color: #666
}
效果如下:
封闭一个右箭头类, 思路:
1. 使用伪类
2. 盒子宽高15rpx
3. 不要左边框,底边框
4. 旋转45度
5. space-between,左右对齐
6. 抽取到公共的样式app.wxss里
代码如下:
/* ============================== */
/* 1. 封装右箭头 */
.class_arrow {
display: flex;
/* 水平均布 */
justify-content: space-between;
/* 垂直居中 */
align-items: center;
}
.class_arrow::after {
content: '';
/* 当设置成伸缩盒子后,可以不用写block了 */
/* display: block; */
width: 15rpx;
height: 15rpx;
border-top:1rpx solid #999;
border-right:1rpx solid #999;
margin-right: 10rpx;
transform: rotate(45deg);
}
/* ============================== */
右箭头 效果如下:
补充一下,关于外边距合并的问题
如果item盒子的上 下 边距都是 60, 那么两个item盒子之间的距离 也只有60
下面将 水平垂直居中 进行一下全局封装:
/* ============================== */
/* 2. 封装垂直居中 */
.class_flex_center {
display: flex;
justify-content: center;
align-items: center;
}
接下来,实现 用户页面的 顶部头像
先新建一个条件编译:
修改导航标题
user.json代码如下:
{
"navigationBarTitleText": "个人中心"
}
user.wxml结构代码如下:
(也可使用数据源 + wx-for 循环动态生成)
<!-- 下面是分隔线 -->
<view class='class_view_sperator'>
</view>
<!-- 下面是列表 -->
<view class='class_view_group class_border_radius'>
<navigator class='class_nav_cell class_arrow'>
<text>个人资料</text>
</navigator>
<navigator class='class_nav_cell class_arrow'>
<text>我的计划</text>
</navigator>
<navigator class='class_nav_cell class_arrow'>
<text>我的收藏</text>
</navigator>
</view>
<!-- 下面是分隔线 -->
<view class='class_view_sperator'>
</view>
<!-- 下面是列表 -->
<view class='class_view_group class_border_radius'>
<navigator class='class_nav_cell'>
<text>分享</text>
</navigator>
<navigator class='class_nav_cell class_arrow'>
<text>设置</text>
</navigator>
</view>
<!-- 下面是分隔线 -->
<view class='class_view_sperator'>
</view>
<!-- 下面是列表 -->
<view class='class_view_group class_shadow class_border_radius'>
<navigator class='class_nav_cell class_arrow'>
<text>留言本</text>
</navigator>
<navigator class='class_nav_cell class_arrow'>
<text>实用工具</text>
</navigator>
<navigator class='class_nav_cell'>
<text>关于我们</text>
</navigator>
</view>
样式代码如下:
/* ================ */
/* 列表 */
.class_view_group {
font-size: 16px;
color: #333;
background-color: #fff;
}
.class_nav_cell {
border-bottom: 1rpx solid #eee;
padding:20rpx 30rpx;
}
效果如下:
单词列表 页面
english.wxml代码如下:
<!--pages/english/english.wxml-->
<button >
浏览1遍生词,然后开始「看图造词」
<!-- 还是先浏览一遍「看图造词」,然后开始生词列表 -->
</button>
<view class='class_item' wx:for="{{englishArr[currentPage-1]}}" wx:for-index="index" wx:for-item="english">
<image class='class_img' src='img/{{english.id}}.png' mode="widthFix">
</image>
<view class='class_view_body'>
<text class='class_text_word'>{{english.title}}</text>
<text class='class_text_wrong'>难度系数: {{english.hard}}</text>
</view>
<view class='class_view_rank'>
<view class="class_view_rank_bottom">
★★★★★
</view>
<view class="class_view_rank_top" style='width: {{english.hard * 20}}%;'>
★★★★★
</view>
</view>
</view>
<button >
浏览1遍生词,然后开始「看图造词」
<!-- 还是先浏览一遍「看图造词」,然后开始生词列表 -->
</button>
english.wxss代码如下:
/* pages/english/english.wxss */
page {
background-color: #fff;
}
.class_item {
padding: 10rpx 10rpx;
/* background-color: red; */
/* 图片,文字,评分 三者水平排列*/
display: flex;
/* 专门提供给 rank这个绝对定位 */
position: relative;
/* 底部线 */
border-bottom: 1rpx solid #eee;
}
/* 图片 */
.class_img {
width: 300rpx;
margin-right: 10rpx;
}
/* 正文 应该垂直排列*/
.class_view_body {
/* background-color: violet; */
/* 应该设置一个宽高 */
width:420rpx;
display: flex;
flex-direction: column;
/* 行高,不同字号会自动计算 */
line-height: 1.5;
/* 文字颜色 */
color: #ddd;
}
.class_text_word {
color:#444;
font-size: 28px;
}
/* 评分 为绝对定位 */
.class_view_rank {
color: #e2e2e2;
/* background-color: royalblue; */
position: absolute;
right:10rpx;
bottom: 10rpx;
}
/* 底层的星星为灰色, 不动 */
/* 顶层的星星为高亮, 绝对定位,宽度按百分比,overflow:hidden */
.class_view_rank_top {
color: #1782d2;
position: absolute;
top: 0;
/* 核心代码 */
overflow: hidden;
}
效果如下:
未完待续,下一章节,つづく