1.巡逻路线文本上下移动调整 2.资讯列表超过10条数据时，底部上拉加载更多数据

Administrator

2021-06-15 fe23c26671c2465a84ee91c93857ddb1bcef227f

1.巡逻路线文本上下移动调整
2.资讯列表超过10条数据时，底部上拉加载更多数据

 components/uni-load-more/uni-load-more.vue

New file
@@ -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>

 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>

 xcxjingqingmap_patrol/img/photo.png

 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); //改变位置

 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);
            }