vue 移动端加载更多分页组件_移动端分页vue

content="width=320, user-scalable=no, initial-scale=1.0, maximum-scale=1.3, minimum-scale=1.0">

618年中大促

6535 资料审核成功

6535 资料审核成功

6535 资料审核成功

6535 资料审核成功

.bgmian{

width: 25%;

float: left;

}

.bgmian div{

width: 300px;

height: 100px;

background: url(img/资料审核成功.png);

margin: auto;

}

.bgmian span{

display: block;

text-align: center;

margin: auto;

}

var doc = document,

rootEl = doc.documentElement;

var app = new Vue({

el: "#app",

data() {

return {

Eachmax:12,

banimg:"",

finishedText: '没有更多了',

loading: false,

finished: false,

isshowloading: false,

searchvalue: null,

twoProduct:[],

list:[],

//api: "https://ha.tongchengxianggou.com/api/",

api: "http://192.168.26.132:8080/web/",

//api: "http://192.168.124.66:8888/web/api/",

cartNum: 0,

img: "",

flage: false,

top: 0,

left: 0,

cartTop: 500,

cartleft: 400,

pageIndex: 0

}

},

methods: {

addToCart(e){

var addBtn = e.target,//添加按钮

cartBox = doc.querySelector('.ttt'),//购物车框

startPoint = addBtn.getBoundingClientRect(),//起点位置

endPoint = cartBox.getBoundingClientRect(),//终点位置

startX = startPoint.left,//起点X坐标

startY = startPoint.top,//起点Y坐标

endX = endPoint.left - startX,//终点X坐标

endY = startY - endPoint.top,//终点Y坐标，Y坐标轴跟常见的平面坐标系相反

x1 = endX > 0 ? 10 : -10,

y1 = endY > 0 ? 0.05 : -0.005,

a = ( x1 * endY - y1 * endX )/( endX * endX * x1 - x1 * x1 * endX ),

b = (y1 - a * x1 * x1) / x1;

addBtn = cartBox = startPoint = endPoint = null;

var ball = this.createBall(),//创建一个要添加到购物车的圆球

/*

* 圆球移动的坐标

*/

x = 0,

y = 0,

delay = 500,//动画持续时间

timeSpace = 20,//圆球移动间隔

step = endX / ( delay / timeSpace );

var timer = setInterval(function(){

if(Math.abs(x) >= Math.abs(endX)){//水平方向移动超过最大距离则取消移动，到达购物车

clearInterval(timer);

ball.parentNode && ball.parentNode.removeChild(ball);//移除圆球

ball = null;

}else{

x += step;//水平移动

y = a * x * x + b * x;//垂直移动

// console.log(y);

ball.style.top = startY - y + 'px';

ball.style.left = x + startX + 'px';

}

},timeSpace);

},

createBall(){

var ball = doc.createElement('div');

ball.className = 'box';

doc.getElementById("app").appendChild(ball);

return ball;

},

nowBuy(id, stock, e) {

if (stock > 0) {

if (window.__wxjs_environment === 'miniprogram'){

wx.miniProgram.navigateTo({url: '../shop/product?id='+id});

} else {

alert("buy?" + id);

}

}

},

getUrlParam(url, name){

var pattern = new RegExp("[?&]" + name +"\=([^&]+)","g");

var matcher = pattern.exec(url);

var items = null;

if(matcher != null){

try{

items = decodeURIComponent(decodeURIComponent(matcher[1]));

}catch(e){

try{

items = decodeURIComponent(matcher[1]);

}catch(e){

items = matcher[1];

}

}

}

return items;

},

newAddCart(id, stock, event) {

console.log(stock)

if (stock > 0) {

var url = window.location.href;

var uuid = this.getUrlParam(url, 'uuid');

//uuid = 'C8068E06-8DA9-4E1A-9630-47BDE247BB13';

//uuid = '984db000-a3f0-4e71-a723-1555a66309e1';

if (uuid) {

this.$http.post(

''+ this.api +'user/cart/newAddDo',

{

id:id,

uuid: uuid,

},

{

emulateJSON:true

}

)

.then(function(res){

if(res.body.state == 'login'){

if (window.__wxjs_environment === 'miniprogram'){

wx.miniProgram.navigateTo({url: '../login/login'});

} else {

alert("login");

}

} else {

this.addToCart(event);

if (res.body.code == 0) {

this.cartNum = res.body.enableCount;

}

if (res.body.code == 1) {

// 库存不足

}

if (res.body.code == 2) {

// 商品下架

}

if (res.body.code == 3) {

// 售罄

}

}

}, function(res){

console.log(err)

});

} else {

if (window.__wxjs_environment === 'miniprogram'){

wx.miniProgram.navigateTo({url: '../login/login'});

} else {

alert("login");

}

}

}

},

goCart() {

if (window.__wxjs_environment === 'miniprogram') {

wx.miniProgram.switchTab({url: '../index/cart'});

} else {

alert("cart");

}

},

SearHount(){

this.list=[];

this.getlist()

},

onLoad() {

console.log("ssss")

var that = this;

that.getlist()

},

getlist() {

var self= this;

this.isshowloading = true;

this.$http.post(

''+ this.api +'api/v3/newUserZone/allNewUserZoneProductInfos',

{

productName:this.searchvalue,

page: this.pageIndex+1,

rows: 1000

},

{

emulateJSON: true

})

.then(function(res){

this.isshowloading = false;

if (res.body.code == 200) {

var currenlen = res.body.data.newUSerZoneProductInfos.length;

console.log(res.body.data.newUSerZoneProductInfos.length);

//this.list = res.body.data.newUSerZoneProductInfos;

this.list = this.list.concat(res.body.data.newUSerZoneProductInfos);

this.loading = false;

self.pageIndex++;

console.log(res.body.data.total)

if (currenlen < 12) {

self.finished = true;

this.loading = false;

}

}

}, function(err){

console.log(err);

this.isshowloading = false;

});

},

},

created() {

var url = window.location.href;

var uuid = this.getUrlParam(url, 'uuid');

if (uuid) {

this.$http.post(

''+ this.api +'api/v3/newUserZone/newUserZoneInfo',

{

uuid: uuid

},

{

emulateJSON: true

})

.then(function(res){

if (res.status === 200) {

this.cartNum = res.data.data.cartNum;

this.banimg = res.data.data.newUSerZoneInfo.banner;

}

}, function(err){

console.log(err);

});

}

// 监听滑动到底部

/*

var that = this;

window.onscroll = function(){

// scrollTop 滚动条滚动时，距离顶部的距离

var scrollTop = document.getElementById('scroll_wp').scrollTop;

// windowHeight 可视区的高度

var windowHeight = document.documentElement.clientHeight || document.body.clientHeight;

// scrollHeight 滚动条的总高度

var scrollHeight = document.documentElement.scrollHeight || document.body.scrollHeight;

// 滚动条到底部的条件

if(scrollTop + windowHeight == scrollHeight){

// 加载数据

that.getlist();

}

}

*/

},

mounted(e){

/* add elements */

function xiqiu(productId, totalNum){

}

}

});