H5 分页功能，断点设置，日志记录，调用api接口等功能

1：H5是自动编译的， 在前端可以设置断点：用 debugger;来设置调式

 

2:代码中出现this.$route.query.backURL  这样的代码。

this.$route.query 是指  浏览的网址 ？后面需要带上参数  backURL   ，可以取到参数 backURL   的值。

例如：http://localhost:9999/user/Login ？backURL  =center

 

3: 后退一页的代码

goback() {

javascript: history.go(-1)

}，

4:记录日志：

console.log("测试信息")

5：前端页面调用服务接口方法

// 接口的参数

var params = new this.URLSearchParam()

params.append('phoneNo', this.UserPhone)

params.append('captcha', this.FJM1)

params.append('validateCode', this.YZM)

params.append('black_box', encodeURI(_fmOpt.black_box))

params.append('ip_address', this.ip_address)

 

// 快捷登录 GOQuickLogin 方法名称

this.$http.post(api.GOQuickLogin(), params.toParam()).then(res => {

if (res.Result == true)

{

 

}

接口调用如下，

 

6: 页面访问路径跟 文件实际路径之间的 路由映射关系

 

7：div页面里面调用js方法  用@click

8：if语句判断

例如：activeTab 参数等于 tab2

<div v-if="activeTab === 'tab2'">

 

9：for循环    v-for  里面SortList 为数组，item是循环后的单条信息。 index 是相当于key，第几行数

<div v-on:click="ChangeSort(index)" v-for=" (item,index) in SortList " :key="index" v-bind:class="{ GreeenFont: SortID == index }" class="TopMenuList">

10： 判断是否返回上一页，如果是直接ulr访问的该页，没有url页面，那么就无法找到上一页信息，这个时候就需要指定跳转页面。

if(window.history.length <= 1){

window.location.href = window.location.origin +"/user/UserCenter"

}

else{

this.goback()

}

11：H5分页功能。当下滑手机时，自动加载数据

//重置滚动监听状态 在activated初始化的时候需要调用改代码。

window.addEventListener('scroll', this.loadMore);

 

 

loadMore方法具体实现如下：

loadMore() {

if (this.stop == true) {

window.removeEventListener('scroll', this.loadMore)

return

}

var innerHeight = window.innerHeight;

// 判断是否需要加载

// document.body.offsetHeight;返回当前网页高度

if (window.scrollY + innerHeight + 200 > document.body.offsetHeight) {

this.searchHotel();

}

},

2：获取手机的 高度 跟宽：

window.scrollY    宽度

window.innerHeight;  高度