vue移动端项目
1.移动端规范
转换单位rem，设置媒体查询
为什么使用rem？
移动端最麻烦的是，不同分辨率适配！
iPhone6 为标准 750*1334 手机端的4px等于电脑端的1px 2倍关系 @2
ihone6s 1242*2208 手机端9px=1px 3倍关系@3
一倍关系就是pc端的
手机是视网膜屏
2.创建项目
cmd->vue create 项目名 目前选择2.0版本
3.vue.comfig.js的配置
module.exports = {
devServer: {
open: true,//自启动
port: '5200',//端口号
host: '0.0.0.0'//域名
}
}4.配置文件夹
views 配置组件
router 配置路由 index.js 配置主入口文件夹
5.配置公共css，设置媒体查询
*{
margin: 0;
padding: 0
}
ul,li{
list-style: none;
}
a{
text-decoration: none;
color: #333
}
a:hover{
color: #f55
}
input,button{
border: 0;
outline: 0 //轮廓线
}
/* 设置基础字体大小 */
html,body{
font-size: 10px !important;
}
/* 基准 375px 屏幕 i6/7/8*/
/* 1rem=10px */
@media screen and (min-width:375px){
html,body{
font-size: 10px !important;
}
}
/* 基准 414px 屏幕 i6s/7s/8s*/
@media screen and (min-width:414px){
html,body{
/* 10*414/375=11.04 */
font-size: 11.04px !important;
}
}
/* 基准 768px 屏幕 ipad */
@media screen and (min-width:768px){
html,body{
/* 10*768/375=20.48 */
font-size: 20.48px !important;
}
}5.配置底部公共组件 tabbr
- 点击li设置路由跳转
- 移动端 手触摸的最小区域是44px 2.2rem
-
路由跳转字体图标选中
如果跳转，出现
没有跳转，出现这个
-
.router-link-active{} 选中组件设置样式
-
router-view放在app.vue中
6.路由元信息 配置mate字段
判断是否显示
tabbr是公共样式，但是在详情页等等一些页面还是不想让它显示的就要设制mate字段。组件进行判断，如果当前路由下mate为ture，就让其组件显示
routes: [{
path: "/home",
component: () => import("../views/home/home.vue"),
meta: { //配置路由元信息
erge: true //可以根据条件的真假，来显示或者隐藏tabbar这个组件
}
}
7. ly-tab移动端的可触摸滑动具有回弹效果的可复用Vue组件npm ly-tab
下载 打开cmd
npm i ly-tab -Svue项目主入口 main.js引入
import LyTab from 'ly-tab'
Vue.use(LyTab)使用
data () {
return {
selectedId: 0,
items: [
{label: '首页'},
{label: '推荐'},
{label: 'Android'},
{label: '前端'},
{label: '后端'},
{label: 'iOS'},
{label: '产品'},
{label: '人工智能'},
{label: '设计'}
],
options: {
activeColor: '#1d98bd'//选中的颜色
// 可在这里指定labelKey为你数据里文字对应的字段名
},
}
}需求：怎么点击label的时候下面跳转到相应的组件？
1设置一个内置组件
2.在data中，定义组件一开始为homeIndex
homeComponent:"homeIndex"//让组件一开始为homeIndex3. 这个组件中有一个chage事件 可以获取组件的值和索引，依照索引值判断组件出现的是谁
lytab(item,index){
//console.log(item)值
//console.log(index)索引
if(index==0){
this.homeComponent:"homeIndex"
}
}8.编程式导航
点击分类，跳转路由，就需要编程式导航
//点击事件
toCatagroy(){
this.$router.push('/要跳转的路由')
}ok！复习一下这个知识点
- this.$router.push(path)：添加新路由
- （2）this.$router.replace(path)：用新路由替换当前路由
- （3）this.$router.back()：返回上一个路由； 原页面表单中的内容会丢失;参数空，后退；为0，刷新；为1，前进
- （4）this.$router.go(-1)：返回上一个记录路由；原页面表单中的内容会保留; 参数-1，后退+刷新；为1，前进
9.轮播图 mint-ui swipe
下载 cmd
npm install vue-cli -g 引入main.js
import MintUI from 'mint-ui'
import 'mint-ui/lib/style.css'
Vue.use(MintUI)使用 没有样式不显示
图片1
图片2
图片3
需求：当轮播图切换的时候,背景颜色跟着改变!
change事件
轮播图切换时会触发change事件，参数为切入轮播图的索引
bgchange(index){
//背景颜色的变量名 //颜色数组
this.bacolor=this.bgcolor[index]
}10.文字轮播
//动态的绑定动画
原理：上去一个删除一个加到末尾
data(){
return{
timer:null，
flag:false,
}
}
methos:{
scrollNews(){
//获取dom元素 原理：上去一个删除一个加到末尾
let domul=this.$refs.list;
domul.style.top="-4px"//一个li的高度
this.flag=!this.flag//设置一个开关，只有上去的时候执行动画
setTimeout(()=>{
this.newList.push(this.newList[0])
this.newList.shift()
domul.style.top="0"
this.flag=!this.flag//下来的时候动画不显示
},500)
}
}
mounted(){
this.timer=setInterval(this.scrollNews,3000)
//为什么定义timer？因为组件销毁的时候定时器要清除，但是函数无法直接获取，所以需要定义一个data
}
destroyed(){
clearInterval(this.timer)
}为什么定义timer？
因为组件销毁的时候定时器要清除，但是函数无法直接获取，所以需要定义一个data
设置过渡效果的时候要注意！
只有在上去的时候添加动画，下来的时候直接切换，不需要动画，所以需要一个开关
一定要清除定时器！！！
11. 秒杀 对秒杀的总结
12.ul太长，超出屏幕最大宽度，怎么可以使其左右滚动？
在最外面的盒子上设置 overflow-y:auto;