mint-ui Infinite scroll、Loadmore详细使用说明下拉刷新

mint-ui Infinite scroll、Loadmore详细使用说明

mint-ui Infinite scroll具体案例如下图:

①刚进入页面在发生请求之前会有加载中的图标显示

②在下拉列表过程中,上拉会刷新下一页数据

③手打,粘贴就能使用

img

img

具体代码如下:

<template>
      <div class="project">
            <div class="projectTitle">
                <div class="selectDiv">
                    <div v-for="(v,i) in selectText" :key="i" :class="[i==selectIndex ? 'selectItem selected' : 'selectItem']" @click="changeNavigation(i)">
                    <span>{{v}}</span>
                    <i class="icon iconfont icon-xiajiantou"></i>
                    </div>
                </div>
            </div>
            <div class="ulDiv" >
                <ul class="projectUl"
                    v-infinite-scroll="loadMore"
                    infinite-scroll-disabled="isMoreLoading"
                    :infinite-scroll-immediate-check="true"
                    infinite-scroll-distance="10">
                    <li class="projectLi" v-for="(v,i) in list" :key="i" @click="toProjectDetail">
                        <div class="liDes">
                            <p class="title">{{v.contract_name}}</p>
                            <p class="titleDes">描述信息</p>
                        </div>
                        <i class="icon iconfont icon-jiantou"></i>
                    </li>
                </ul>
                <!--显示加载中转菊花-->
                <div class="loading-box tc" v-if="isLoading">
                    <mt-spinner type="snake" class="loading-more"></mt-spinner>
                    <span class="loading-more-txt">加载中...</span>
                </div>
 
                <div class="no-more" v-if="noMore">没有更多了~</div>
            </div>
            <LinkTab></LinkTab>
      </div>
</template>
 
<script>
import LinkTab from '@/components/LinkTab.vue'
import Vue from 'vue'
import { Spinner, InfiniteScroll, Toast } from 'mint-ui'
Vue.use(InfiniteScroll)
Vue.component(Spinner.name, Spinner)
 
export default {
    name: 'Project',
    data () {
        return {
            selectText: ['待施工', '施工中', '已完工'],
            selectIndex: 0, // 默认施工中
            list: [],
            isLoading: false, // 加载中转菊花
            isMoreLoading: true, // 加载更多中
            noMore: false, // 是否还有更多
            pageInfo: { // 分页信息
                page: 1,
                page_size: 15,
                total: 0, // 总条数
                totalPage: 1 // 总分页数
            }
        }
    },
    created () {
    },
    mounted () {
        this.getProjectInfo()
    },
    components: {
        LinkTab
    },
    methods: {
        toProjectDetail () {
            this.$router.push({ path: '/gj_ProjectDetail' }) // 跳转项目详情页
        },
        changeNavigation (index) { // 切换标签页
            this.isMoreLoading = true
            this.selectIndex = index
            this.pageInfo.page = 1 // 初始化
            this.pageInfo.totalPage = 1
            this.list = []
            this.noMore = false
            this.getProjectInfo()
        },
        getProjectInfo (type) { // 获取项目列表
            let _this = this
            this.isLoading = true
            this.$http.get('/api/steward/projects', {
                params: {
                    status: _this.selectIndex,
                    current_page: _this.pageInfo.page,
                    per_page: _this.pageInfo.page_size
                }
            }).then((res) => {
                let datas = res.data
                if (datas.code === 0) {
                    if (type === 'loadMore') {
                        this.list = this.list.concat(datas.data.data)
                    } else {
                        this.list = datas.data.data
                    }
                    // 设置分页
                    this.pageInfo.total = datas.data.total
                    this.pageInfo.totalPage = Math.ceil(this.pageInfo.total / this.pageInfo.page_size)
                    console.log('总页数', Math.ceil(this.pageInfo.total / this.pageInfo.page_size))
                } else {
                    Toast({
                        message: datas.msg,
                        duration: 2000
                    })
                }
                this.isLoading = false
                this.isMoreLoading = false
            })
        },
        loadMore () { // 加载更多
            this.pageInfo.page += 1 // 增加分页
            this.isMoreLoading = true // 设置加载更多中
            this.isLoading = true // 加载中
            console.log(this.pageInfo.page, this.pageInfo.totalPage)
            if (this.pageInfo.page > this.pageInfo.totalPage) { // 超过了分页
                this.noMore = true // 显示没有更多了
                this.isLoading = false // 关闭加载中
                return false
            }
            // 做个缓冲
            setTimeout(() => {
                this.getProjectInfo('loadMore')
            }, 100)
        }
    }
}
</script>
 
