更新记录

1.0.0（2021-05-24）

上拉加载、下拉刷新

平台兼容性

HbuilderX/cli最低兼容版本
2.8.1

uni-app

app-vue	app-nvue	app-android	app-ios
?	?	?	?

H5-Safari	Android Browser	微信浏览器(Android)	QQ浏览器(Android)	Chrome	IE	Edge	Firefox	PC-Safari
?	?	?	?	?	?	?	?	?

微信小程序	支付宝小程序	百度小程序	字节小程序	QQ小程序	钉钉小程序	快手小程序	飞书小程序	京东小程序
?	?	?	?	?	?	?	?	?

快应用-华为	快应用-联盟
?	?

uni-app x

app-android	app-ios
?	?

H5-Safari	Android Browser	微信浏览器(Android)	QQ浏览器(Android)	Chrome	IE	Edge	Firefox	PC-Safari
?	?	?	?	?	?	?	?	?

简介

uniapp

本插件适用方便提示请求的信息，使用起来方便，可以后期二期开发，预加载上拉加载、下拉刷新、返回到顶部

这是一个项目下载地址链接 github

兼容说明

适合所有前端组件

导入

import ourLoading from '@/components/our-loading/our-loading.vue'
import selfRoll from '@/components/self-roll/roll.vue'
import nodata from '@/components/no-data/bottom.vue';
import noview from '@/components/no-data/back-view.vue';
import scrollView from '@/components/scroll-view/scroll-view.vue';

 export default {
        components: { ourLoading,selfRoll, nodata,noview,scrollView}
    }

组件说明

ourLoading 数据加载loding selfRoll 滑动超出屏幕出现的回到顶部的按钮 nodata 数据加载完成显示的底部视图 noview 没有数据的时候显示视图 scrollView 数据载体滑动组件

参数说明

ourLoading参数说明

参数	类型	默认值	描述
active	Boolean	false	控制器是否显示
text	String	false	自定义文本，显示在加载图标下方
color	String	#333	加载的内置图型样式的颜色
textColor	String	#333	载字体的颜色

selfRoll参数说明

参数	类型	默认值	单位	描述
active	Boolean	false		控制器是否显示
right	String	0	upx	距离有边框的距离

scrollView参数说明

参数	类型	默认值	单位	描述
height1	String	100	upx	控制器的高度
isReloadComplete1	Boolean	false		数据是否请求完成
isShowNodata1	Boolean	false		是否显示加载完成

方法说明

selfRoll方法说明

方法	名	说明
scrollTo()	返回	scrollview返回远点

scrollView方法说明

方法	名	说明
downdata()	下拉刷新	下拉的时候重新加载数据
updata()	上拉加载	上拉加载
onScroll()	滚动	scrollview滚动

使用案例

<template>
    <view id="parentId" style="width: 100%;">
        <view class="content">
            <view class="topView search">
                <view class="topView">
                    <view class="leftView">
                        <text>名师课堂</text>
                    </view>
                    <view class="rightView">

                    </view>
                    <view class="allGroup">
                        <view id="groups" class="item">
                            <text>全部分组</text>
                        </view>
                    </view>
                </view>
                <view class="bottomView">
                    <view id="filetype" class="leftView">
                        <text>视频</text>
                    </view>
                    <view class="rightView">
                        <text>共100个内容</text>
                    </view>
                </view>
            </view>
            <view class="bottomView">
                <scrollView height1="calc(100vh - 220upx - 90upx)" :isReloadComplete1="isReloadComplete"
                    :isShowNodata1="isReloadComplete&&!isNoData" @downdata="downdata" @updata="updata"
                    @onScroll="">
                    <view class="content1" v-for="(item,index) in dataList" :key="index">
                        <view class="item" @click="liveBtn(item)">
                            <view class="content2" :style="{height:height+'upx'}">
                                <view class="left">
                                    <view class="type">
                                        <text>类型</text>
                                    </view>
                                </view>
                                <view class="right">
                                    <view class="top"><text>{{item.title}}</text></view>
                                    <view class="center"><text>{{item.livedate}}</text></view>
                                    <view class="bottom"><text class="lf">{{item.price}}</text><text
                                            class="rh">{{item.liveStatus}}</text></view>
                                </view>
                            </view>
                        </view>
                    </view>
                    <noview v-show="isNoData"></noview>
                </scrollView>
            </view>
        </view>
        <selfRoll :active="roll" :left="right" @scrollTo="scrollTo"></selfRoll>
        <ourLoading isFullScreen :active="active" text="loading..." color="#13b6ff" textColor="#13b6ff" />
    </view>
</template>

