1.关于mock的使用
第一步：先到Mock官网（http://mockjs.com/）上面熟悉一下基本用法
第一步：具体使用实例：
- 下载wxMock.js和mock.js文件 下载地址：https://github.com/webx32/WxMock
- 参考git上的使用方法，使用的时候值得注意的点：需要在使用模拟接口的js文件中用require引入对应的接口：
如：接口文件：home.js
/**视频详情获取接口 */
var Mock=require('./WxMock.js')
var Random = Mock.Random;
var videoDetail = Mock.mock('https://tangxinyu.com/videoDetail',{
"codeText": "请求成功",
"code": 200,
"data": {
videoInfo: {
author:"阿兰若",
commentcount:12435,
date:"2019-11-07",
id:233,
playCount:"24.7万",
videoSrc:Random.image('200X150',Random.color(),"视频详情"),
videoTitle:"世界上最美的童话镇，你要去看吗？请带我……"
}
}
})
export default {
navList,
swiperList,
videoList,
videoDetail
}
使用接口文件：index.js
var videoDetail=require('../../utils/home.js')
getCurentVideo(){
var that=this;
wx.request({
url: 'https://tangxinyu.com/videoDetail',
success(res){
if(res.code==200){
that.setData({
videoInfo: res.data.videoInfo
})
}
console.log("res",res)
}
})
},
2.关于页面跳转
<navigator url="../detail/detail?id={{index}}" class="video_item" wx:for="{{videoLists}}" wx:key="{{index}}">
此处需要注意的是 url属性中的传参方式：url="../detail/detail?id={{index}}"
其他使用可参考官网：https://developers.weixin.qq.com/miniprogram/dev/component/navigator.html
3.关于css使用总结：
- 导航栏：对于块级元素想要使其显示成一行最简单可以使用：display:inline-block,不用使用display:flex。如：
<style>
.item{
display: inline-block;
padding: 0 20px;
}
</style>
<div>
<div class="item">条目1</div>
<div class="item">条目2</div>
<div class="item">条目3</div>
<div class="item">条目4</div>
</div>
不加样式效果图：
加样式后效果图：
其他：white-space: nowrap; 不因空格换行
- 视频列表：弹性布局列表使用
.video_wrap{
display: flex; /**1.设置弹性盒子*/
/* 换行 */
flex-wrap: wrap;/**2.超出行宽自动换行*/
padding: 10rpx;
/* 空隙显示在中间 */
justify-content: space-between;/**3.空隙中间显示*/
}
.video_item{
width: 48%;/**可通过调整子元素宽度占比来控制一行显示几个子元素*/
margin-top: 20rpx
}
示例：
<style>
.wrap{
display: flex;
width: 400px;
justify-content: space-between;
flex-wrap: wrap;
border: 1px solid rgb(51, 142, 247)
/* overflow: hidden */
}
.item{
background-color: #4c4c;
border:1px solid #4c4c4c;
height: 100px;
width: 40%;
margin-top: 20px
}
</style>
<div class="wrap">
<div class="item">item1</div>
<div class="item">item2</div>
<div class="item">item3</div>
<div class="item">item4</div>
</div>
未添加123点样式图：
效果图：
- relative+absolute定位的使用：使父元素具有盒子特性，盒子内部样式不受外部影响
示例代码：
.wrap {
display: flex;
width: 400px;
justify-content: space-between;
flex-wrap: wrap;
border: 1px solid rgb(51, 142, 247)
}
.item {
background-color: #4c4c;
border: 1px solid #4c4c4c;
height: 100px;
width: 40%;
margin-top: 20px;
position: relative
}
.item_head {
position: absolute;
top: 0;
text-align: center;
width: 100%
}
.item_foot {
position: absolute;
bottom: 0;
text-align: center;
width: 100%
}
<div class="wrap">
<div class="item">
<div class="item_head">盒子头部文字</div>
<div class="item_foot">盒子底部文字</div>
</div>
<div class="item">item2</div>
<div class="item">item3</div>
<div class="item">item4</div>
</div>
未添加样式效果图：
添加样式后效果图：
此项目中使用场景：在广告图片上显示一些短的信息详情
- 文字显示省略隐藏问题
.video_title{
font-size: 30rpx;
display: -webkit-box;
white-space: normal;
/* 超出显示…… */
text-overflow: ellipsis;
word-wrap: break-word;
/* 为了实现文字超出设置行显示……该效果，它需要组合其他外来的WebKit属性。常见结合属性：
display: -webkit-box; 必须结合的属性 ，将对象作为弹性伸缩盒子模型显示 。
-webkit-box-orient 必须结合的属性 ，设置或检索伸缩盒对象的子元素的排列方式 。
text-overflow，可以用来多行文本的情况下，用省略号“...”隐藏超出范围的文本 。 */
/* 不兼容IE和firefox */
/* 限制文本显示行数 */
-webkit-line-clamp: 2;
/*垂直排列子元素 兼容safari\opera\chrome */
-webkit-box-orient: vertical;
/* 兼容firefox */
-moz-box-orient: vertical;
}
演示示例：
.item1 {
width: 300px;
display: -webkit-box;
border: 1px solid #3f3f;
-webkit-line-clamp: 1;
text-overflow: ellipsis;
word-wrap: break-word;
white-space: normal;
/*垂直排列子元素 兼容safari\opera\chrome */
-webkit-box-orient: vertical;
/* 兼容firefox */
-moz-box-orient: vertical;
/* 超出部分隐藏 */
overflow: hidden
}
.item2 {
width: 300px;
/* 兼容firefox */
display:-moz-box;
display: -webkit-box;
border: 1px solid #3f3f;
margin-top: 10px;
-webkit-line-clamp: 2;
text-overflow: ellipsis;
word-wrap: break-word;
white-space: normal;
/*垂直排列子元素 兼容safari\opera\chrome */
-webkit-box-orient: vertical;
/* 兼容firefox */
-moz-box-orient: vertical;
/* 超出部分隐藏 */
overflow: hidden
}
<div class="item1">
一行文本：长江、尼罗河、亚马孙河、多瑙河昼夜不息、奔腾向前，尽管会出现一些回头浪，尽管会遇到很多险滩暗礁，但大江大河奔腾向前的势头是谁也阻挡不了的。
</div>
<div class="item2">
二行文本：长江、尼罗河、亚马孙河、多瑙河昼夜不息、奔腾向前，尽管会出现一些回头浪，尽管会遇到很多险滩暗礁 ，但大江大河奔腾向前的势头是谁也阻挡不了的。
</div>
未加样式图：
加上样式图：
但是由于兼容性问题，不推荐使用该方法实现多行文字超出显示……问题
解决办法：
div {
position: relative;
/* 可通过max-height和line-height控制显示行数 */
line-height: 20px;
max-height: 40px;
/*注意： 超出一定要隐藏 */
overflow: hidden;
}
div::after {
content: "...";
position: absolute;
bottom: 0;
right: 0;
padding-left: 40px;
/* 使用backgorund属性用渐变背景色遮盖行尾部分字体，用以...代替 */
background: -webkit-linear-gradient(left, transparent, #fff 55%);
background: -o-linear-gradient(right, transparent, #fff 55%);
background: -moz-linear-gradient(right, transparent, #fff 55%);
background: linear-gradient(to right, transparent, #fff 55%);
}
linear-gradient的兼容性：
效果图：
- display:flex+flex:num的使用，使用场景：横排或竖排(用flex-direction调整)时使父元素中的子元素按比例平分父元素所占空间
示例代码：
.wrap {
width: 400px;
border: 1px solid #4c4c4c;
display: flex
}
.item1{
background-color: #d3ec77;
flex: 1
}
.item2{
background-color: #dc83ee;
flex: 3
}
.item3{
background-color: #f3c853;
flex: 4
}
<div class="wrap">
<div class="item1">1份</div>
<div class="item2">3份</div>
<div class="item3">4份</div>
</div>
样式未添加效果图：
样式添加效果图：
本次学习总结完毕，不足之处请指正
浙公网安备 33010602011771号