资讯列表，详情优化

Administrator

2021-06-19 f6bb88e1f21de51f8d39de6fe5956053fb5a62ca

资讯列表，详情优化

 pages.json

@@ -160,6 +160,7 @@
            "name": "equipment",
            "style": {
                "navigationBarTitleText": "资讯"
                // "enablePullDownRefresh":true
            }
        },
        {
@@ -238,7 +239,8 @@
        }
    ],
    "globalStyle": {//将组件安装在项目的components目录下，并符合components/组件名称/组件名称.vue目录结构。可以不用引用、注册，直接在页面中使用。
        "autoscan": true
        "autoscan": true,
        "onReachBottomDistance":160
    },
    "tabBar": {
        "color": "#7a7e83",

 pages/article/article.vue

@@ -1,9 +1,9 @@
<template>
    <view class="advisory-big">
            <!-- 顶部下拉刷新 -->
            <view v-show="isFlash">
            <!-- <view v-show="isFlash">
                <uni-load-more :status="loadStatus" ></uni-load-more>
            </view>
            </view> -->
            <view  v-for="i in data" class="advisory-model" @click="goDetail(i)">
                <view class="advisory-left">
                    <view class="advisory-title-top">
@@ -20,9 +20,9 @@
                
            </view>
            <!-- loading加载提示处 -->
            <view v-show="isLoadMore">
            <!-- <view v-show="isLoadMore">
                <uni-load-more :status="loadStatus" ></uni-load-more>
            </view>
            </view> -->
    </view>
</template>

@@ -34,7 +34,7 @@
                pathUrl:"http://s16s652780.51mypc.cn/api/blade-jfpts",
                page:1,
                pagesize:10,
                loadStatus:'loading',  //加载样式：more-加载前样式，loading-加载中样式，nomore-没有数据样式
                // loadStatus:'loading',  //加载样式：more-加载前样式，loading-加载中样式，nomore-没有数据样式
                isLoadMore:false,  //是否加载中
                isFlash:false,//是否刷新
                data:[]
@@ -45,23 +45,26 @@
        },
        //上拉加载更多
        onReachBottom(){  //上拉触底函数
            console.log("上拉了")
            if(!this.isLoadMore){  //此处判断，上锁，防止重复请求
                this.isLoadMore=true
                // this.isLoadMore=true
                this.page+=1
                this.getArtcilePageList()
                this.getArtcilePageList(2)
            }
        },
        //下拉刷新
        onPullDownRefresh() {
            // console.log("上拉了！....");
            // console.log("下拉了！....");
            if(!this.isFlash){  //此处判断，上锁，防止重复请求
                this.isFlash=true;
                // this.isFlash=true;
                this.page =1;
                this.getArtcilePageList();
                this.getArtcilePageList(1);
                uni.stopPullDownRefresh();
            }
        },
        onLoad() {
            this.getArtcilePageList();
            this.getArtcilePageList(1);
            uni.stopPullDownRefresh();
        },
        methods:{
            //去跳转详情页面
@@ -88,7 +91,7 @@
            },
            
            //获取资讯信息
            getArtcilePageList(){
            getArtcilePageList(tab){
                var that = this;
                uni.request({
                    url: that.pathUrl+'/article/article/page',
@@ -100,25 +103,30 @@
                    success: (res) => {
                        if(res.data.code==200){
                            if(res.data.data.records){
                                //如果总数小于pageSize,不做其他操作
                                if(res.data.data.total<this.pagesize){
                                if(tab==1){
                                    that.data = res.data.data.records;
                                }else{
                                    if(res.data.data.records.length<this.pagesize){
                                        //如果数量小于分页数量，则为最后一页
                                        this.isLoadMore=true;
                                        this.loadStatus='nomore';
                                    //如果总数小于pageSize,不做其他操作
                                    if(res.data.data.total<this.pagesize){
                                        that.data = res.data.data.records;
                                    }else{
                                        this.isLoadMore=false
                                        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);
                                        })
                                    }
                                    res.data.data.records.forEach((item)=>{
                                        that.data.push(item);
                                    })
                                }
                            }else{
                                this.isLoadMore=true;
                                this.loadStatus='nomore';
                                // this.isLoadMore=true;
                                // this.loadStatus='nomore';
                            }
                            uni.stopPullDownRefresh();
                        }
                    }
                });

 pages/article/article_detail.vue

@@ -5,17 +5,18 @@
            <view class="banner-title">{{article.title}}</view>
        </view>
        
		
        <view class="article-content">
            <video id="myVideo" class="video" v-if="video" :src="article.videoUrl" muted="false" @error="videoErrorCallback"></video>
            <u-parse :content="content" @navigate="navigate"></u-parse>
        </view>
		
        <view class="article-meta">
            <view class="article-author">{{article.sourceName}}</view>
            <text class="article-text">发表于</text>
            <text class="article-time">{{article.createTime}}</text>
        </view>
		
		
        <view class="article-content">
            <!-- <video id="myVideo" class="video" v-if="video" :src="article.videoUrl" muted="false" @error="videoErrorCallback"></video> -->
            <u-parse :content="content" @navigate="navigate"></u-parse>
        </view>
		
    </view>
</template>

@@ -97,39 +98,43 @@
        // background-color: #007AFF;
        width: 100%;
        height: 80rpx;
        position: relative;
        top: 40rpx;
        font-size: 24rpx;
        color: #808080;
        display: flex;
        flex-direction: row;
        align-items: center;
        position: relative;
        left: 20rpx;
        // justify-content: center;
        // font-weight: 550;
        
        
        .article-author{
            position: relative;
            left: 20rpx;
            letter-spacing: 1px;
            float: left;
        }
        
        .article-text{
            position: relative;
            left: 20rpx;
            left: 15px;
        }
        
        .article-time{
            position: relative;
            left: 50rpx;
            left: 30px;
        }
    }
    
    .article-content{
        position: relative;
        top: 20rpx;
        left: 3%;
        bottom: 2%;
        width: 94%;
        border-bottom: 1px solid rgba(128,128,128,0.1);
        margin-bottom: 20px;
        // border-bottom: 1px solid rgba(128,128,128,0.1);
        
        .video{
            width: 100%;
        }
        // .video{
        //     width: 100%;
        // }
    }
