page.json页面的style里写入enablePullDownRefresh:true;//启用下拉刷新
getList() {
console.log("getList(){}(｡･∀･)ﾉﾞ嗨：");
if (this.isLoading) return;
this.isLoading = true;//打开节流阀
let requestData = {
pageNumber: this.pageNumber,
pageSize: this.pageSize,
//createPerson: 'a3d71198b27947d6aa8cb19cf0bbbc2b',
sortName: 'createTime',
sortOrder: 'desc',
//status: this.status,
activityLabels: '169f7b659575462789eaaed9911e10dd',
//approvalState: 1
};
this.$Request.get(this.$api.activity.activeList, requestData).then(res => {
if (res.data.code === 1) {
if (this.loading === 'more') {
this.navList = this.navList.concat(res.data.data.rows);
console.log(this.navList)
this.total = res.data.data.total;
this.pageNumber += 1;
if (this.pageNumber * this.pageSize >= this.total) {this.loading = 'noMore';//加载完毕}
} else {this.loading = 'loading';//加载中状态}
}
this.isLoading = false;//关闭节流阀
console.log(this.isLoading);
}, err => {
console.log("err: ", JSON.stringify(err)); });}this.$Request.get(this.$api.order.memberAddress, data).then(res => {
let data = res.data.data;
let newsList = data.rows;
}, err => {
console.log("err: " + JSON.stringify(err));
});<template>
<view>
<view class="li" v-for="(item,index) in storeList" :key="index">
<view>{{item.name}}</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {storeList: [],}
},
methods: {
//获取列表
getList() {
let data = {pageNumber: this.pageNUmber,pageSize: this.pageSize;sortName: '',sortOrder: '',};
this.$Request.get(this.$api.shop.store,data).then(res=> {
if(res.data.code===1) {
this.storeList = res.data.data.rows;
}
},err=> {
console.log("err:" ,JSON.stringify(err));
})
},
},
}
</script>
getList() {
this.isOpen = true;
request.open("GET",'api').then(res => {
this.list = res.data.row;
this.total = res.data.total;
if(this.pageNumber*this.pageSize <this.total) {
this.loading = "loading";
this.pageNumber +=;
this.getList()
this.isOpen = false;
} else {
this.loading ="noMore"
}
},err => {})
}
<template>
<view>
<view v-if="storeList">
<view class="li" v-for="(item,index) in storeList.slice(0,400)" :key="index" style="margin: 10px;display: flex;align-items: center;">
<!--<image class="img" :src="getImage.filePath + item.storeIcon" style="width: 200px;" mode="widthFix"></image>-->
<!--<text class="text" style="margin-left: 30px;">{{index}} {{item.storeName}}</text>-->
<text class="text" style="margin-left: 30px;">{{index}} {{item.address}}</text>
</view>
<uni-load-more :status="loadingType" v-if="storeList.length>0"></uni-load-more>
</view>
</view>
</template>
<script>
import UniLoadMore from '../../components/uni-load-more/uni-load-more'
export default {
components: {UniLoadMore},
data() {
return {
isLogin: false,
memberInfo: {},
storeList: [],
loadingType: 'more',
pageNumber: 1,
pageSize: 100,
total: 0,
isLoading: false,//是否正在请求数据
}
},
computed: {
getImage() {
return {
filePath: this.$commonImage.filePath,
}
}
},
async onLoad() {
if (this.isLogin) {
this.memberInfo = await this.$utils.memberInfo();
this.getStoreList();
} else {
let isLogin = await this.$utils.isLogin();
this.isLogin = isLogin;
if (isLogin) {
this.memberInfo = await this.$utils.memberInfo();
this.getStoreList();
}
}
},
/*onPullDownRefresh() {//下拉刷新
//1.重置关键数据
this.pageNumber = 1;
this.total = 0;
this.isLoading = false;
this.storeList = [];
//2.重新发起请求
this.getStoreList(() => uni.stopPullDownRefresh());
},
onReachBottom() {
//判断是否还有下一页数据
if (this.pageNumber * this.pageSize >= this.total) return uni.showMsg('数据加载完毕！')
//判断是否正在请求其他数据，如果是，则不发起额外的请求
if (this.isLoading) return
this.pageNumber+=1;
this.getStoreList();
this.loadingType = 'more';
},*/
onPullDownRefresh() {
if (this.isLoading) return
this.pageNumber = 1;
this.total = 0;
this.isLoading = false;
this.storeList = [];
this.loadingType = 'more';
this.getStoreList();
},
onReachBottom() {
if (this.isLoading || this.loadingType==='noMore') return
this.pageNumber+=1;
this.loadingType = 'loading';
this.getStoreList();
},
methods: {
getStoreList() {
console.log("getStoreList");
if (this.loadingType==='noMore' || this.isLoading) return
if (this.loadingType==='more') this.loadingType = 'loading'; uni.showNavigationBarLoading();//显示加载动画
this.isLoading = true;//打开节流阀
uni.request({
url: 'https://product.yiyou369.com'+"/api/storeApi",
method: 'GET',
header: {'Api-Version': "2.0","Call-Source": "WEB",'Authorization': uni.getStorageSync('Authorization') ? uni.getStorageSync('Authorization') : ''},
data: {pageNumber: this.pageNumber,pageSize: this.pageSize,accountLogin: true,sortName: 'updateTime',sortOrder: 'desc'},
success: res => {
uni.hideNavigationBarLoading();//关闭加载动画
uni.stopPullDownRefresh();//关闭下拉刷新
console.log("res",res.data);
this.storeList = this.storeList.concat(res.data.data.rows)
this.total = res.data.data.total;
this.isLoading = false;//关闭节流阀
if (this.pageNumber* this.pageSize >=this.total) {
this.loadingType = 'noMore';
} else {
this.loadingType = 'more';
}
},
fail: err => {},
complete: c => {}
})
//打开节流阀
/*this.isLoading = true;
this.loadingType = 'loading';//加载中
let host = 'https://product.yiyou369.com';let url ='/api/storeApi';*/
/*uni.request({
url: host+url,
method: 'GET',
data: {pageNumber: this.pageNumber,pageSize:this.pageSize,},
header: {"Authorization": uni.getStorageSync('Authorization') ? uni.getStorageSync("Authorization"): '',"Api-Version": '2.0',"Call-Source": "WEB"},
success: res => {
console.log("res", res);
//关闭节流阀
this.isLoading = false;
if (res.data.code !==1) return
//this.storeList = this.storeList.concat(res.data.data.rows);
this.storeList = res.data.data.rows;
this.total = res.data.data.total;
if (this.pageNumber * this.pageSize >= this.total) {
this.loadingType = 'noMore';//请求完数据 文字提示信息变成上拉加载更多
} else {
this.loadingType = 'more';
}
},
fail: err => {
console.log("err", err);
},
complete: c => {
console.log("c", c);
}
})*/
/*this.$Request.get(this.$api.shop.storeApi).then(res =>{
console.log("res:",res);
},err => {
console.log("err:",err);
});*/
},
},
}
</script>
完整版
<!--<template>
<view>
<view class="search">
<input class="search-inp" type="text" placeholder="请输入店铺名称搜索" v-model="storeName" @input="searchStoreName" />
<text class="iconfont icon-guanbi1 search-icon" @click="clearStoreName" v-if="storeName"></text>
</view>
<scroll-view scroll-y="true" :scroll-y="getStoreListLength" @scrolltolower="getStoreList" :style="'height: ' + svHeight + 'px;'" class="store">
<view class="item" v-for="(item,index) in storeList" :key="index">
<view class="imageBox">
<image :src="getImage.filePath + item.storeIcon + '?x-oss-process=image/resize,h_800'" class="storeImage"
mode="widthFix" @click="btnStoreDetail(item)"></image>
</view>
<view class="info">
<text class="storeName" @click="btnStoreDetail(item)">
{{item.storeName}}
</text>
<view class="inner" @click="btnStoreAddress(item)" v-if="item.storeAddress!==null&&item.storeAddress!==''">
<text class="iconfont icon-location-fill icon"></text>
<text class="storeAddress">{{item.storeAddress}}</text>
<view class="position">
<text class="iconfont icon-daohang-Navigation"></text>
</view>
</view>
<!– <view class="storeTag" v-if="item.storeAddress!==null&&item.storeAddress!==''">
<text class="txt">4.6km</text>
</view>–>
<view class="storeTag" v-if="item.storeAddress!==null&item.storeAddress!==''">
<text class="txt"> {{ item.distance > 1000 ? (item.distance / 1000).toFixed(2) + "km" : item.distance + "m" }}</text>
</view>
<view class="rebate">让利{{item.yieldInterest}}%</view>
<div class="shopSet" @click="btnJump('/shop/pages/shopSet/index?id='+item.id)" v-if="accountId===item.accountId">
<text class="iconfont icon-dianpu3"></text>
店铺设置
</div>
</view>
</view>
<!– 无数据 –>
<no-records v-if="storeList.length === 0" :pic="getImage.noOrder"
desc="暂无记录"></no-records>
<!– 下拉加载 –>
<uni-load-more v-if="storeList.length>0" :status="loadingType"></uni-load-more>
</scroll-view>
</view>
</template>-->
<!--<script>
import noRecords from '../../common/components/noRecords/noRecords.vue';
import UniLoadMore from "../../components/uni-load-more/uni-load-more";//暂无记录
//import noStore from "../../common/components/noStore";
//import noLogin from "../../common/components/noLogin";
//暂无记录
export default {
components: {
noRecords,
UniLoadMore
//noStore,
//noLogin,
},
data() {
return {
storeName: '',
svHeight: 0,
storeList: [],//商品详情
pageNumber: 1,
total: 0,
loadingType: 'more',
loaded: '',
//isLoadMore: false, //是否加载中
// loadStatus: 'loading',
pageSize: 10,
accountId:'',
}
},
computed: {
getImage() {
let images = {
orderFinished: this.$commonImage.orderFinished,
filePath: this.$commonImage.filePath,
noOrder: this.$commonImage.noOrder
}
return images;
},
getStoreListLength() {
return this.storeList.length !== 0;
},
},
onReady() {
let that = this;
//适用于h5 app mp-alipay
// #ifdef H5 || APP-PLUS || MP-ALIPAY
uni.getSystemInfo({
success: function (res) {
const query = uni.createSelectorQuery().in(that)
query.select('.store')
.boundingClientRect(d => {
that.svHeight = (res.windowHeight - d.top);
})
.exec();
}
});
// #endif
// h5 app mp-alipay不支持微信的方法
// #ifndef H5 || APP-PLUS || MP-ALIPAY
// 获取胶囊位置,API getMenuButtonBoundingClientRect 只有在微信小程序运行的时候才会生效，H5端查看会报错
uni.getSystemInfo({
success: function (res) {
console.log("res==",res);
uni.createSelectorQuery().select(".store")
.boundingClientRect(function (data) {
that.svHeight = (res.windowHeight - data.top);
console.log("data==",data)
}).exec();
}
});
// #endif
},
onLoad() {
},
async onShow() {
console.log("onShow(｡･∀･)ﾉﾞ嗨：");
//进首页的时候刷新基本开关
//this.$utils.getBaseConfig();
let isLogin = await this.$utils.isLogin();
this.isLogin = isLogin;
if(this.isLogin){
this.getStoreList();//获取问题列表
this.accountId=uni.getStorageSync('accountId')
}
},
/*onReachBottom() {
if (!this.loaded) {
this.loaded = true;
this.pageNumber += 1;
this.getStoreList();
}
},*/
onPullDownRefresh(){
console.log("onPullDownRefresh(｡･∀･)ﾉﾞ嗨：");
this.storeList=[];
this.pageNumber=1;
this.total=0;
this.loadingType='more';
this.loaded=''
this.getStoreList();
},
/* onPageScroll(e) {
console.log("onPageScroll,(｡･∀･)ﾉﾞ嗨");
},*/
methods: {
searchStoreName(event) {//搜索名称
this.storeName = event.detail.value;
this.pageNumber = 1;
this.loadingType='more';
this.storeList =[];
this.getStoreList();
},
clearStoreName() {//清除搜索内容
this.storeName = '';
},
//获取商品列表
getStoreList:function () {
if (this.loadingType === 'loading') {
return;
}
if (this.loadingType !== 'noMore') {
this.loadingType = 'loading';
uni.showNavigationBarLoading(); //显示加载动画
let data = {
pageNumber: this.pageNumber,
pageSize: this.pageSize,
sortName: 'createTime',
sortOrder: 'desc',
currentLatitude: uni.getStorageSync('latitude'),
currentLongitude:uni.getStorageSync('longitude'),
storeName: this.storeName,
/* currentLatitude:113.693047,
currentLongitude:34.721485,*/
};
this.$Request.get('storeApi', data).then(res=>{
this.total = res.data.data.total;
this.pageNumber += 1;
uni.hideNavigationBarLoading();
uni.stopPullDownRefresh();
this.loaded = true;
//if (res.data.data.rows) {
this.storeList = this.storeList.concat(res.data.data.rows);
console.log("this.storeList===",this.storeList);
if (this.storeList.length === this.total) {
this.loadingType = 'noMore';
} else {
this.loadingType = 'more';
}
// }
}).catch((err)=>{
console.log("err: ", JSON.stringify(err));
});
}
},
//跳转进详情
btnStoreDetail(item) {
this.$utils.jump('/shop/pages/detail/index?id=' + item.id, 'navigateTo');
},
btnStoreAddress: function(item) {
// #ifdef MP-WEIXIN || H5
let storeLatitude = parseFloat(item.storeLatitude);
let storeLongitude = parseFloat(item.storeLongitude);
uni.openLocation({
latitude: storeLatitude,//要去的纬度-地址
longitude: storeLongitude,//要去的纬度-地址
})
// #endif
var url = '';
console.log("item:",item);
const address = item.storeAddress;
const latitude = item.storeLatitude;
const longitude = item.storeLongitude;
var hasBaiduMap = plus.runtime.isApplicationExist({ pname: 'com.baidu.BaiduMap', action: 'baidumap://' });
var hasAmap = plus.runtime.isApplicationExist({ pname: 'com.autonavi.minimap', action: 'androidamap://' });
var urlBaiduMap = 'baidumap://map/marker?location=' + latitude + ',' + longitude + '&title=' + encodeURIComponent(address) + '&src=com.bailb.hbb';
var urlAmap = 'androidamap://viewMap?sourceApplication=com.bailb.hbb&poiname=' + encodeURIComponent(address) + '&lat=' + latitude + '&lon=' + longitude + '&dev=0';
if (hasAmap && hasBaiduMap) {
plus.nativeUI.actionSheet({ title: '选择地图应用', cancel: '取消', buttons: [{ title: '百度地图' }, { title: '高德地图' }] }, function(e) {
switch (e.index) {
case 1:
plus.runtime.openURL(urlBaiduMap);
break;
case 2:
plus.runtime.openURL(urlAmap);
break;
}
});
}
else if (hasAmap) {
//if (uni.getSystemInfoSync().platform == 'android') {
uni.showModal({
title: '温馨提示',
content: '是否打开“高德地图”进行导航？',
delCancel: false
})
.then(res => {
plus.runtime.openURL(urlAmap);
})
.catch(res => {});
/* } else {
uni.showModal({
title: '温馨提示',
content: '是否打开“高德地图”进行导航？',
success: res => {
if (res.confirm) {
plus.runtime.openURL(urlAmap);
}
}
});
}*/
}
else if (hasBaiduMap) {
//if (uni.getSystemInfoSync().platform == 'android') {
uni.showModal({
title: '温馨提示',
content: '是否打开“百度地图”进行导航？',
delCancel: false
})
.then(res => {
plus.runtime.openURL(urlBaiduMap);
})
.catch(res => {});
/* } else {
uni.showModal({
title: '温馨提示',
content: '是否打开“百度地图”进行导航？',
success: res => {
if (res.confirm) {
plus.runtime.openURL(urlBaiduMaps);
}
}
});
}*/
}
else {
//如果是国外应用，应该优先使用这个，会启动google地图。这个接口不能统一坐标系，进入百度地图时会有偏差
url = 'geo:' + latitude + ',' + longitude + '?q=' + encodeURIComponent(address);
// if (uni.getSystemInfoSync().platform == 'android') {
uni.showModal({
title: '温馨提示',
content: '是否打开“GoogleMap”进行导航？',
delCancel: false
})
.then(res => {
plus.runtime.openURL(url);
})
.catch(res => {});
/* } else {
uni.showModal({
title: '温馨提示',
content: '是否打开“GoogleMap”进行导航？',
success: res => {
if (res.confirm) {
plus.runtime.openURL(url);
}
}
});
}*/
}
},
btnJump(url) {
this.$utils.jump(url, 'navigateTo');
}
}
}
</script>-->
<!--<style scoped lang="scss">
@import 'index';
.search {
position: $uni-position-relative;
padding: $uni-padding-base;
background: #fff;
&-inp {
height: 40rpx*$hd;
padding: 0 $uni-padding-base;
background: #eee;border-radius: $uni-border-radius-lg;
}
&-icon {
position: absolute;right: 5%;top: 40%;color: #999;z-index: 100;
}
}
/deep/ .select-box {
padding: $uni-padding-base $uni-padding-lg !important;
}
/deep/ .navbar .nav-item.current {
color: $uni-color-black1;
}
/deep/ .navbar .active .txt {
color: $uni-color-black1;
}
/deep/ .store-order .good .imageBox .onShelf {
z-index: 9;
}
/deep/ .navbar {
/*position: static;*/
margin-bottom: $uni-margin-base;
}
</style>-->
<template>
<view>
<view v-if="storeList" style="display: none;">
<view class="li" v-for="(item,index) in storeList.slice(0,400)" :key="index" style="margin: 10px;display: flex;align-items: center;">
<!--<image class="img" :src="getImage.filePath + item.storeIcon" style="width: 200px;" mode="widthFix"></image>-->
<!--<text class="text" style="margin-left: 30px;">{{index}} {{item.storeName}}</text>-->
<text class="text" style="margin-left: 30px;">{{index}} {{item.address}}</text>
</view>
<uni-load-more :status="loadingType" v-if="storeList.length>0"></uni-load-more>
</view>
<scroll-view v-if="storeList" :scroll-y="getStoreListLength" @scrolltolower="getStoreList" style="height: 375px;">
<view class="li" v-for="(item,index) in storeList" :key="index">
<image class="img" :src="getImage.filePath + item.storeIcon" style="width: 200px;" mode="widthFix"></image>
<text class="text" style="margin-left: 30px;">{{index}} {{item.storeName}}</text>
</view>
<no-records v-if="storeList.length===0" :pic="getImage.noOrder" desc="暂无记录"></no-records>
<uni-load-more :status="loadingType" v-if="storeList.length>0"></uni-load-more>
</scroll-view>
</view>
</template>
<script>
import UniLoadMore from '../../components/uni-load-more/uni-load-more'
import NoRecords from "../../common/components/noRecords/noRecords";
export default {
components: {UniLoadMore,NoRecords},
data() {
return {
isLogin: false,
memberInfo: {},
storeList: [],
loadingType: 'more',
pageNumber: 1,
pageSize: 100,
total: 0,
isLoading: false,//是否正在请求数据
}
},
computed: {
getImage() {
return {
pageBasePath: this.$commonImage.pageBasePath,
filePath: this.$commonImage.filePath,
noOrder: this.$commonImage.noOrder,
}
},
//获取list长度
getStoreListLength() {
return this.storeList.length!==0;//有数据则可以触底加载
}
},
//上拉刷新 下拉加载 普通view写法
/*async onLoad() {
if (this.isLogin) {
this.memberInfo = await this.$utils.memberInfo();
this.getStoreList();
} else {
let isLogin = await this.$utils.isLogin();
this.isLogin = isLogin;
if (isLogin) {
this.memberInfo = await this.$utils.memberInfo();
this.getStoreList();
}
}
},
onPullDownRefresh() {//下拉刷新
//1.重置关键数据
this.pageNumber = 1;
this.total = 0;
this.isLoading = false;
this.storeList = [];
//2.重新发起请求
this.getStoreList(() => uni.stopPullDownRefresh());
},
onReachBottom() {
//判断是否还有下一页数据
if (this.pageNumber * this.pageSize >= this.total) return uni.showMsg('数据加载完毕！')
//判断是否正在请求其他数据，如果是，则不发起额外的请求
if (this.isLoading) return
this.pageNumber+=1;
this.getStoreList();
this.loadingType = 'more';
},
onPullDownRefresh() {//下拉刷新
if (this.isLoading) return //上次接口数据未加载完成跳出函数
//重置关键数据
this.pageNumber = 1;
this.total = 0;
this.isLoading = false;
this.storeList = [];
this.loadingType = 'more';
//重新发起请求
this.getStoreList();
},
onReachBottom() {//上拉加载
if (this.isLoading || this.loadingType==='noMore') return //上次接口数据未加载完成 或数据加载完毕没有数据了 跳出函数
this.pageNumber+=1;//页码自增 +1
this.loadingType = 'loading';
this.getStoreList();//重新发起请求
},
methods: {
getStoreList() {
/!*if (this.loadingType==='noMore' || this.isLoading) return
if (this.loadingType==='more') this.loadingType = 'loading'; uni.showNavigationBarLoading();//显示加载动画
this.isLoading = true;//打开节流阀
uni.request({
url: this.getImage.pageBasePath +"storeApi",
method: 'GET',
header: {'Api-Version': "2.0","Call-Source": "WEB",'Authorization': uni.getStorageSync('Authorization') ? uni.getStorageSync('Authorization') : ''},
data: {pageNumber: this.pageNumber,pageSize: this.pageSize,accountLogin: true,sortName: 'updateTime',sortOrder: 'desc'},
success: res => {
uni.hideNavigationBarLoading();//关闭加载动画
uni.stopPullDownRefresh();//关闭下拉刷新
console.log("res",res.data);
this.storeList = this.storeList.concat(res.data.data.rows);//数据赋值：进行新旧数据的拼接
this.total = res.data.data.total;
this.isLoading = false;//关闭节流阀
if (this.pageNumber* this.pageSize >=this.total) {
this.loadingType = 'noMore';
} else {
this.loadingType = 'more';
}
},
fail: err => {},
complete: c => {}
})*!/
}
},*/
//上拉刷新 scroll-view 自带的触底加载
async onLoad() {
let isLogin = await this.$utils.isLogin();
this.isLogin = isLogin;
if (isLogin) {
this.memberInfo = await this.$utils.memberInfo();
this.getStoreList();
} else {
this.memberInfo = await this.memberInfo();
this.getStoreList();
}
},
onPullDownRefresh() {
this.pageNumber = 1;
this.total = 0;
this.storeList = [];
this.loadingType = 'loading';
this.isLoading = false;
this.getStoreList();
},
methods: {
getStoreList() {
console.log("getStoreList");
if (this.isLoading || this.loadingType==='noMore') return
uni.showNavigationBarLoading();//打开加载动画
this.isLoading = true;//打开节流阀
uni.request({
url: this.getImage.pageBasePath+'storeApi',
method: 'GET',
header: {'Authorization': uni.getStorageSync('Authorization') ? uni.getStorageSync('Authorization') : '','Api-Version': '2.0','Call-Source': 'WEB'},
data: {pageNumber: this.pageNumber,pageSize: this.pageSize,},
success: res => {
console.log("res",res.data);
this.storeList = this.storeList.concat(res.data.data.rows);//数据赋值：新旧数据的拼接
this.total = res.data.data.total;//总条数
uni.hideNavigationBarLoading();//关闭加载动画
uni.stopPullDownRefresh();//关闭下拉刷新
this.isLoading = false;//关闭节流阀
console.log(this.pageNumber);
if (this.pageNumber*this.pageSize >= this.total) {
this.loadingType = 'noMore';
} else {
this.loadingType = 'more';
}
this.pageNumber+=1;//页码自增 +1
console.log(this.pageNumber);
},
fail: err => {
console.log("err: ", JSON.stringify(err));},
complete: c => {
console.log("c: ", JSON.stringify(c));},
})
/*this.$Request.get(this.$api.shop.storeApi).then(res =>{
console.log("res:",res);
},err => {
console.log("err:",err);
});*/
},
},
}
</script>
转载请注明：https://blog.csdn.net/SmartJunTao/article/details/126621696
