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>
样式未添加效果图:
样式添加效果图:
本次学习总结完毕,不足之处请指正