您现在的位置是:首页 > 前端开发 > Uni-App

uni-app滚动到底部加载数据

admin2019-05-09Uni-App 人已围观

简介uni-app滚动到底部加载数据,滚动加载。

我们直接上代码吧,因为这个接口是豆瓣的,写的不好的,下次给大家重新写一次

标签代码

<template>
    <view>
        <scroll-view class="content" scroll-y @scrolltolower="ButtonClick" id="height" :style="'height:' + height + 'px ;'">
            <view class="li" v-for="(item, index) in movieData" :key="index">
                <image :src="item.images.small" mode=""></image>
                <text v-for="(sitem, sindex) in item.directors" :key="sindex" class="text">{{ sitem.name }}</text>
            </view>
        </scroll-view>
    </view>
</template>
 

script 代码块
 

<script>
export default {
    data() {
        return {
            height: 0,
            start: 0, // 默认第1页
            count: 10, //每条显示的数量
            movieData: [], //数据
        };
    },
    mounted() {
        let that = this;

        // 获取设备宽度
        uni.getSystemInfo({
            success: function(res) {
                that.height = res.windowHeight;
            }
        });

        //初始化数据
        uni.request({
            url: 'https://api.douban.com/v2/movie/top250',
            dataType: 'JSON',
            data: {
                start: that.start,
                count: that.count
            },
            success(res) {
                that.movieData = res.data.subjects;
            }
        });
    },
    methods: {
        // 滚动到底触发的事件
        ButtonClick() {
           
            uni.showLoading({
                title: '加载中...'
            });

            let that = this;
            // 因为这个没有最大的页数。我只能这样子写
            if (that.start) {
                that.start += 1;
            }

            //触发请求
            uni.request({
                url: 'https://api.douban.com/v2/movie/top250',
                dataType: 'JSON',
                data: {
                    start: that.start,
                    count: that.count
                },
                success(res) {
                    that.movieData = res.data.subjects;
                    // 这个拼接到数组里面就ok了
                    res.data.subjects.forEach(item => {
                        // 遍历数组,拼接
                        that.movieData.push(item);
                    });

                    // 回调成功 就关闭加载框
                    uni.hideLoading();

                    //在提示一下,加载成功
                    uni.showToast({
                        title: '成功',
                        duration: 2000
                    });
                }
            });
        }
    }
};
</script>

<style>
.li {
    display: flex;
    align-items: center;
}
.li image {
    width: 160upx;
    height: 200upx;
}
</style>

 
 

很赞哦!44

文章评论

      匿名评论
    • 评论
    人参与,条评论

站点信息

  • 建站时间:2018-12-23
  • 网站程序:帝国CMS7.5
  • 文章统计: 141
  • 文章评论:490条
  • 统计数据百度统计
  • 微信公众号:扫描二维码,关注我们