zoukankan      html  css  js  c++  java
  • 【小程序】使用uni-app搭建小程序环境---列表上拉加载更多

    <template>
        <view>
            <view class="banner" @click="goDetail(banner)">
                <image class="banner-img" :src="banner.cover"></image>
                <view class="banner-title">{{ banner.title }}</view>
            </view>
            <view class="uni-list">
                <view class="uni-list-cell" hover-class="uni-list-cell-hover" v-for="(value, key) in listData" :key="key" @click="goDetail(value)">
                    <view class="uni-media-list">
                        <image class="uni-media-list-logo" :src="value.cover"></image>
                        <view class="uni-media-list-body">
                            <view class="uni-media-list-text-top">{{ value.title }}</view>
                            <view class="uni-media-list-text-bottom">
                                <text>{{ value.author_name }}</text>
                                <text>{{ value.published_at }}</text>
                            </view>
                        </view>
                    </view>
                </view>
            </view>
            <uni-load-more :status="status" :content-text="contentText" />
        </view>
    </template>
    
    <script>
    import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue';
    var dateUtils = require('../../../common/util.js').dateUtils;
    
    export default {
        components: {
            uniLoadMore
        },
        data() {
            return {
                banner: {},
                listData: [],
                last_id: '',
                reload: false,
                status: 'more',
                contentText: {
                    contentdown: '上拉加载更多',
                    contentrefresh: '加载中',
                    contentnomore: '没有更多'
                }
            };
        },
        onLoad() {
            this.getBanner();
            this.getList();
        },
        onPullDownRefresh() {
            this.reload = true;
            this.last_id = '';
            this.getBanner();
            this.getList();
        },
        onReachBottom() {
            this.status = 'more';
            this.getList();
        },
        methods: {
            getBanner() {
                let data = {
                    column: 'id,post_id,title,author_name,cover,published_at' //需要的字段名
                };
                uni.request({
                    url: 'https://unidemo.dcloud.net.cn/api/banner/36kr',
                    data: data,
                    success: data => {
                        uni.stopPullDownRefresh();
                        if (data.statusCode == 200) {
                            this.banner = data.data;
                        }
                    },
                    fail: (data, code) => {
                        console.log('fail' + JSON.stringify(data));
                    }
                });
            },
            getList() {
                var data = {
                    column: 'id,post_id,title,author_name,cover,published_at' //需要的字段名
                };
                if (this.last_id) {
                    //说明已有数据,目前处于上拉加载
                    this.status = 'loading';
                    data.minId = this.last_id;
                    data.time = new Date().getTime() + '';
                    data.pageSize = 10;
                }
                uni.request({
                    url: 'https://unidemo.dcloud.net.cn/api/news',
                    data: data,
                    success: data => {
                        if (data.statusCode == 200) {
                            let list = this.setTime(data.data);
                            this.listData = this.reload ? list : this.listData.concat(list);
                            this.last_id = list[list.length - 1].id;
                            this.reload = false;
                        }
                    },
                    fail: (data, code) => {
                        console.log('fail' + JSON.stringify(data));
                    }
                });
            },
            goDetail: function(e) {
                //                 if (!/前|刚刚/.test(e.published_at)) {
                //                     e.published_at = dateUtils.format(e.published_at);
                //                 }
                let detail = {
                    author_name: e.author_name,
                    cover: e.cover,
                    id: e.id,
                    post_id: e.post_id,
                    published_at: e.published_at,
                    title: e.title
                };
                uni.navigateTo({
                    url: '../list2detail-detail/list2detail-detail?detailDate=' + encodeURIComponent(JSON.stringify(detail))
                });
            },
            setTime: function(items) {
                var newItems = [];
                items.forEach(e => {
                    newItems.push({
                        author_name: e.author_name,
                        cover: e.cover,
                        id: e.id,
                        post_id: e.post_id,
                        published_at: dateUtils.format(e.published_at),
                        title: e.title
                    });
                });
                return newItems;
            }
        }
    };
    </script>
    
    <style>
    .banner {
        height: 360upx;
        overflow: hidden;
        position: relative;
        background-color: #ccc;
    }
    
    .banner-img {
         100%;
    }
    
    .banner-title {
        max-height: 84upx;
        overflow: hidden;
        position: absolute;
        left: 30upx;
        bottom: 30upx;
         90%;
        font-size: 32upx;
        font-weight: 400;
        line-height: 42upx;
        color: white;
        z-index: 11;
    }
    
    .uni-media-list-logo {
         180upx;
        height: 140upx;
    }
    
    .uni-media-list-body {
        height: auto;
        justify-content: space-around;
    }
    
    .uni-media-list-text-top {
        height: 74upx;
        font-size: 28upx;
        overflow: hidden;
    }
    
    .uni-media-list-text-bottom {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
    }
    </style>
  • 相关阅读:
    Thinkphp M方法出错,D方法却可以
    Composer项目安装依赖包
    wamp httpd-vhosts.conf
    博客园报错 Mixed Content: The page at 'https://i.cnblogs.com/EditPosts.aspx?opt=1' was loaded over HTTPS, but requested an insecure XMLHttpRequest endpoint 'http://upload.cnblogs.com/imageuploa
    Thinkphp js、css压缩类minify
    Thinkphp 不足之处
    Thinkphp 调试方法
    Lavavel 程序报错 MassAssignmentException in Model.php line 452: _token
    Laravel 安装mysql、表增加模拟数据、生成控制器
    Laravel 安装登录模块
  • 原文地址:https://www.cnblogs.com/websmile/p/11593790.html
Copyright © 2011-2022 走看看