<script>
    import noview from '../../components/no-data/back-view.vue';
    export default {
        components: {
            noview
        },
        data() {
            return {
                active: true,
                isReloadComplete: false,
                isNoData: true,
                page: 0,
                dataList: [{
                        "Id": "21",
                        "title": "抖音语文",
                        "thum": "/upload/article/20210311175044.jpg",
                        "viptype": "{\"type\":\"1\",\"discount\":\"0.00\"}",
                        "sviptype": "{\"type\":\"0\",\"discount\":\"0.00\"}",
                        "livedate": null,
                        "price": "100.00",
                        "videotype": 1
                    },
                    {
                        "Id": "20",
                        "title": "知识海洋",
                        "thum": "/upload/article/20210311164809.jpg",
                        "viptype": "{\"type\":\"1\",\"discount\":\"0.00\"}",
                        "sviptype": "{\"type\":\"0\",\"discount\":\"0.00\"}",
                        "livedate": null,
                        "price": "100.00",
                        "videotype": 1
                    },
                    {
                        "Id": "19",
                        "title": "思维导图",
                        "thum": "/upload/article/20210311163406.jpg",
                        "viptype": "{\"type\":\"1\",\"discount\":\"0.00\"}",
                        "sviptype": "{\"type\":\"0\",\"discount\":\"0.00\"}",
                        "livedate": null,
                        "price": "200.00",
                        "videotype": 1
                    },
                    {
                        "Id": "18",
                        "title": "国学经典·精品课",
                        "thum": "/upload/article/20210311163237.jpg",
                        "viptype": "{\"type\":\"1\",\"discount\":\"0.00\"}",
                        "sviptype": "{\"type\":\"0\",\"discount\":\"0.00\"}",
                        "livedate": null,
                        "price": "200.00",
                        "videotype": 1
                    },
                    {
                        "Id": "21",
                        "title": "抖音语文",
                        "thum": "/upload/article/20210311175044.jpg",
                        "viptype": "{\"type\":\"1\",\"discount\":\"0.00\"}",
                        "sviptype": "{\"type\":\"0\",\"discount\":\"0.00\"}",
                        "livedate": null,
                        "price": "100.00",
                        "videotype": 1
                    },
                    {
                        "Id": "20",
                        "title": "知识海洋",
                        "thum": "/upload/article/20210311164809.jpg",
                        "viptype": "{\"type\":\"1\",\"discount\":\"0.00\"}",
                        "sviptype": "{\"type\":\"0\",\"discount\":\"0.00\"}",
                        "livedate": null,
                        "price": "100.00",
                        "videotype": 1
                    },
                    {
                        "Id": "19",
                        "title": "思维导图",
                        "thum": "/upload/article/20210311163406.jpg",
                        "viptype": "{\"type\":\"1\",\"discount\":\"0.00\"}",
                        "sviptype": "{\"type\":\"0\",\"discount\":\"0.00\"}",
                        "livedate": null,
                        "price": "200.00",
                        "videotype": 1
                    },
                    {
                        "Id": "18",
                        "title": "国学经典·精品课",
                        "thum": "/upload/article/20210311163237.jpg",
                        "viptype": "{\"type\":\"1\",\"discount\":\"0.00\"}",
                        "sviptype": "{\"type\":\"0\",\"discount\":\"0.00\"}",
                        "livedate": null,
                        "price": "200.00",
                        "videotype": 1
                    }
                ],
                height: 180,
                systemHeight: 0, //系统的高度
                roll: false, //返回顶部
                right: '0upx', //右侧距离
                scrollTop: 0, //设置滚动的距离
            }
        },
        onReady() { //页面初次渲染完毕执行
            this.getInfo();
        },
        onLoad(paramater) {
            this.systemHeight = this.getSystemMsg('windowHeight');

            this.get_group_atricle_list();
        },
        methods: {
            getInfo() {
                this.right = this.getViewWidth('.search');
            },
            /*获取分组文章列表*/
            get_group_atricle_list() {
                this.page = 0;
                ++this.page;
                setTimeout(() => {
                    this.isNoData = false;
                    this.dataList = this.dataList;
                    this.active = false;
                }, 2000);

            },
            /*下拉刷新*/
            downdata() {
                /* console.log('下拉刷新'); */
                this.isNoData = true;
                this.page = 0;
                ++this.page;

                /*
                这里面数据请求完成调用
                uni.$emit('downdataHD',{type:'down'});
                */

                setTimeout(() => {
                    this.isNoData = false;
                    this.dataList = this.dataList;
                    uni.$emit('downdataHD', {
                        type: 'down'
                    });
                }, 2000);

            },
            /*上拉加载*/
            updata() {
                /* console.log('上拉加载'); */
                /*
                这里面数据请求完成调用
                uni.$emit('updataHD',{type:'up'});
                */
                ++this.page;

                setTimeout(() => {
                    if (this.page == 3) {
                        this.isReloadComplete = true;
                        this.isNoData = false;
                    }
                    this.dataList = this.dataList.concat(this.dataList);
                    uni.$emit('updataHD', {
                        type: 'up'
                    });
                }, 2000);

            },
            //scrollview滚动
            (e) { //nvue暂不支持滚动监听，可用bindingx代替
                /* console.log("滚动距离为：" + e.scrollTop);
                console.log(this.getSystemMsg('windowHeight')); */
                if (e.scrollTop > this.systemHeight) {
                    this.roll = true;
                } else {
                    this.roll = false;
                }
            },
            /*scrollview返回远点*/
            scrollTo() {
                uni.$emit('goTop', '');
            },
            //获取系统参数
            getSystemMsg: function(key) {
                var result = '';
                uni.getSystemInfo({
                    success: (res) => {
                        console.log(res);
                        if (key === 'windowHeight') {
                            result = res.windowHeight;
                        }
                    }
                });
                return result;
            },
            //获取页面宽度
            getViewWidth: function(className) {
                // 注意：想要拿到元素实例，需要在实例已经挂载到页面上才可以
                var right = 0;
                const query = uni.createSelectorQuery().in(this);
                query.select(className).boundingClientRect(data => {
                    right = (data.right) * 375 / data.width + 240 + 'upx';

                }).exec();
                // console.log(right);
                return right;
            },

        }
    }