</style>

 pages/myself/childen/xinxi.vue

@@ -151,7 +151,7 @@
            width: 94%;
            margin: 0 auto;
            height: 90rpx;
            border-bottom: 1px solid rgba(128,128,128,0.1);
            border-bottom: 1px solid rgba(247,247,247,0.8);
            line-height: 90rpx;
            
            .title{
@@ -231,7 +231,7 @@
            width: 94%;
            margin: 0 auto;
            height: 90rpx;
            border-bottom: 1px solid rgba(128,128,128,0.1);
            border-bottom: 1px solid rgba(247,247,247,0.8);
            
            .title{
                line-height: 90rpx;

 pages/myself/myself.vue

@@ -326,10 +326,11 @@
                display: flex;
                align-items: center;
                justify-content: space-between;
                border-bottom: 1px solid rgba($color: #000000, $alpha: 0.05);
                // border-bottom: 1px solid rgba($color: #000000, $alpha: 0.05);
                border-bottom: 1px solid rgba($color: #F7F7F7, $alpha:0.8);

                &:hover {
                    background-color: rgba($color: #000000, $alpha: 0.05);
                    background-color: rgba($color: #F7F7F7, $alpha:0.8);
                }

                .buts {

 xcxMapJQ/xcxmap.html

@@ -69,12 +69,12 @@
            <div class="main">
                <div class="div-alarm-people">
                    <div class="f-m-once">
                        <img class="f-m-o-t-img" src="./img/ren.png" alt="">
                        <img class="f-m-o-t-img" src="./img/people1.png" alt="">
                        <div class="f-m-o-title">接警人</div>
                        <div class="f-m-o-center">{{seedata.alarmPeople}}</div>
                    </div>
                    <div class="f-m-once-phone-number">
                        <img class="f-m-o-t-img" src="./img/dianhua.png" alt="">
                        <img class="f-m-o-t-img" src="./img/phone.png" alt="">
                        <div class="f-m-o-title">联系电话</div>
                        <div class="f-m-o-center">{{seedata.phoneNumber}}</div>
                    </div>
@@ -84,12 +84,12 @@

                <div class="div-alarm-people">
                    <div class="f-m-once">
                        <img class="f-m-o-t-img" src="./img/shijian.png" alt="">
                        <img class="f-m-o-t-img" src="./img/alarm.png" alt="">
                        <div class="f-m-o-title">报警时间</div>
                        <div class="f-m-o-center">{{seedata.alarmTime}}</div>
                    </div>
                    <div class="f-m-once-alarm-type">
                        <img class="f-m-o-t-img" src="./img/leixing.png" alt="">
                        <img class="f-m-o-t-img" src="./img/type1.png" alt="">
                        <div class="f-m-o-title">报警类型</div>
                        <div class="f-m-o-center">{{seedata.alarmType}}</div>
                    </div>
@@ -98,7 +98,7 @@

                <div class="div-alarm-people">
                    <div class="f-m-once-desc">
                        <img class="f-m-o-t-img-desc" src="./img/beizhu.png" alt="">
                        <img class="f-m-o-t-img-desc" src="./img/desc2.png" alt="">
                        <div class="f-m-o-title-desc">备注</div>
                        <div class="f-m-o-center-desc">{{seedata.bz}}</div>
                    </div>