Uni-app 之文章案例

一、效果图

1、小程序

   

 二、源码

<template>
    <view>
        <scroll-view scroll-x class="bg-white nav" scroll-with-animation :scroll-left="scrollLeft">
            <view class="cu-item" :class="index==TabCur?'text-red cur':''" v-for="(item,index) in categories" :key="index"
             @tap="tabSelect" :data-id="item.cateId">
                {{item.name}}
            </view>
        </scroll-view>
        <view v-for="(item, index) in artList" :key="index" class="cu-card dynamic margin-top" :class="(item.num>1)?'no-card':''">
            <view class="cu-item shadow">
                <view class="cu-list menu-avatar">
                    <view class="cu-item">
                        <view class="cu-avatar round lg" :style="{'backgroundImage':'url('+item.u_face+')'}"></view>
                        <view class="content flex-sub">
                            <view>{{item.u_name}}</view>
                            <view class="text-gray text-sm flex justify-between">
                                {{item.time}}
                            </view>
                        </view>
                    </view>
                </view>
                <view class="text-content">
                    {{item.art_title}}
                </view>
                <view class="grid flex-sub padding-lr" :class="item.num>1?'col-3 grid-square':'col-1'">
                    <view class="bg-img" :class="item.num>1?'':'only-img'" :style="{'backgroundImage':'url('+host+item2.content+')'}"
                     v-for="(item2,index2) in item.photo" :key="index2">
                    </view>
                </view>
                <view class="text-gray text-sm text-right padding">
                    <text class="cuIcon-attentionfill margin-lr-xs"></text> {{item.hits}}
                    <text class="cuIcon-appreciatefill margin-lr-xs"></text> {{item.click}}
                    <text class="cuIcon-messagefill margin-lr-xs"></text> {{item.comments}}
                </view>
            </view>
        </view>
    </view>
</template>

<script>
    let sign = require("../../commons/sign.js");
    let _this, page = 1, catid = 0, isEnd = false;
    export default {
        data() {
            return {
                TabCur: 0,
                scrollLeft: 0,
                
                isCard: false,

                categories: [{
                    cateId: 0,
                    name: "全部"
                }],
                artList: [],
                host: ''
            }
        },
        onLoad() {
            _this = this;
            _this.host = _this.staticServer;
            // 加载文章分类
            uni.request({
                url: _this.apiServer + 'category&m=index',
                method: 'GET',
                success: res => {
                    if (res.data.status == 'ok') {
                        var categories = res.data.data;
                        for (var k in categories) {
                            _this.categories.push({
                                cateId: k,
                                name: categories[k]
                            });
                        }
                        _this.getArticleList();
                    } else {
                        uni.showToast({
                            title: res.data.data,
                            icon: "none"
                        })
                    }
                }
            });
        },
        onPullDownRefresh() {
            _this.init();
            _this.getArticleList();
        },
        onReachBottom() {
            _this.getArticleList();
        },
        methods: {
            init() {
                page = 1;
                isEnd = false;
                _this.artList = [];
            },
            tabSelect(e) {
                _this.TabCur = e.currentTarget.dataset.id;
                _this.scrollLeft = (e.currentTarget.dataset.id - 1) * 60;
                catid = _this.categories[_this.TabCur].cateId;
                _this.init();
                _this.getArticleList();
            },
            getArticleList(){
                if (isEnd) {
                    return false;
                }
                uni.showLoading({
                    title: "正在加载...",
                    mask: true
                })
                uni.request({
                    url: _this.apiServer + 'art&m=getList',
                    method: "GET",
                    data:{
                        cate: catid,
                        page: page
                    },
                    success(res) {
                        if (res.data.status == 'empty') {
                            isEnd = true;
                            uni.showToast({
                                title: "已全部加载文章",
                                icon: "none"
                            })
                        } else if(res.data.status == 'ok') {
                            _this.artList = _this.artList.concat(res.data.data);
                            page++;
                        }
                    },
                    complete(){
                        uni.hideLoading();
                        uni.stopPullDownRefresh();
                    }
                })
            }
        }
    }
</script>

<style>
    .nav .cu-item {
        padding: 0 40upx;
    }
    .cu-card > .cu-item{
        margin: 0;
    }
</style>

 项目源码：https://github.com/yangsphp/article-uniapp