Vue.js通过api数据点击跳到相对应的页数
来源:互联网 发布:淘宝12周年活动报名 编辑:程序博客网 时间:2024/05/17 11:37
HTML代码:
这是分类的页面,因为分类这边没有数据
<div class="container">
<div class="row Lists" id="Lists">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12" v-for="list in lists">
<a href="../html/details.html?page=1"><span>Toan bo san pham</span><span><img src="../images/enter.png"></span></a>
</div>
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<a href="../html/details.html?page=2"><span>Volkswagen</span><span><img src="../images/enter.png"></span></a>
</div>
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<a href="../html/details.html?page=3"><span>SARATOGA</span><span><img src="../images/enter.png"></span></a>
</div>
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<a href="../html/details.html?page=4"><span>Horien</span><span><img src="../images/enter.png"></span></a>
</div>
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<a href="../html/details.html?page=5"><span>Nate</span><span><img src="../images/enter.png"></span></a>
</div>
</div>
</div>
JS代码:
这时候点击分类中的任何一个,就会跳到商品详情相对应的页面,在商品详情的js代码中插入
window.onload = (function () {
//截取数据页数的代码,有两种方法;
//这是方法1,我注释掉了
// var searchURL = window.location.search;
// searchURL = searchURL.substring(1,searchURL.length);//截取被点击相对应的页数
// var targetPageId = searchURL.split("?")[0].split("=")[1];
//方法2
var searchURL=location.href.substring(location.href.indexOf("=")+1,location.href.length);
var targetPageId=searchURL.substring(1,searchURL.indexOf("?"));//截取被点击相对应的页数
// alert(targetPageId);
var vm = new Vue({
el: "#product",
data: {
details: {}
},
mounted: function () {
this.$nextTick(function () {
this.$http.jsonp('http://thanbach.com/YXShoppingMallApp/exclusiveShop_getExclusiveShopGoodsByType.jhtml',
{
params: {
"f_sId": '2968d399-4402-4baf-b407-2b329f2a2c02',
"f_sType": 18,
"page": targetPageId
}
}).then(function (res) {
vm.details = res.data.rows;
});
})
}
});
});
这是我点击第一个分类,出现相对应的数据.
- Vue.js通过api数据点击跳到相对应的页数
- 类似于微信功能点击跳转到相对应的界面,应用到hide,show
- Androd中 listView点击每一个 Item里面的状态,跳转到相对应的不同 界面
- ios中解析获取pdf目录及相对应的页数
- js生成html---查询数据后自动生成相对应的html展现内容
- 传参小例子--点击哪个按钮显示相对应的盒子
- (js方法)通过给的api接口用ajax获取到接口数据
- Linux通过进程ID得到相对应的程序
- 如何用Vue.js获取api数据
- 与JS的encodeURIComponent相对应的PHP函数
- app根据URL跳转到AppStore相对应的软件
- vsftpd 多用户登录到相对应的目录方法
- 点击地面实现生成不规则图形然后生成相对应的几何图形
- 显示相对应的图案
- js获取鼠标点击事件的相对位置
- 通过普通表格的checkbox列来获得相对应的记录
- vue.js实现点击事件
- [cocos2d-x] 让精灵响应触摸 并把方向旋转到相对应的角度
- 【微信小程序】自定义模态对话框实例
- Spring Data MongoDB 三:基本文档查询(Query、BasicQuery)(一)
- 数组与指针分析
- Android自定义动画之翻书效果带背影
- MSM8909 平台camera移植
- Vue.js通过api数据点击跳到相对应的页数
- linux docker安装 制作Elasticsearch容器镜像 并上传docker hub
- 双击退出app问题(System.exit(0)),服务重启
- java数据类型相互转换工具类
- jquery attr() 方法
- 架构设计:负载均衡层设计方案(4)——LVS原理
- sql 添加级联删除和级联更新
- Mysql获取表更新时间update_time注意事项
- 以音乐产品为例,谈如何才能做出好产品