From f6bb88e1f21de51f8d39de6fe5956053fb5a62ca Mon Sep 17 00:00:00 2001
From: Administrator <admin>
Date: Sat, 19 Jun 2021 08:32:04 +0800
Subject: [PATCH] 资讯列表，详情优化
---
pages/myself/childen/xinxi.vue | 4 +-
pages.json | 4 +
pages/article/article.vue | 56 ++++++++++++++++------------
pages/article/article_detail.vue | 39 +++++++++++--------
pages/myself/myself.vue | 5 +-
xcxMapJQ/xcxmap.html | 10 ++--
6 files changed, 67 insertions(+), 51 deletions(-)
diff --git a/pages.json b/pages.json
index 390288a..ee20636 100644
--- a/pages.json
+++ b/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",
diff --git a/pages/article/article.vue b/pages/article/article.vue
index 2e346c6..7540918 100644
--- a/pages/article/article.vue
+++ b/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();
}
}
});
diff --git a/pages/article/article_detail.vue b/pages/article/article_detail.vue
index bac29b4..69dd036 100644
--- a/pages/article/article_detail.vue
+++ b/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>
diff --git a/pages/myself/childen/xinxi.vue b/pages/myself/childen/xinxi.vue
index ecf1277..0ffbea3 100644
--- a/pages/myself/childen/xinxi.vue
+++ b/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;
diff --git a/pages/myself/myself.vue b/pages/myself/myself.vue
index 76bc805..0d3e992 100644
--- a/pages/myself/myself.vue
+++ b/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 {
diff --git a/xcxMapJQ/xcxmap.html b/xcxMapJQ/xcxmap.html
index f5043a1..e32706c 100644
--- a/xcxMapJQ/xcxmap.html
+++ b/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>
--
Gitblit v1.9.3