html 设置移动端页面滚动,a.html · 焚心/移动端页面上下滚动加多页面上拉加载功能及mescroll插件的使用

我的

交易记录
可兑换签纸贺
兑换历史

活动名称：{{item.title}}
有效期至：{{item.time}}
合计可用额：

{{item.price}}元

去兑换
交易记录：

兑换10.00

/

充值1000.00
{{item.time}}

{{item.price}}

卡号：11111111111111

面值：1000元

有效期至：2020-07-31

可兑换金额：

1000元

去兑换

右箭头

兑换时间：2020-07-15 23：11：24

活动名称：积分兑换活动

兑换卡号：1231231231231231

金额：2300元

查卡密/去使用截止至：2020-12-31

使用说明

右箭头

去使用

卡号：

:data-val="item.cardInfo.card">

密码：

:data-val="item.cardInfo.password">

有效期至：{{item.cardInfo.expireDate}}

兑换时间：2020-07-15 23：11：24

金额：2300元

活动名称：暑期福利

查卡密/去使用截止至：2020-12-31

发送到邮箱

X 1

使用说明

右箭头

var Vue = new Vue({

el: "#change_history_page",

data: {

obj: {

jl_s: false

sl: "上拉加载数据~",

sll: "上拉加载数据~",

slll: "上拉加载数据~",

isEmail: true,

num: 0,//点击导航，显示对应的列表

jl_s: false,//点击交易记录列表，是否显示交易时间

isIpone: true,//手机号登陆和卡号登录显示，切换,false对应的是可兑换千纸鹤

timer: [

{ id: 1, flg: false, time: ' 2020-05-30 21:05:21', price: '- 200.00', flg: false },

{ id: 2, flg: true, time: ' 2020-05-30 21:05:21', price: '+ 1000.00', flg: true }

jy_data: [

{ id: 1, title: '暑期福利', time: '2020-03-01', price: 600 },

{ id: 1, title: '暑期福利', time: '2020-03-01', price: 600 }

historyData: [

{

"cardInfo": {

"brandImg": "http://suo.im/6kBZbP",

"brandName": "淘票票",

"goodsName": "淘票票电子卡100元",

"expireDate": "2022-02-28",

"goodsType": "01",

"goodsId": "10086",

{

"cardInfo": {

"brandImg": "http://suo.im/6kBZbP",

"brandName": "美团",

"goodsName": "美团电子卡100元",

"expireDate": "2022-02-28",

"goodsType": "02",

"goodsId": "100876"

}

{

"cardInfo": {

"brandImg": "http://suo.im/6kBZbP",

"brandName": "美团",

"goodsName": "美团电子卡100元",

"expireDate": "2022-02-28",

"goodsType": "02",

"goodsId": "100876"

}

{

"cardInfo": {

"brandImg": "http://suo.im/6kBZbP",

"brandName": "淘票票",

"goodsName": "淘票票电子卡100元",

"expireDate": "2022-02-28",

"goodsType": "01",

"goodsId": "10086",

{

"cardInfo": {

"brandImg": "http://suo.im/6kBZbP",

"brandName": "美团",

"goodsName": "美团电子卡100元",

"expireDate": "2022-02-28",

"goodsType": "02",

"goodsId": "100876"

}

{

"cardInfo": {

"brandImg": "http://suo.im/6kBZbP",

"brandName": "美团",

"goodsName": "美团电子卡100元",

"expireDate": "2022-02-28",

"goodsType": "02",

"goodsId": "100876"

}

{

"cardInfo": {

"brandImg": "http://suo.im/6kBZbP",

"brandName": "淘票票",

"goodsName": "淘票票电子卡100元",

"expireDate": "2022-02-28",

"goodsType": "01",

"goodsId": "10086",

{

"cardInfo": {

"brandImg": "http://suo.im/6kBZbP",

"brandName": "美团",

"goodsName": "美团电子卡100元",

"expireDate": "2022-02-28",

"goodsType": "02",

"goodsId": "100876"

}

{

"cardInfo": {

"brandImg": "http://suo.im/6kBZbP",

"brandName": "美团",

"goodsName": "美团电子卡100元",

"expireDate": "2022-02-28",

"goodsType": "02",

"goodsId": "100876"

}

{

"cardInfo": {

"brandImg": "http://suo.im/6kBZbP",

"brandName": "淘票票",

"goodsName": "淘票票电子卡100元",

"expireDate": "2022-02-28",

"goodsType": "01",

"goodsId": "10086",

{

"cardInfo": {

"brandImg": "http://suo.im/6kBZbP",

"brandName": "美团",

"goodsName": "美团电子卡100元",

"expireDate": "2022-02-28",

"goodsType": "02",

"goodsId": "100876"

}

{

"cardInfo": {

"brandImg": "http://suo.im/6kBZbP",

"brandName": "美团",

"goodsName": "美团电子卡100元",

"expireDate": "2022-02-28",

"goodsType": "02",

"goodsId": "100876"

}

]

created() {

//初始化数据

this.initializeData();

/**

* num=0；并为true，显示手机号登录，交易记录和兑换历史title显示活动名称，相反是卡号

* num=1;为false，显示卡号登录和title为卡号

* isEmail为true时，显示邮箱兑换历史页面，交易记录为手机号登录时的页面

this.num = 0;

this.isIpone = true;

this.isEmail = false;

mounted() {

methods: {

// right(k) {

// },

// 点击头部选项卡

toggle(k) {

this.$forceUpdate();

this.num = k;

switch (k) {

case 0:

// this.right('mescroll');

console.log(11111)

break;

case 1:

// this.right('mescroll1');

console.log(222222)

break;

default:

// this.right('mescroll2');

console.log(333333)

break;

}

//初始化

initializeData() {

for (var i = 0; i < this.historyData.length; i++) {

this.historyData[i].cardInfo.isShowCard = false;

}

//点击查看卡密

seeCard(item) {

// this.$forceUpdate();

console.log(item)

item.cardInfo.card = "6789 3456 3456 6789";

item.cardInfo.password = "6666 8888 3456 6789";

item.cardInfo.isShowCard = !item.cardInfo.isShowCard;

this.historyData = Object.assign([], this.historyData);

//使用说明

goExplain() {

window.location = "instructions.html";

//去使用

employ() {

// 点击发送邮箱

send() {

jQuery.toast('发送成功');

//点击交易记录，去兑换

go_use() {

// 点击交易记录，显示明细

jl_show1() {

// this.$forceUpdate();

console.log('显示')

this.jl_s = !this.jl_s;

}

})

// /* jq */复制卡号和密码

$(function () {

//返回

$("#back").on("click", function () {

window.history.go(-1);

});

//复制到剪切板

var clipboard = new ClipboardJS('.copy-btn', {

text: function (that) {

return $(that).data("val");

}

});

clipboard.on('success', function (e) {

console.log("success", e);

$.toast("复制成功");

});

clipboard.on('error', function (e) {

console.log("eror", e);

$.toast("复制失败");

});

// 头部选项卡的步骤

var nav = $('nav');

var line = $('.line');

var active = nav.find('.active');

var pos = 0;

var wid = 0;

if (active.length) {

pos = active.position().left;

wid = active.width();

line.css({

left: pos,

width: wid

});

}

nav.find('ul li').click(function (e) {

if (!$(this).hasClass('active')) {

var _this = $(this);

nav.find('ul li').removeClass('active');

var position = _this.position();

var width = _this.width();

if (position.left >= pos) {

// line.animate({ left: position.left - pos }

// ,100,function(){

// line.animate({width:width},100)

// })

line.animate({

width: ((position.left - pos) + width)

}, 100, function () {

line.animate({

width: width,

left: position.left

}, 150);

_this.addClass('active');

});

} else {

line.animate({

left: position.left,

// width: ((pos - position.left) + wid)

}, 300, function () {

line.animate({

width: width

}, 150);

_this.addClass('active');

});

}

pos = position.left;

wid = width;

}

});

})

// 上拉加载

var mescroll = new MeScroll("mescroll", {

//第一个参数"mescroll"对应上面布局结构div的id

//如果下拉刷新是重置列表数据,那么down完全可以不用配置

down: {

use: false //下拉刷新的回调

up: {

auto:false,

htmlLoading: '

加载中',

//上拉加载中的布局

htmlNodata: '

没有更多了..

page: {

num: 0,

size: 10,

time: null

callback: upCallback //上拉加载的回调

}

});

function upCallback(page) {//可以添加参数

// var _this = this;

console.log('加载。。。')

setTimeout(() => {

var obj = { id: 1, title: '1111', time: '111', price: 600 };

Vue.jy_data.push(obj);

mescroll.endSuccess(Vue.jy_data.length, true);

},3000)

}

// 上拉加载

var mescroll1 = new MeScroll("mescroll1", {

//第一个参数"mescroll"对应上面布局结构div的id

//如果下拉刷新是重置列表数据,那么down完全可以不用配置

down: {

use: false //下拉刷新的回调

up: {

auto:false,

htmlLoading: '

加载中',

//上拉加载中的布局

htmlNodata: '

没有更多了..

page: {

num: 0,

size: 10,

time: null

callback: upCallback1 //上拉加载的回调

}

});

function upCallback1(page) {//可以添加参数

// var _this = this;

console.log('加载。。。')

setTimeout(() => {

mescroll1.endErr();

}, 6000)

// $.ajax({

// url: '???????page=' + page.num + '&size=' + page.size,

// type: 'get',

// data: {},

// success: function (data) {

// console.log(data);

// var list = data;

// var html = '';

// if (list.length > 0) { //有数据

// list.forEach(function (item) {

// html += 'xxxx' +

// item.title +

// 'xxxx' +

// item.date +

// 'xxxx';

// })

// }

// $('#mediaList').append(html);

// if (data && data.length == page.size) {

// //联网成功的回调,隐藏下拉刷新的状态(参数：当前页的数据个数, 是否有下一页true/false);

// mescroll.endSuccess(data.length, true);

// } else {

// //联网成功的回调,隐藏下拉刷新的状态(参数：当前页的数据个数, 是否有下一页true/false);

// mescroll.endSuccess(data.length, false);

// }

// },

// error: function () {

// // 联网失败的回调,隐藏下拉刷新的状态

// mescroll.endErr();

// }

// })

}

// 上拉加载

var mescroll2 = new MeScroll('mescroll2', {

//第一个参数"mescroll"对应上面布局结构div的id

//如果下拉刷新是重置列表数据,那么down完全可以不用配置

down: {

use: false //阻止下拉刷新

up: {

auto:false,

htmlLoading: '

加载中',

//上拉加载中的布局

htmlNodata: '

没有更多了..

page: {

num: 0,

size: 10,

time: null

callback: upCallback2 //上拉加载的回调

}

});

function upCallback2(page) {//可以添加参数

// var _this = this;

console.log('加载。。。')

setTimeout(() => {

var obj = {

"cardInfo": {

"brandImg": "http://suo.im/6kBZbP",

"brandName": "美团",

"goodsName": "11111",

"expireDate": "2022-02-28",

"goodsType": "02",

"goodsId": "100876"

}

};

Vue.historyData.push(obj);

mescroll2.endSuccess(Vue.historyData.length, true);

}, 3000)

// if (k == "mescroll") {

// setTimeout(() => {

// var obj = { id: 1, title: '1111', time: '111', price: 600 };

// _this.jy_data.push(obj);

// mescroll.endSuccess(_this.jy_data.length, true);

// })

// } else if (k == "mescroll2") {

// }

// $.ajax({

// url: '???????page=' + page.num + '&size=' + page.size,

// type: 'get',

// data: {},

// success: function (data) {

// console.log(data);

// var list = data;

// var html = '';

// if (list.length > 0) { //有数据

// list.forEach(function (item) {

// html += 'xxxx' +

// item.title +

// 'xxxx' +

// item.date +

// 'xxxx';

// })

// }

// $('#mediaList').append(html);

// if (data && data.length == page.size) {

// //联网成功的回调,隐藏下拉刷新的状态(参数：当前页的数据个数, 是否有下一页true/false);

// mescroll.endSuccess(data.length, true);

// } else {

// //联网成功的回调,隐藏下拉刷新的状态(参数：当前页的数据个数, 是否有下一页true/false);

// mescroll.endSuccess(data.length, false);

// }

// },

// error: function () {

// // 联网失败的回调,隐藏下拉刷新的状态

// mescroll.endErr();

// }

// })

}

一键复制

编辑

Web IDE

原始数据

按行查看

历史

html 设置移动端页面滚动,a.html · 焚心/移动端页面上下滚动加多页面上拉加载功能及mescroll插件的使用 - Gitee.com...