-
2018-07-15 00:00
- 10
- 50
- 0
<!-- 商品列表goodsList.vue -->
<template>
<div id="goodsList">
<div class="goodsListContainer">
<v-scroll :on-refresh="onRefresh" :on-infinite="onInfinite" :loading-text="loadingText" >
<div class="gootdsListMainss">
<div class="indexManuFactureListInfo" v-for="item in data" v-if="data.length!=0" @click="enterGoodDetail(item.id)">
<div class="indexManuFactureListInfoImg">
<img :src="url+item.imagePath" alt="">
</div>
<div class="indexManuFactureListInfoTitle">
{{item.name | ellipsis(25)}}
</div>
<div class="indexManuFactureListInfoSmallTitle">
{{item.subhead | ellipsis(10)}}
</div>
<div class="indexManuFactureListInfoTitlePrice">
¥{{item.price}}
</div>
</div>
<div class="noGoods" v-if="data.length==0">
<img src="../../static/img/noGoods.png" alt="">
</div>
</div>
</v-scroll>
</div>
</div>
</template>
<script>
import Scroll from './scrollMore.vue';
export default{
name:'goodsList',
components : {
'v-scroll': Scroll
},
data(){
return{
classifyId:'',
counter:1,
num : 10,
data:'',
url:this.GLOBAL.urlPath,
targetId:'',
loadingText:'',
pageStart : 0, // 开始页数
pageEnd : 0, // 结束页数
listdata: [], // 下拉更新数据存放数组
downdata: [], // 上拉更多的数据存放数组
datas:[1,2,3,4,5]
}
},
mounted(){
$(".commonfooter").css("display","none");
if (this.$route.query.classifyId) {
this.classifyId = this.$route.query.classifyId;
this.targetId = this.classifyId;
this.actionId = '5';
var data = {
n:"GoodsList",
s:"",
k:localStorage.getItem('userKey'),
q:{
a:this.actionId,
id:this.targetId,
pa:this.counter,
li:this.num,
}
};
var that = this;
$.ajax({
type : "POST",
url : that.GLOBAL.url,
data:{json:JSON.stringify(data)},
datatype:"json",
success:function(data){
var data = JSON.parse(data);
console.log(data)
if (data.q.s=='0') {
that.data = data.q.goodses;
}else{
alert(data.q.d)
}
}
})
}
if (this.$route.query.targetId) {
this.targetId = this.$route.query.targetId;
this.actionId = '2';
var data = {
n:"GoodsList",
s:"",
k:localStorage.getItem('userKey'),
q:{
a:this.actionId,
id:this.targetId,
pa:this.counter,
li:this.num,
}
};
var that = this;
$.ajax({
type : "POST",
url : that.GLOBAL.url,
data:{json:JSON.stringify(data)},
datatype:"json",
success:function(data){
var data = JSON.parse(data);
console.log(data)
if (data.q.s=='0') {
that.data = data.q.goodses;
}else{
alert(data.q.d)
}
}
})
}
$(".gootdsListMain").find('div:even').addClass('gootdsListMainOdd');
$(".yo-scroll").css("top","0");
$(".load-more").css("position",'static')
$(".load-more").css("bottom",'0')
this.$nextTick(()=>{
// 这里写jquery代码
$(function(){
$(".gootdsListMain").css("overflow-y","scroll");
})
})
},
methods:{
getList(){
var data = {
n:"GoodsList",
s:"",
k:localStorage.getItem('userKey'),
q:{
a:this.actionId,
id:this.targetId,
pa:this.counter,
li:this.num,
}
};
var that = this;
$.ajax({
type : "POST",
url : that.GLOBAL.url,
data:{json:JSON.stringify(data)},
datatype:"json",
success:function(data){
var data = JSON.parse(data);
console.log(data)
if (data.q.s=='0') {
that.data = data.q.goodses;
}else{
alert(data.q.d)
}
}
})
},
// getClassify(){
// var data = {
// n:"GoodsList",
// s:"",
// k:localStorage.getItem('userKey'),
// q:{
// a:this.actionId,
// id:this.targetId,
// pa:this.counter,
// li:this.num,
// }
// };
// var that = this;
// $.ajax({
// type : "POST",
// url : that.GLOBAL.url,
// data:{json:JSON.stringify(data)},
// datatype:"json",
// success:function(data){
// var data = JSON.parse(data);
// console.log(data)
// if (data.q.s=='0') {
// that.data = data.q.goodses;
// }else{
// alert(data.q.d)
// }
// }
// })
// },
enterGoodDetail(id){
localStorage.setItem("goodsId",id)
this.$router.push({path:'productDetails', query:{goodsId:id}});
// this.$router.push({name:'productDetails', params:{goodsId:id}})
},
onRefresh(done){
this.counter = 1;
this.getList();
done();
},
onInfinite(done){
if (this.data.length<this.num) {
return false;
}
this.counter++;
var data = {
n:"GoodsList",
s:"",
k:localStorage.getItem('userKey'),
q:{
a:this.actionId,
id:this.targetId,
pa:this.counter,
li:this.num,
}
}
var that = this;
$.ajax({
type : "POST",
url : that.GLOBAL.url,
data:{json:JSON.stringify(data)},
datatype:"json",
success:function(data){
var data = JSON.parse(data);
if (data.q.s=='0') {
that.data = that.data.concat(data.q.goodses);
if (data.q.goodses.length<that.num) {
console.log("1")
that.loadingText='加载完毕……';
return;
}
done()
}
// this.items=this.items.concat([6,6,6,6,6,6,6,6,6,6,6])
}
})
}
}
}
</script>
<style rel="stylesheet/scss" scoped lang="scss">
html,body,#app,#goodsList,.goodsListContainer{
width: 100%;
height: 100%;
}
.goodsListContainer{
display:-webkit-box;
/*! autoprefixer: off */
-webkit-box-orient: vertical;
/* autoprefixer: on */
}
.gootdsListMainss{
width: 90%;
margin: 0 auto;
-webkit-box-flex:1;
// overflow-y:scroll;
}
.indexManuFactureListInfo{
float: left;
width: 49%;
min-height:30.7*0.085rem;
}
.indexManuFactureListInfoImg{
width: 100%;
height: 16.2*0.085rem;
background: #f2f3fb;
}
.indexManuFactureListInfoImg img{
height: 100%;
width: 100%;
//margin: 1.8*0.085rem auto;
}
.indexManuFactureListInfoTitle{
font-family:PingFangSC-Regular;
font-size:1.4*0.085rem;
color:#343434;
/* text-align:left; */
margin-top: 1.6*0.085rem;
line-height: 2*0.085rem;
height: 3.8*0.085rem;
width:100%;
}
.indexManuFactureListInfoSmallTitle{
margin-top: 1*0.085rem;
font-size:1*0.085rem;
color:#929292;
width:100%;
height: 4.6*0.085rem;
}
.indexManuFactureListInfoTitlePrice{
/* margin-top: 3.2*0.085rem; */
font-size:1.4*0.085rem;
color:#525252;
}
.noGoods{
width:50%;
height:100%;
margin:30% auto;
}
.noGoods img{
width:100%;
height:auto;
}
.indexManuFactureListInfo:nth-child(odd)
{
margin-right: 2%;
}
.commonfooter{
display: none;
}
</style>0
打赏
收藏
点击回答
您的回答被采纳后将获得：提问者悬赏的 10 元积分
- 共 0 条
- 全部回答
-
妳可知、永遠有多遠 普通会员 1楼
在 Vue 项目中实现上拉加载功能，可以使用 Vue Router 来控制路由。以下是一个简单的示例，说明如何在 iOS 上实现上拉加载：
- 首先，在你的 Vue 项目中安装 Vue Router。你可以使用 npm 或 yarn 安装：
bash npm install vue-router或者
bash yarn add vue-router- 在你的 Vue 项目中，创建一个名为
App.vue的文件，并在其中添加以下代码：
```html
```
-
在你的
App.vue文件中，添加一个名为items的数组，该数组包含了你的数据源。 -
使用
v-data-table组件来创建数据表格。在data()函数中，定义items数组，并将其传递给dataTable()函数。 -
在
App.vue文件中，添加一个名为sort和sortDesc的方法，用于控制排序顺序。 -
使用
v-data-table-column组件来定义表格列的属性和类型。 -
在你的 Vue 项目中运行项目，你应该能看到一个上拉加载的表格。当用户滚动时，表格将自动加载新的数据。
注意：这个示例假设你的 Vue 项目已经使用了 Vue Router，并且在你的
App.vue文件中使用了data()函数。如果你使用的是其他框架，你可能需要在你的代码中使用其他方法来实现上拉加载。
更多回答
网站公告
- 扫一扫访问手机版
回答动态
- 神奇的四哥：发布了悬赏问题阿里云幻兽帕鲁服务器更新之后。服务器里面有部分玩家要重新创建角色是怎么回事啊？预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题函数计算不同地域的是不能用内网吧？预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题ARMS可以创建多个应用嘛?预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题在ARMS如何申请加入公测呀？预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题前端小程序接入这个arms具体是如何接入监控的，这个init方法在哪里进行添加？预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题阿里云幻兽帕鲁服务器刚到期，是不是就不能再导出存档了呢？预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题阿里云幻兽帕鲁服务器的游戏版本不兼容 尝试更新怎么解决？预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题阿里云幻兽帕鲁服务器服务器升级以后 就链接不上了，怎么办？预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题阿里云幻兽帕鲁服务器转移以后服务器进不去了，怎么解决？预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题阿里云幻兽帕鲁服务器修改参数后游戏进入不了，是什么情况？预计能赚取 0积分收益
- 回到顶部
- 回到顶部