From fe23c26671c2465a84ee91c93857ddb1bcef227f Mon Sep 17 00:00:00 2001
From: Administrator <admin>
Date: Tue, 15 Jun 2021 22:56:43 +0800
Subject: [PATCH] 1.巡逻路线文本上下移动调整 2.资讯列表超过10条数据时，底部上拉加载更多数据
---
xcxjingqingmap_patrol/img/photo.png | 0
xcxjingqingmap_patrol/js/move.js | 25 +-
pages/article/article.vue | 146 ++++++--------
xcxjingqingmap_patrol/js/vueMain.js | 12
components/uni-load-more/uni-load-more.vue | 362 ++++++++++++++++++++++++++++++++++++
5 files changed, 441 insertions(+), 104 deletions(-)
diff --git a/components/uni-load-more/uni-load-more.vue b/components/uni-load-more/uni-load-more.vue
new file mode 100644
index 0000000..a53a843
--- /dev/null
+++ b/components/uni-load-more/uni-load-more.vue
@@ -0,0 +1,362 @@
+<template>
+ <view class="uni-load-more" @click="onClick">
+ <!-- #ifdef APP-NVUE -->
+ <loading-indicator v-if="!webviewHide && status === 'loading' && showIcon" :style="{color: color,width:iconSize+'px',height:iconSize+'px'}" :animating="true" class="uni-load-more__img uni-load-more__img--nvue"></loading-indicator>
+ <!-- #endif -->
+ <!-- #ifdef H5 -->
+ <svg width="24" height="24" viewBox="25 25 50 50" v-if="!webviewHide && (iconType==='circle' || iconType==='auto' && platform === 'android') && status === 'loading' && showIcon"
+ :style="{width:iconSize+'px',height:iconSize+'px'}" class="uni-load-more__img uni-load-more__img--android-H5">
+ <circle cx="50" cy="50" r="20" fill="none" :style="{color:color}" :stroke-width="3"></circle>
+ </svg>
+ <!-- #endif -->
+ <!-- #ifndef APP-NVUE || H5 -->
+ <view v-if="!webviewHide && (iconType==='circle' || iconType==='auto' && platform === 'android') && status === 'loading' && showIcon"
+ :style="{width:iconSize+'px',height:iconSize+'px'}" class="uni-load-more__img uni-load-more__img--android-MP">
+ <view :style="{borderTopColor:color,borderTopWidth:iconSize/12}"></view>
+ <view :style="{borderTopColor:color,borderTopWidth:iconSize/12}"></view>
+ <view :style="{borderTopColor:color,borderTopWidth:iconSize/12}"></view>
+ </view>
+ <!-- #endif -->
+ <!-- #ifndef APP-NVUE -->
+ <view v-else-if="!webviewHide && status === 'loading' && showIcon" :style="{width:iconSize+'px',height:iconSize+'px'}" class="uni-load-more__img uni-load-more__img--ios-H5">
+ <image src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAYAAACqaXHeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoV2luZG93cykiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6QzlBMzU3OTlEOUM0MTFFOUI0NTZDNERBQURBQzI4RkUiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6QzlBMzU3OUFEOUM0MTFFOUI0NTZDNERBQURBQzI4RkUiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDpDOUEzNTc5N0Q5QzQxMUU5QjQ1NkM0REFBREFDMjhGRSIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDpDOUEzNTc5OEQ5QzQxMUU5QjQ1NkM0REFBREFDMjhGRSIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/Pt+ALSwAAA6CSURBVHja1FsLkFZV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"
+ mode="widthFix"></image>
+ </view>
+ <!-- #endif -->
+ <text class="uni-load-more__text" :style="{color: color}">{{ status === 'more' ? contentText.contentdown : status === 'loading' ? contentText.contentrefresh : contentText.contentnomore }}</text>
+ </view>
+</template>
+
+<script>
+ let platform
+ setTimeout(() => {
+ platform = uni.getSystemInfoSync().platform
+ }, 16)
+
+ /**
+ * LoadMore 加载更多
+ * @description 用于列表中，做滚动加载使用，展示 loading 的各种状态
+ * @tutorial https://ext.dcloud.net.cn/plugin?id=29
+ * @property {String} status = [more|loading|noMore] loading 的状态
+ * @value more loading前
+ * @value loading loading中
+ * @value noMore 没有更多了
+ * @property {Number} iconSize 指定图标大小
+ * @property {Boolean} iconSize = [true|false] 是否显示 loading 图标
+ * @property {String} iconType = [snow|circle|auto] 指定图标样式
+ * @value snow ios雪花加载样式
+ * @value circle 安卓唤醒加载样式
+ * @value auto 根据平台自动选择加载样式
+ * @property {String} color 图标和文字颜色
+ * @property {Object} contentText 各状态文字说明，值为：{contentdown: "上拉显示更多",contentrefresh: "正在加载...",contentnomore: "没有更多数据了"}
+ * @event {Function} clickLoadMore 点击加载更多时触发
+ */
+ export default {
+ name: 'UniLoadMore',
+ props: {
+ status: {
+ // 上拉的状态：more-loading前；loading-loading中；noMore-没有更多了
+ type: String,
+ default: 'more'
+ },
+ showIcon: {
+ type: Boolean,
+ default: true
+ },
+ iconType: {
+ type: String,
+ default: 'auto'
+ },
+ iconSize: {
+ type: Number,
+ default: 24
+ },
+ color: {
+ type: String,
+ default: '#777777'
+ },
+ contentText: {
+ type: Object,
+ default () {
+ return {
+ contentdown: '上拉显示更多',
+ contentrefresh: '正在加载...',
+ contentnomore: '没有更多数据了'
+ }
+ }
+ }
+ },
+ data() {
+ return {
+ webviewHide: false,
+ platform: platform
+ }
+ },
+ // #ifndef APP-NVUE
+ computed:{
+ iconSnowWidth(){
+ return (Math.floor(this.iconSize/24)||1)*2
+ }
+ },
+ // #endif
+ mounted() {
+ // #ifdef APP-PLUS
+ var pages = getCurrentPages();
+ var page = pages[pages.length - 1];
+ var currentWebview = page.$getAppWebview();
+ currentWebview.addEventListener('hide', () => {
+ this.webviewHide = true
+ })
+ currentWebview.addEventListener('show', () => {
+ this.webviewHide = false
+ })
+ // #endif
+ },
+ methods: {
+ onClick() {
+ this.$emit('clickLoadMore', {
+ detail: {
+ status: this.status,
+ }
+ })
+ }
+ }
+ }
+</script>
+
+<style lang="scss" scoped>
+
+ .uni-load-more {
+ /* #ifndef APP-NVUE */
+ display: flex;
+ /* #endif */
+ flex-direction: row;
+ height: 40px;
+ align-items: center;
+ justify-content: center;
+ }
+
+ .uni-load-more__text {
+ font-size: 15px;
+ }
+
+ .uni-load-more__img {
+ width: 24px;
+ height: 24px;
+ margin-right: 8px;
+ }
+
+ .uni-load-more__img--nvue {
+ color: #666666;
+ }
+
+ .uni-load-more__img--android,
+ .uni-load-more__img--ios {
+ width: 24px;
+ height: 24px;
+ transform: rotate(0deg);
+ }
+
+ /* #ifndef APP-NVUE */
+ .uni-load-more__img--android {
+ animation: loading-ios 1s 0s linear infinite;
+ }
+
+ @keyframes loading-android {
+ 0% {
+ transform: rotate(0deg);
+ }
+
+ 100% {
+ transform: rotate(360deg);
+ }
+ }
+
+ .uni-load-more__img--ios-H5 {
+ position: relative;
+ animation: loading-ios-H5 1s 0s step-end infinite;
+ }
+
+ .uni-load-more__img--ios-H5>image {
+ position: absolute;
+ width: 100%;
+ height: 100%;
+ left: 0;
+ top: 0;
+ }
+
+ @keyframes loading-ios-H5 {
+ 0% {
+ transform: rotate(0deg);
+ }
+
+ 8% {
+ transform: rotate(30deg);
+ }
+
+ 16% {
+ transform: rotate(60deg);
+ }
+
+ 24% {
+ transform: rotate(90deg);
+ }
+
+ 32% {
+ transform: rotate(120deg);
+ }
+
+ 40% {
+ transform: rotate(150deg);
+ }
+
+ 48% {
+ transform: rotate(180deg);
+ }
+
+ 56% {
+ transform: rotate(210deg);
+ }
+
+ 64% {
+ transform: rotate(240deg);
+ }
+
+ 73% {
+ transform: rotate(270deg);
+ }
+
+ 82% {
+ transform: rotate(300deg);
+ }
+
+ 91% {
+ transform: rotate(330deg);
+ }
+
+ 100% {
+ transform: rotate(360deg);
+ }
+ }
+
+ /* #endif */
+
+ /* #ifdef H5 */
+ .uni-load-more__img--android-H5 {
+ animation: loading-android-H5-rotate 2s linear infinite;
+ transform-origin: center center;
+ }
+
+ .uni-load-more__img--android-H5>circle {
+ display: inline-block;
+ animation: loading-android-H5-dash 1.5s ease-in-out infinite;
+ stroke: currentColor;
+ stroke-linecap: round;
+ }
+
+ @keyframes loading-android-H5-rotate {
+ 0% {
+ transform: rotate(0deg);
+ }
+
+ 100% {
+ transform: rotate(360deg);
+ }
+ }
+
+ @keyframes loading-android-H5-dash {
+ 0% {
+ stroke-dasharray: 1, 200;
+ stroke-dashoffset: 0;
+ }
+
+ 50% {
+ stroke-dasharray: 90, 150;
+ stroke-dashoffset: -40;
+ }
+
+ 100% {
+ stroke-dasharray: 90, 150;
+ stroke-dashoffset: -120;
+ }
+ }
+
+ /* #endif */
+
+ /* #ifndef APP-NVUE || H5 */
+ .uni-load-more__img--android-MP {
+ position: relative;
+ width: 24px;
+ height: 24px;
+ transform: rotate(0deg);
+ animation: loading-ios 1s 0s ease infinite;
+ }
+
+ .uni-load-more__img--android-MP>view {
+ position: absolute;
+ box-sizing: border-box;
+ width: 100%;
+ height: 100%;
+ border-radius: 50%;
+ border: solid 2px transparent;
+ border-top: solid 2px #777777;
+ transform-origin: center;
+ }
+
+ .uni-load-more__img--android-MP>view:nth-child(1){
+ animation: loading-android-MP-1 1s 0s linear infinite;
+ }
+
+ .uni-load-more__img--android-MP>view:nth-child(2){
+ animation: loading-android-MP-2 1s 0s linear infinite;
+ }
+
+ .uni-load-more__img--android-MP>view:nth-child(3){
+ animation: loading-android-MP-3 1s 0s linear infinite;
+ }
+
+ @keyframes loading-android {
+ 0% {
+ transform: rotate(0deg);
+ }
+
+ 100% {
+ transform: rotate(360deg);
+ }
+ }
+
+ @keyframes loading-android-MP-1{
+ 0%{
+ transform: rotate(0deg);
+ }
+ 50%{
+ transform: rotate(90deg);
+ }
+ 100%{
+ transform: rotate(360deg);
+ }
+ }
+ @keyframes loading-android-MP-2{
+ 0%{
+ transform: rotate(0deg);
+ }
+ 50%{
+ transform: rotate(180deg);
+ }
+ 100%{
+ transform: rotate(360deg);
+ }
+ }
+ @keyframes loading-android-MP-3{
+ 0%{
+ transform: rotate(0deg);
+ }
+ 50%{
+ transform: rotate(270deg);
+ }
+ 100%{
+ transform: rotate(360deg);
+ }
+ }
+ /* #endif */
+</style>
diff --git a/pages/article/article.vue b/pages/article/article.vue
index 8437b4c..9bdfa4e 100644
--- a/pages/article/article.vue
+++ b/pages/article/article.vue
@@ -1,19 +1,9 @@
<template>
<view class="advisory-big">
-
- <!-- <view
- ref="k-scroll-view"
- :refreshType="refreshType"
- :refreshTip="refreshTip"
- :loadTip="loadTip"
- :loadingTip="loadingTip"
- :emptyTip="emptyTip"
- :touchHeight="touchHeight"
- :height="height"
- :bottom="bottom"
- :autoPullUp="autoPullUp"
- @onPullDown="handlePullDown"
- @onPullUp="handleLoadMore"> -->
+ <!-- 顶部下拉刷新 -->
+ <view v-show="isFlash">
+ <uni-load-more :status="loadStatus" ></uni-load-more>
+ </view>
<view v-for="i in data" class="advisory-model" @click="goDetail(i)">
<view class="advisory-left">
<view class="advisory-title-top">
@@ -29,63 +19,50 @@
</view>
</view>
- <!-- </view> -->
- <!-- <uni-load-more :status="status" :content-text="contentText"/> -->
-
-
+ <!-- loading加载提示处 -->
+ <view v-show="isLoadMore">
+ <uni-load-more :status="loadStatus" ></uni-load-more>
+ </view>
</view>
</template>
<script>
- // import kScrollView from '@/components/k-scroll-view/k-scroll-view.vue';
export default{
- // components: {
- // kScrollView
- // },
data(){
return {
// pathUrl:"http://localhost:89/",
pathUrl:"http://s16s652780.51mypc.cn/api/blade-jfpts",
- // refreshType: 'custom',
- // refreshTip: '正在下拉',
- // loadTip: '获取更多数据',
- // loadingTip: '正在加载中...',
- // emptyTip: '--我是有底线的--',
- // touchHeight: 50,
- // height: 0,
- // bottom: 50,
- // autoPullUp: true,
- // stopPullDown:true, // 如果为 false 则不使用下拉刷新，只进行上拉加载
- // status: 'more',
- // statusTypes: [{
- // value: 'more',
- // text: '加载前',
- // checked: true
- // }, {
- // value: 'loading',
- // text: '加载中',
- // checked: false
- // }, {
- // value: 'noMore',
- // text: '没有更多',
- // checked: false
- // }],
- // contentText: {
- // contentdown: '下拉查看更多',
- // contentrefresh: '加载中',
- // contentnomore: '没有更多'
- // },
+ page:1,
+ pagesize:10,
+ loadStatus:'loading', //加载样式：more-加载前样式，loading-加载中样式，nomore-没有数据样式
+ isLoadMore:false, //是否加载中
+ isFlash:false,//是否刷新
data:[]
}
},
mounted(){
- this.getArtcilePageList();
+ // this.getArtcilePageList();
},
- onPullDownRefresh () { // 下拉刷新事件
- console.log('触发下拉刷新了')
- // 一些列操作
- uni.stopPullDownRefresh() // 结束当前刷新事件
- },
+ //上拉加载更多
+ onReachBottom(){ //上拉触底函数
+ if(!this.isLoadMore){ //此处判断，上锁，防止重复请求
+ this.isLoadMore=true
+ this.page+=1
+ this.getArtcilePageList()
+ }
+ },
+ //下拉刷新
+ onPullDownRefresh() {
+ // console.log("上拉了！....");
+ if(!this.isFlash){ //此处判断，上锁，防止重复请求
+ this.isFlash=true;
+ this.page =1;
+ this.getArtcilePageList();
+ }
+ },
+ onLoad() {
+ this.getArtcilePageList();
+ },
methods:{
//去跳转详情页面
goDetail(e){
@@ -116,36 +93,37 @@
uni.request({
url: that.pathUrl+'/article/article/page',
method:'GET',
+ data:{
+ current:this.page,
+ size: this.pagesize
+ },
success: (res) => {
- that.data = res.data.data.records;
+ if(res.data.code==200){
+ if(res.data.data.records){
+ //如果总数小于pageSize,不做其他操作
+ if(res.data.data.total<this.pagesize){
+ that.data = res.data.data.records;
+ }else{
+ if(res.data.data.records.length<this.pagesize){
+ //如果数量小于分页数量，则为最后一页
+ this.isLoadMore=true;
+ this.loadStatus='nomore';
+ }else{
+ this.isLoadMore=false
+ }
+ res.data.data.records.forEach((item)=>{
+ that.data.push(item);
+ })
+ }
+ }else{
+ this.isLoadMore=true;
+ this.loadStatus='nomore';
+ }
+ }
+
}
});
- },
- //下拉获取更多
- // handlePullDown(stopLoad) {
- // this.data = [];
- // for (var i = 0; i < 10; i++) {
- // this.data.push(i);
- // }
- // stopLoad ? stopLoad() : '';
- // },
- // //上拉加载
- // handleLoadMore(stopLoad) {
- // const size = this.data.length;
- // if (size < 100) {
- // const data = [];
- // for (var i = 0; i < 10; i++) {
- // data.push(size + i);
- // }
- // this.data = this.data.concat(data);
- // stopLoad ? stopLoad() : '';
- // } else {
- // stopLoad ? stopLoad({ isEnd: true }) : '';
- // }
- // },
- // handleGoTop() {
- // this.$refs['k-scroll-view'].goTop();
- // }
+ }
}
}
</script>
diff --git a/xcxjingqingmap_patrol/img/photo.png b/xcxjingqingmap_patrol/img/photo.png
new file mode 100644
index 0000000..74f4513
--- /dev/null
+++ b/xcxjingqingmap_patrol/img/photo.png
Binary files differ
diff --git a/xcxjingqingmap_patrol/js/move.js b/xcxjingqingmap_patrol/js/move.js
index 448f217..510ece3 100644
--- a/xcxjingqingmap_patrol/js/move.js
+++ b/xcxjingqingmap_patrol/js/move.js
@@ -82,28 +82,25 @@
});
that.div.on('touchend', function() { //抬起重置
console.log("触摸停止")
+ console.log(that.__yy, 123)
+ console.log(that.__sy, 124)
once = true; //抬起重置鼠标点击位置
+ var chous = null;
if (that.state == 'down') { //两种模式
- var chous = Math.abs(that.__yy - that.__sy) < that.__wy / 4;
+ // var chous = Math.abs(that.__yy - that.__sy) < that.__wy / 4;
+ chous = (that.__sy - that.__yy) < 0;
} else if (that.state == 'up') {
- var chous = Math.abs(that.__yy - that.__sy) > that.__wy / 4;
+ // var chous = Math.abs(that.__yy - that.__sy) > that.__wy / 4;
+ chous = (that.__sy - that.__yy) < 0;
}
- if (chous) {
+ if (!chous) {
//改变dom位置
that.changeDomPosition(0, 0, (parseFloat(that.__wy / 10) * 3.999));
// that.getDomPosition();//抬起获取dom位置/持续停留使用
that.state = 'down';
- if (this.tab == 1) {
- $('#map').css("height", (index, value) => { //改变地图高度
- return '80%';
- })
- }
- if (this.tab == 2) {
- $('#map').css("height", (index, value) => { //改变地图高度
- return '80%';
- })
- }
-
+ $('#map').css("height", (index, value) => { //改变地图高度
+ return '80%';
+ })
map.invalidateSize(true); //应用地图高度
} else {
// that.changeDomPosition(0, 0, that.__wy - 50); //改变位置
diff --git a/xcxjingqingmap_patrol/js/vueMain.js b/xcxjingqingmap_patrol/js/vueMain.js
index 6f7db13..3220159 100644
--- a/xcxjingqingmap_patrol/js/vueMain.js
+++ b/xcxjingqingmap_patrol/js/vueMain.js
@@ -9,8 +9,8 @@
nowIndex: 1,
//基础路径
- // pathUrl: "http://localhost:89",
- pathUrl: "http://s16s652780.51mypc.cn/api/blade-jfpts",
+ pathUrl: "http://localhost:89",
+ // pathUrl: "https://web.byisf.com/api/blade-jfpts",
layer: null,
@@ -50,8 +50,8 @@
document.getElementById("area").style.display = "none";
document.getElementById("routeBtn").style.backgroundColor = "cornflowerblue";
document.getElementById("areaBtn").style.backgroundColor = "darkgrey";
- document.getElementById("seedata").style.height = "20%";
- document.getElementById("map").style.height = "80%";
+ // document.getElementById("seedata").style.height = "20%";
+ // document.getElementById("map").style.height = "80%";
//展示巡逻路线
this.showPolyLine(this.map);
@@ -64,8 +64,8 @@
document.getElementById("area").style.display = "block";
document.getElementById("routeBtn").style.backgroundColor = "darkgrey";
document.getElementById("areaBtn").style.backgroundColor = "cornflowerblue";
- document.getElementById("seedata").style.height = "20%";
- document.getElementById("map").style.height = "80%";
+ // document.getElementById("seedata").style.height = "20%";
+ // document.getElementById("map").style.height = "80%";
//展示巡逻区域
this.showPolygon(this.map);
}
--
Gitblit v1.9.3