</script>

<style lang="scss">
    uni-page-body>uni-view:first-child {
        padding-bottom: 0px !important; //不然底部会空出来
    }

    page {
        position: relative;
        background-color: $uni-bg-color;
        overflow: hidden;

    }

    .content {
        width: auto;
        margin: 90upx 15upx 0 15upx;
        box-sizing: border-box;
        // overflow: hidden;
        display: flex;
        flex-direction: column;

        // background-color: red;
    }

    .content>.topView {
        width: 100%;
        height: 220upx;
        // overflow: hidden;
        // background-color: red;
        display: flex;
        flex-direction: column;

    }

    .content>.topView>.topView {
        height: 60%;
        width: 100%;
        // background-color: blue;
        border-bottom: 1upx #f2f2f2 solid;
        position: relative;
    }

    .content>.topView>.topView>.leftView {
        width: 70%;
        height: 100%;
        // background-color: green;
        display: flex;
        align-items: center;
    }

    .content>.topView>.topView>.leftView>text {
        width: 100%;
        font-size: 38upx;
        font-weight: bold;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }

    .content>.topView>.topView>.allGroup {
        width: 210upx;
        height: 100%;
        position: absolute;
        right: -20upx;
        top: 0;

        display: flex;
        align-items: center;
        justify-content: center;
    }

    .content>.topView>.topView>.allGroup>.item {
        width: 100%;
        height: calc(220upx * 0.55 * 0.6);
        background-color: #13b6ff;
        border-top-left-radius: calc(220upx * 0.55 * 0.6);
        border-bottom-left-radius: calc(220upx * 0.55 * 0.6);

        display: flex;
        align-items: center;
        justify-content: center;
    }

    .content>.topView>.topView>.allGroup>.item>text {
        font-size: 30upx;
        color: $uni-bg-color;
    }

    .content>.topView>.topView>.allGroup>.item>text span {
        font-size: 28upx;
        margin-left: 10upx;
    }

    .content>.topView>.bottomView {
        height: 45%;
        width: 100%;
        // background-color: green;
        border-bottom: 1upx #f2f2f2 solid;
        display: flex;
    }

    .content>.topView>.bottomView>.leftView {
        max-width: 60%;
        height: 100%;
        display: flex;
        align-items: center;
    }

    .content>.topView>.bottomView>.leftView>text {
        font-size: 34upx;
        color: $uni-text-color;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }

    .content>.topView>.bottomView>.leftView>text span {
        font-size: 30upx;
        margin-left: 12upx;
    }

    .content>.topView>.bottomView>.rightView {
        flex: 1;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: flex-end;
        overflow: hidden;

    }

    .content>.topView>.bottomView>.rightView>text {
        font-size: 33upx;
        color: $uni-text-color-grey;
        font-weight: bold;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }

    .content>.bottomView {
        width: 100%;
        box-sizing: border-box;
        position: relative;
        // background-color: red;
    }

    .content>.bottomView .content1 {
        width: 100%;

        display: flex;
        flex-wrap: wrap;

        box-sizing: border-box;

        // background-color: red;
    }

    .content>.bottomView .content1>.item {

        width: 100%;
        height: 220upx;

        display: flex;
        flex-wrap: wrap;

        box-sizing: border-box;

        background-color: $uni-bg-color;

        border-bottom: 1upx #f2f2f2 solid;
    }

    .content>.bottomView .content1>.item>.content2 {
        width: 100%;
        margin: 20upx 0;
        // background-color: red;
        display: flex;
        box-sizing: border-box;

        // overflow: hidden;
        white-space: nowrap;

    }

    .content>.bottomView .content1>.item>.content2>.left {
        width: 250upx;
        height: 100%;

        position: relative;

        // background-color: yellow;
    }

    .content>.bottomView .content1>.item>.content2>.left>.picture {
        width: 100%;
        height: 100%;
    }

    .content>.bottomView .content1>.item>.content2>.left>.icon {
        width: 50px;
        height: 50px;

        position: absolute;
        z-index: 3;
        top: 0;
        left: 0;
    }

    .content>.bottomView .content1>.item>.content2>.left>.type {
        position: absolute;
        z-index: 3;
        width: 90upx;
        height: 40upx;
        right: 0;
        top: 20upx;
        background-color: rgba($color: #000000, $alpha: 0.3);

        display: flex;
        align-items: center;
        justify-content: center;

        border-top-left-radius: 20upx;
        border-bottom-left-radius: 20upx;

    }

    .content>.bottomView .content1>.item>.content2>.left>.type>text {
        font-size: 26upx;
        color: $uni-bg-color;
    }

    .content>.bottomView .content1>.item>.content2>.right {

        height: 100%;

        display: flex;
        flex-direction: column;
        overflow: hidden;

        box-sizing: border-box;
        flex: 1;

        margin-left: 20upx;

        // background-color: blue;

    }

    .content>.bottomView .content1>.item>.content2>.right>.top {
        width: 100%;
        height: 50%;
        display: flex;
        white-space: nowrap;

        // background-color: yellow;

        box-sizing: border-box;
    }

    .content>.bottomView .content1>.item>.content2>.right>.top>text {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;

        box-sizing: border-box;

        font-size: 34upx;

        color: $uni-text-color;

    }

    .content>.bottomView .content1>.item>.content2>.right>.center {
        width: 100%;
        height: 25%;

        display: flex;
        white-space: nowrap;

        // background-color: yellow;

        box-sizing: border-box;
    }

    .content>.bottomView .content1>.item>.content2>.right>.center>text {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;

        box-sizing: border-box;

        width: 100%;

        font-size: 28upx;

        color: $uni-text-color-grey;
    }

    .content>.bottomView .content1>.item>.content2>.right>.bottom {
        width: 100%;
        height: 25%;

        // background-color: yellow;

        display: flex;
        align-items: flex-end;

        margin: 0;
    }

    .content>.bottomView .content1>.item>.content2>.right>.bottom>.lf {
        flex: 1;

        font-size: 34upx;

        color: #f74163;
    }

    .content>.bottomView .content1>.item>.content2>.right>.bottom>.rh {
        font-size: 28upx;
        display: none;
    }
</style>

数据上拉加载、下拉刷新scrollView 上拉加载 下拉刷新

更新记录

1.0.0（2021-05-24）

平台兼容性

uni-app

uni-app x

简介

兼容说明

导入

组件说明

参数说明

ourLoading参数说明

selfRoll参数说明

scrollView参数说明

方法说明

selfRoll方法说明

scrollView方法说明

使用案例

隐私、权限声明

1. 本插件需要申请的系统权限列表：

2. 本插件采集的数据、发送的服务器地址、以及数据用途说明：

3. 本插件是否包含广告，如包含需详细说明广告表达方式、展示频率：

许可协议

MIT协议

多级联动滚动，加上自定义导航条，tab切换

数据上拉加载、下拉刷新scrollView

提示信息pop

数据上拉加载、下拉刷新scrollView 上拉加载 下拉刷新

更新记录

1.0.0（2021-05-24）

平台兼容性

uni-app

uni-app x

简介

兼容说明

导入

组件说明

参数说明

ourLoading参数说明

selfRoll参数说明

scrollView参数说明

方法说明

selfRoll方法说明

scrollView方法说明

使用案例

隐私、权限声明

1. 本插件需要申请的系统权限列表：

2. 本插件采集的数据、发送的服务器地址、以及数据用途说明：

3. 本插件是否包含广告，如包含需详细说明广告表达方式、展示频率：

许可协议

MIT协议

多级联动滚动，加上自定义导航条，tab切换

数据上拉加载、下拉刷新scrollView

提示信息pop

Modal title

数据上拉加载、下拉刷新scrollView 上拉加载下拉刷新