微信小程序_笔记_03_tabbar_条件编译_生词列表_个人中心

微信小程序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 .

自己来实现一下栅格式布局

代码如下:

39663首页3发现3收藏3我的

效果如下:

关于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：

1. 当设置 position 为 top 时，将不会显示 icon
2. tabBar 中的 list 是一个数组，只能配置最少2个、最多5个 tab，tab 按数组的顺序排序。

属性说明：

其中 list 接受一个数组，数组中的每个项都是一个对象，其属性值如下：

如果把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. 手动点击首页的九宫格中的 按钮进行跳转

代码如下:

动漫推荐

下面开始实现动漫列表菜单项中的卡片效果

anime.json 修改导航栏标题(注意: 这儿的根节点就是window)

如下:

{"navigationBarTitleText": "补番记录"
}

anime.wxml文档结构如下:

我们仍未知道那天所看见的花的名字2010年4月《我们仍未知道那天所看见的花的名字》(あの日見た花の名前を僕達はまだ知らない,未闻花名,那朵花),制作:A-1 Pictures,监督:长井龙雪,编剧:冈田麿里,片尾曲《Secret Base ~君がくれたもの》,哭成狗~  

如何使用了循环生成列表的话, 则代码如下:

{{anime.titleFull}}{{anime.pubtime}}{{ anime.content }}~  

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 循环动态生成)

个人资料我的计划我的收藏



分享设置



留言本实用工具关于我们

样式代码如下:

/* ================  */
/* 列表 */
.class_view_group {font-size: 16px;color: #333;background-color: #fff;
}
.class_nav_cell {border-bottom: 1rpx solid #eee;padding:20rpx 30rpx;
}

效果如下:

单词列表 页面

english.wxml代码如下:

浏览1遍生词,然后开始「看图造词」
{{english.title}}难度系数: {{english.hard}}★★★★★★★★★★

浏览1遍生词,然后开始「看图造词」

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;
}

效果如下:

未完待续,下一章节,つづく

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！