1.官网地址：https://github.com/stackjie/vue-pull-to/blob/master/README.zh-CN.md
2.安装：
npm install vue-pull-to --save3.使用
<template scope>
<div class="user-page">
<div class="top">
<van-row align="center" type="flex" justify="center">
<van-col span="24">
<van-row class="user-msg">
<van-col span="7">
<img alt="头像" class="user-img" :src="headimgurl" />
</van-col>
<van-col span="9"><p class="user-name">{{userName}}</p></van-col>
<van-col span="8"><img class="user-set" src="../../assets/img/pageImg/setting.png" alt="设置"
@click="setting"></van-col>
</van-row>
<van-row type="flex" justify="center">
<van-col span="22" class="message">
<van-swipe :autoplay="3000">
<van-swipe-item>
<img src="../../assets/img/pageImg/1.jpg" @click="carouseGoUrl(0)" style="height:150px;width:100%;"/>
</van-swipe-item>
<van-swipe-item>
<img src="../../assets/img/pageImg/2.jpg" @click="carouseGoUrl(1)" style="height:150px;width:100%;"/>
</van-swipe-item>
<van-swipe-item>
<img src="../../assets/img/pageImg/jyAdvertise.png" @click="carouseGoUrl(2)" style="height:150px;width:100%;"/>
</van-swipe-item>
</van-swipe>
</van-col>
</van-row>
</van-col>
</van-row>
</div>
<van-row align="center" type="flex" justify="center">
<van-col span="10">
<div class="btn-style" @click="gotoShop"><i class="shoppingMall"></i>积分商城</div>
</van-col>
<van-col span="10" offset="2">
<div class="btn-style" @click="myAccount"><i class="userMoney"></i>我的账户</div>
</van-col>
</van-row>
<div class="task-tab">
<van-row align="center" type="flex" justify="center">
<van-col span="6">
<div class="myTask">我的任务</div>
</van-col>
<van-col span="10" offset="6">
<van-tabs v-model="active" color="black" @click="TaskTab">
<van-tab>
<div slot="title" class="tabTitle">进行中</div>
</van-tab>
<van-tab>
<div slot="title" class="tabTitle">已完成</div>
</van-tab>
</van-tabs>
</van-col>
</van-row>
<van-row align="center" type="flex" justify="center" v-show="show">
<van-col span="22">
<ul>
<li class="TaskLine" v-for="(item,index) of TaskList" :key="item.index">
<van-row align="center" type="flex" justify="center">
<van-col span="2">
<div :class="item.typeClass">{{item.type}}</div>
</van-col>
<van-col span="15" offset="1">
<div class="taskShare">
<p>{{item.name}}<span>积分+{{item.point}}{{item.units}}</span></p>
<p>{{item.description}} {{item.info}}</p>
</div>
</van-col>
<van-col span="5">
<div class="gotoTask" @click="gotoFinish(index,item.url,item.name_en)"
v-if="item.toFinishShow==='true'">去完成
</div>
<div v-else></div>
</van-col>
</van-row>
</li>
</ul>
</van-col>
</van-row>
<van-list style="margin-bottom:20px">
<van-row align="center" type="flex" justify="center" v-show="!show">
<van-col span="22">
<ul>
<pull-to @bottom-pull="loadmore" :top-load-method="topChange" :bottom-config="BOTTOM_DEFAULT_CONFIG" :top-config="TOP_DEFAULT_CONFIG" >
<li class="TaskLine" v-for="(item,index) of list" :key="item.index">
<van-row align="center" type="flex" justify="center">
<van-col span="2">
<div :class="item.typeClass">{{item.type}}</div>
</van-col>
<van-col span="15" offset="1">
<div class="taskShare">
<p>{{item.name}}<span>积分+{{item.point}}{{item.units}}</span></p>
<p>{{item.description}} {{item.info}}</p>
</div>
</van-col>
<van-col span="5">
<div>
<p class="gotoTask EndTask">已完成</p>
<p class="EndTask">{{item.finishTime}}</p>
</div>
</van-col>
</van-row>
</li>
</pull-to>
<li class="loadingTextLable" >{{loadingTextLable}}</li>
</ul>
</van-col>
</van-row>
</van-list>
</div>
</div>
</template>
<script>
import Vue from 'vue'
import {Tab, Tabs, Row, Col, Swipe, SwipeItem, Lazyload, List,Toast} from 'vant';
import {apiurl} from '../../utils/public.js';
import PullTo from 'vue-pull-to';
Vue.use(Swipe).use(SwipeItem);
Vue.use(Tab).use(Tabs).use(Row).use(Col);
const TOP_DEFAULT_CONFIG = {
pullText: '下拉刷新', // 下拉时显示的文字
triggerText: '释放更新', // 下拉到触发距离时显示的文字
loadingText: '', // 加载中的文字
doneText: '加载完成', // 加载完成的文字
failText: '加载失败', // 加载失败的文字
loadedStayTime: 400, // 加载完后停留的时间ms
stayDistance: 50, // 触发刷新后停留的距离
triggerDistance: 70,// 下拉刷新触发的距离
};
const BOTTOM_DEFAULT_CONFIG = {
pullText: '上拉加载',
triggerText: '释放更新',
loadingText: '加载中...',
doneText: '加载完成',
failText: '加载失败',
loadedStayTime: 400,
stayDistance: 50,
triggerDistance: 70
};
export default {
name: "firstPage",
components: {
[List.name]: List,
[Row.name]: Row,
[Col.name]: Col,
[Lazyload.name]: Lazyload,
[Toast.name]: Toast,
PullTo
},
data() {
return {
show: true,
userName: '',
headimgurl: '',
active: 2,
list: [], //已完成任务数据
TaskList: [],//进行中任务数据
userID: '',
pageNum:1,//当前页码
pageSize:2,//每页展示的数据条数
resultCount:0,//已完成数据总数
loadData:0,
loadingTextLable:'下拉加载数据'
}
},
created: function () {
this.checkBundled();
},
methods: {
topChange(){
this.pageNum=1;
this.loadData=0;
this.queryDoneTask();
this.loadingTextLable='下拉加载数据';
},
loadmore(loaded) {
if(this.loadingTextLable==="数据加载完成"){
return;
}
if(this.pageNum===1){
this.pageNum++;
}
var url = apiurl.dataapiurl + "?msgtype=task_view_done_get&msg={'openid':'" + sessionStorage.openid +
"','page':'" + this.pageNum + "','pageSize':'"+this.pageSize+"'}";
var successCallback = (response) => {
if (response.status == 200) {
if (response.data.result === "success") {
this.resultCount=response.data.resultCount;
var ccount=Math.ceil(this.resultCount/this.pageSize);
if (this.pageNum ===ccount) {
this.loadData++;
this.loadingTextLable="数据加载完成";
}else if(this.pageNum<ccount){
this.loadingTextLable="下拉加载数据";
}
if (response.data.resultData.length === 0) {
this.pageNum--;
} else {
this.pageNum++;
if(this.loadData<=1){
this.list = this.list.concat(response.data.resultData);
}
}
} else {
console.log("getCardList failure:" + response.data.resultMsg);
}
}
};
var errorCallback = (err) => {
console.log('getCardList error:' + JSON.stringify(err));
this.pageNum--;
};
this.axios.post(url).then(successCallback).catch(errorCallback);
}
, carouseGoUrl: function (index) {
//裂变
if (index === 0) {
this.$router.push({name: "ShareP1"});
}
//商城首页
else if (index === 1) {
window.location.href = apiurl.mallurl + "/mall?uuid=" + this.userID;
}
//我的账户
else if (index === 2) {
window.location.href = apiurl.mallurl + "/uc?uuid=" + this.userID;
}
}
, checkBundled: function () {
var url = apiurl.loginurl + "?msgtype=check_bundle&msg={'openid':'" + sessionStorage.openid + "'}";
var successCallback = (response) => {
var datas = response.data;
if (datas.result == "success") {
var bundled = datas.resultData.bundled;
if (bundled != null && bundled == true) {
this.getCustomerInfoByOpenId();
this.queryUnderWayTask();
} else {
this.$router.push({name: "Login"});
}
}
};
var errorCallback = (err) => {
console.log('checkBunded error 2:' + JSON.stringify(err));
};
this.axios.post(url).then(successCallback).catch(errorCallback);
}
,
queryUnderWayTask: function () {
var url = apiurl.dataapiurl + "?msgtype=task_view_underway_get&msg={'openid':'" + sessionStorage.openid + "'}";
var successCallback = (response) => {
if (response.status == 200) {
if (response.data.result === "success") {
console.log("getCardList success");
if (response.data.resultData.length === 0) {
} else {
this.TaskList = response.data.resultData;
}
} else {
console.log("getCardList failure:" + response.data.resultMsg);
}
}
};
var errorCallback = (err) => {
console.log('getCardList error:' + JSON.stringify(err));
};
this.axios.post(url).then(successCallback).catch(errorCallback);
},
queryDoneTask: function () {
var url = apiurl.dataapiurl + "?msgtype=task_view_done_get&msg={'openid':'" + sessionStorage.openid +
"','page':'" + this.pageNum + "','pageSize':'"+this.pageSize+"'}";
var successCallback = (response) => {
if (response.status == 200) {
if (response.data.result === "success") {
this.resultCount=response.data.resultCount;
if (this.pageNum ===Math.ceil(this.resultCount/this.pageSize)) {
this.loadingTextLable="数据加载完成";
}
if (response.data.resultData.length === 0) {
} else {
this.list = response.data.resultData;
}
} else {
console.log("getCardList failure:" + response.data.resultMsg);
}
}
};
var errorCallback = (err) => {
console.log('getCardList error:' + JSON.stringify(err));
};
this.axios.post(url).then(successCallback).catch(errorCallback);
},
getCustomerInfoByOpenId() {
var msgtype = "customer_info_get";
var msgdata = {};
msgdata.openid = sessionStorage.openid;
var msg = JSON.stringify(msgdata);
var url = apiurl.getDataApiUrl(msgtype, msg);
var successCallback = (response) => {
if (response.status == 200) {
if (response.data.result === "success") {
console.log(msgtype + " success");
this.userName = response.data.resultData.mobilePhone;
this.headimgurl = response.data.resultData.headimgurl;
this.userID = response.data.resultData.userID;
} else {
console.log(msgtype + " failure:" + response.data.resultMsg);
}
}
};
var errorCallback = (err) => {
console.log(msgtype + ' error:' + JSON.stringify(err));
};
this.axios.post(url).then(successCallback).catch(errorCallback);
},
setting() {
this.$router.push({name: "UserCenter"});
},
gotoShop() {
window.location.href = apiurl.mallurl + "/mall?uuid=" + this.userID;
},
myAccount() {
window.location.href = apiurl.mallurl + "/uc?uuid=" + this.userID;
},
TaskTab(i) {
if (i == 1) {
this.show = false;
this.pageNum=1;
this.loadData=0;
this.loadingTextLable='下拉加载数据';
this.queryDoneTask();
} else {
this.show = true;
this.queryUnderWayTask();
}
},
gotoFinish(index, url, name_en) {
if (name_en === "knowjewel" || name_en === "myaccount") {
//我的商城
if(name_en==="knowjewel"){
window.location.href = apiurl.mallurl + "/mall?uuid=" + this.userID;
}
//我的账号
else if(name_en === "myaccount"){
window.location.href = apiurl.mallurl + "/uc?uuid=" + this.userID;
}
this.goKnowjewelOrKnowEquities(name_en);
} else if (name_en === "sharecircle" || name_en === "sharefriend") {
this.$router.push({name: "ShareP1"});
}
},
goKnowjewelOrKnowEquities: function (name_en) {
Toast.loading({mask: true, message: "处理中"});
var url = apiurl.dataapiurl + "?msgtype=finish_novice_task&msg={'openid':'" + sessionStorage.openid + "','name_en':'" + name_en + "'" + "}";
var successCallback = (response) => {
Toast.clear();
if (response.status == 200) {
if (response.data.result === "success") {
this.queryUnderWayTask();
this.queryDoneTask();
}
}
};
var errorCallback = (err) => {
Toast.clear();
console.log('goKnowjewelOrKnowEquities error:' + JSON.stringify(err));
};
this.axios.post(url).then(successCallback).catch(errorCallback);
}
},
mounted() {
document.title = "魔方";
}
}
</script>
<style scoped >
.loadingTextLable{
line-height: 50px;
}
.loading-bar {
height: 40px;
text-align: center;
line-height: 40px;
}
.icon-loading {
transform: rotate(0deg);
animation-name: loading;
animation-duration: 3s;
animation-iteration-count: infinite;
animation-direction: alternate;
}
@keyframes loading
{
from {transform: rotate(0deg);}
to {transform: rotate(360deg);}
}
.van-tabs__line {
background: dimgray ;
}
.top {
height: 260px;
}
.tabTitle {
background-color: white;
}
.loading-bar {
height: 40px;
text-align: center;
line-height: 40px;
}
.icon-loading {
transform: rotate(0deg);
animation-name: loading;
animation-duration: 3s;
animation-iteration-count: infinite;
animation-direction: alternate;
}
@keyframes loading
{
from {transform: rotate(0deg);}
to {transform: rotate(360deg);}
}
.user-msg {
width: 100%;
height: 160px;
padding-top: 16px;
position: relative;
background: -webkit-linear-gradient(#ec6a57, #ee946e); /* Safari 5.1 - 6.0 */
background: -o-linear-gradient(#ec6a57, #ee946e); /* Opera 11.1 - 12.0 */
background: -moz-linear-gradient(#ec6a57, #ee946e); /* Firefox 3.6 - 15 */
background: linear-gradient(#ec6a57, #ee946e); /* 标准的语法 */
}
.user-img {
width: 55px;
height: 55px;
border-radius: 50%;
float: left;
margin: 0 15px 0 35px;
}
.user-name {
width: 222px;
height: 40px;
line-height: 40px;
color: white;
margin-top: 10px;
float: left;
text-align: left;
}
.user-set {
width: 26px;
height: 26px;
float: right;
margin-right: 25px;
margin-top: 15px;
}
.message {
position: absolute;
top: 93px;
z-index: 2;
}
.message img {
width: 100%;
height: 166px;
border-radius: 8px;
}
.btn-style {
width: 90%;
height: 68px;
font-weight: bold;
line-height: 68px;
padding-left: 10%;
margin: 5px 0px 12px 0px;
border-radius: 5px;
box-shadow: 0 1px 5px #ccc;
position: relative;
background-color: white;
}
.btn-style i {
display: inline-block;
width: 15%;
height: 34px;
background-image: url("../../assets/img/pageImg/shop.png");
background-size: contain;
background-position: 50% 50%;
background-repeat: no-repeat;
position: absolute;
left: 8%;
top: 17px;
}
.btn-style i.userMoney {
background-image: url("../../assets/img/pageImg/money.png");
}
.task-tab {
width: 100%;
box-shadow: 0 1px 5px #ddd;
background-color: white;
}
.myTask {
width: 100%;
height: 33px;
color: white;
line-height: 33px;
text-align: left;
padding-left: 10px;
background-image: url("../../assets/img/pageImg/myTest.png");
background-size: contain;
background-repeat: no-repeat;
}
.TaskLine {
height: 90px;
border-bottom:1px solid #ddd;
}
.taskTime {
height: 18px;
width: 100%;
line-height: 18px;
border-radius: 2px;
padding-left: 3px;
padding-right: 3px;
color: #ffffff;
font-size: 12px;
/*margin-top: 20px;*/
}
.taskTime1 {
background: #ff6446;
}
.taskTime2 {
background: #ffc040;
}
.taskTime3 {
background: #41c557;
}
.taskShare {
margin-top: 16px;
text-align: left;
padding-left: 2px;
}
.taskShare p {
line-height: 25px;
font-size: 1em;
color: #535353;
}
.taskShare p span {
font-size: 14px;
color: #F86D5D;
margin-left: 15px;
}
.taskShare p:nth-child(2) {
font-size: 15px;
color: #bababa;
}
.gotoTask {
width: 100%;
height: 23px;
float: right;
border-radius: 12px;
border: 1px solid #F86D5D;
/*margin-right: 13px;*/
margin-top: 36px;
font-size: 15px;
color: #F86D5D;
line-height: 23px;
}
.EndTask {
border: none;
color: #33C291;
}
</style>
4.效果图
6.解释
6.1调用事件用@xxxx 如果是props里面的用:xx,反正我是一个新手，我是搞不清楚
6.2首先点击已完成的时候，查询第一页的数据，然后根据数据总数和每页展示的数量计算出页码
用来判断数据加载完成显示还是提示下拉加载数据
下拉的时候@bottom-pull="loadmore"这个来调用下一页数据展示的代码
我没有使用往上滑动的事件，有点复杂，需要设置一个map,对应的键值对大概是页码，页码对应的数据，每往上滑动的时候，页码改变，对应的list值变化，重新拼成最新的展示list,我的思路是这样子，没实践过。我没弄成这样子，我是滑到顶部的时候查询第一页，然后又重新加载数据:top-load-method="topChange"
bug1，:top-load-method只能用一次，不管了。就这样子做。研究好久了。还是没完全弄好。
bug2图2上拉的时候使用:top-load-method哪个加载中的字会展示出来，不知道要怎么设置。
5.代码下载路径，不能执行，只能查看怎么使用，在本例子中代码都copy出来了。下载地址一样的代码
https://download.csdn.net/download/rendeyishi/10875577
6.主要是记录一下，能帮助大家就行，帮助不了我也很无奈。
718
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