<style lang="less" scoped>
    @import (reference) "~less/base.less";
    .project{
      .projectTitle{
        position: fixed;
        top: 0;
        width: 100%;
        height: 1.34rem;
        background-color: #ffffff;
        border-bottom: 1px solid #dddddd;
        .selectDiv{
          width: 100%;
          height: 1.34rem;
          display: flex;
          align-items: center;
          justify-content: center;
          .selectItem{
            height: 0.8rem;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-direction: column;
            box-sizing: border-box;
            &:nth-child(1){
              width: 30%;
              border-right: 1px solid #dddddd;
            }
            &:nth-child(2){
              width: 40%;
              border-right: 1px solid #dddddd;
            }
            &:nth-child(3){
              width: 30%
            }
            .iconfont {
              margin-top: 0.2rem;
              font-size: 0.3rem;
            }
          }
          .selected{
            color:#c6af6c;
          }
        }
      }
        .ulDiv{
            padding: 1.34rem 0 0.94rem 0;
            .projectUl{
                padding: 0 0 0 0.4rem;
                .projectLi{
                height: 1.28rem;
                line-height: 0.64rem;
                padding-right: 0.4rem;
                display: flex;
                align-items: center;
                justify-content: space-between;
                &:not(:last-child){
                    border-bottom: 0.01rem solid #dddddd;
                }
                .liDes{
                    width: 90%;
                    p{
                        overflow: hidden;
                        text-overflow: ellipsis;
                        white-space: nowrap;
                    }
                    .title{
                        color:#000000;
                        line-height: 0.4rem;
                        font-size: 0.28rem;
                    }
                    .titleDes{
                        color:#999999;
                        line-height: 0.4rem;
                        font-size: 0.28rem;
                    }
                }
                .iconfont {
                    font-size: 0.18rem;
                    color:#999999;
                }
                }
            }
            // 加载中。。。
            .loading-box{
                padding:.1rem 0;
 
                .loading-more{
                    display:inline-block;
                    vertical-align: middle;
                    margin-right:.2rem;
                }
                .loading-more-txt{
                    vertical-align: middle;
                    font-size:.22rem;
                }
            }
 
            .no-more{
                color:@c-999;
                font-size:.16rem;
                padding:.1rem 0 .2rem;
                .tc;
            }
        }
    }
 
</style>
展开阅读全文

Git 实用技巧

11-24
这几年越来越多的开发团队使用了Git,掌握Git的使用已经越来越重要,已经是一个开发者必备的一项技能;但很多人在刚开始学习Git的时候会遇到很多疑问,比如之前使用过SVN的开发者想不通Git提交代码为什么需要先commit然后再去push,而不是一条命令一次性搞定; 更多的开发者对Git已经入门,不过在遇到一些代码冲突、需要恢复Git代码时候就不知所措,这个时候哪些对 Git掌握得比较好的少数人,就像团队中的神一样,在队友遇到 Git 相关的问题的时候用各种流利的操作来帮助队友于水火。 我去年刚加入新团队,发现一些同事对Git的常规操作没太大问题,但对Git的理解还是比较生疏,比如说分支和分支之间的关联关系、合并代码时候的冲突解决、提交代码前未拉取新代码导致冲突问题的处理等,我在协助处理这些问题的时候也记录各种问题的解决办法,希望整理后通过教程帮助到更多对Git操作进阶的开发者。 本期教程学习方法分为“掌握基础——稳步进阶——熟悉协作”三个层次。从掌握基础的 Git的推送和拉取开始,以案例进行演示,分析每一个步骤的操作方式和原理,从理解Git 工具的操作到学会代码存储结构、演示不同场景下Git遇到问题的不同处理方案。循序渐进让同学们掌握Git工具在团队协作中的整体协作流程。 在教程中会通过大量案例进行分析,案例会模拟在工作中遇到的问题,从最基础的代码提交和拉取、代码冲突解决、代码仓库的数据维护、Git服务端搭建等。为了让同学们容易理解,对Git简单易懂,文章中详细记录了详细的操作步骤,提供大量演示截图和解析。在教程的最后部分,会从提升团队整体效率的角度对Git工具进行讲解,包括规范操作、Gitlab的搭建、钩子事件的应用等。 为了让同学们可以利用碎片化时间来灵活学习,在教程文章中大程度降低了上下文的依赖,让大家可以在工作之余进行学习与实战,并同时掌握里面涉及的Git不常见操作的相关知识,理解Git工具在工作遇到的问题解决思路和方法,相信一定会对大家的前端技能进阶大有帮助。
©️2020 CSDN 皮肤主题: 大白 设计师: CSDN官方博客 返回首页
实付0元
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值