资讯页面优化

Administrator

2021-06-10 556fa30bf01c3c79b7af7ac15667e58aae283c26

资讯页面优化

 pages.json

@@ -185,9 +185,9 @@
        "backgroundColor": "#ffffff",
        "list": [{
                    "pagePath": "pages/article/article",
                    "text": "首页",
                    "iconPath": "static/img/index.png",
                    "selectedIconPath": "static/img/indexH.png"
                    "text": "资讯",
                    "iconPath": "static/img/article.png",
                    "selectedIconPath": "static/img/articleH.png"
            },{
                "pagePath": "pages/workbench/workbench",
                "text": "工作台",

 pages/article/article.vue

@@ -1,36 +1,91 @@
<template>
    <view class="advisory-big">
        
        <view  v-for="i in data" class="advisory-model" @click="goDetail(i)">
            <view class="advisory-left">
                <view class="advisory-title-top">
                    <view class="advisory-title">{{i.title}}</view>
         <!-- <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-for="i in data" class="advisory-model" @click="goDetail(i)">
                <view class="advisory-left">
                    <view class="advisory-title-top">
                        <view class="advisory-title">{{i.title}}</view>
                    </view>
                    <view class="advisory-title-down">
                        <view class="advisory-title-name">{{i.sourceName}}</view>
                        <view class="advisory-title-time">{{i.createTime}}</view>
                    </view>
                </view>
                <view class="advisory-title-down">
                    <view class="advisory-title-name">{{i.sourceName}}</view>
                    <view class="advisory-title-time">{{i.createTime}}</view>
                <view class="advisory-right">
                    <image :src="i.url"></image>
                </view>
				
            </view>
            <view class="advisory-right">
                <image :src="i.url"></image>
            </view>
        </view>
        <!-- </view> -->
        <!-- <uni-load-more :status="status" :content-text="contentText"/> -->
		
        
    </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: '没有更多'
                // },
                data:[]
            }
        },
        mounted(){
            this.getArtcilePageList();
        },
        onPullDownRefresh () {            // 下拉刷新事件
            console.log('触发下拉刷新了')
            // 一些列操作
            uni.stopPullDownRefresh()        // 结束当前刷新事件
          },
        methods:{
            //去跳转详情页面
            goDetail(e){
@@ -66,6 +121,31 @@
                    }
                });
            },
            //下拉获取更多
            // 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>
@@ -104,6 +184,11 @@
                        width: 92%;
                        font-size: 15px;
                        font-weight: 550;
                        overflow: hidden;
                        text-overflow: ellipsis;
                        display: -webkit-box; 
                        -webkit-line-clamp: 2; 
                        -webkit-box-orient: vertical;
                    }
                    
                    
@@ -118,13 +203,20 @@
                    color: #808080;
                    
                    .advisory-title-name{
                        width: 130rpx;
                        float: left;
                        letter-spacing: 1px;
                        overflow: hidden;
                        text-overflow: ellipsis;
                        display: -webkit-box; 
                        -webkit-line-clamp: 1; 
                        -webkit-box-orient: vertical;
                        // background-color:#0078A8;
                    }
                    
                    .advisory-title-time{
                        position: relative;
                        left: 6%;
                        left: 15rpx;
                    }
                }
                

 pages/article/article_detail.vue

@@ -12,7 +12,7 @@
        </view>
        
        <view class="article-meta">
            <text class="article-author">{{article.sourceName}}</text>
            <view class="article-author">{{article.sourceName}}</view>
            <text class="article-text">发表于</text>
            <text class="article-time">{{article.createTime}}</text>
        </view>
@@ -37,6 +37,7 @@
            onLoad(event) {
                var that = this;
                this.article = JSON.parse(decodeURIComponent(event.detailData));
                //获取资讯详信息
                uni.request({
                    url: that.pathUrl+'/article/article/detail?id='+this.article.id,
                    method:'GET',
@@ -56,6 +57,7 @@
                });
                
            },
            //创建视频
            onReady: function () {
                this.videoContext = uni.createVideoContext("myVideo");
            },
@@ -110,7 +112,7 @@
        
        .article-text{
            position: relative;
            left: 40rpx;
            left: 20rpx;
        }
        
        .article-time{