精华内容
下载资源
问答
  • vue移动端列表组件,支持下拉刷新,上拉加载更多
  • vue查看更多的写法

    千次阅读 2019-07-05 10:58:28
    //先清除其他的查看更多样式 for(var i=0;i;i++){ var more_show_other = my_card[i].childNodes for(var j=0;j;j++){ if(more_show_other[j].nodeType==1&&more_show_other[j].className=="more_show"){ ...

    页面布局:

    <div class="my_card" v-for="(item,index) in tableData" style="margin-bottom: 10px;">
    	<div v-for="column in tableColumns.slice(0,3)">
    		<div class="column-box">
    			<label>{{column.title}}</label>
    			<div class="column_box">
    				<template></template>
    			</div>
    		</div>
    	</div>
    	<div v-for="column in tableColumns.slice(3,tableColumns.length)" class="more_show" style="display: none;">
    		<div class="column-box">
    			<label>{{column.title}}</label>
    				<div class="column_box">
    				    <template></template>
    				</div>
    			</div>
    		</div>
    	<div style="text-align: center;">
    		<el-button type="primary" class="button" v-on:click="seeMore(index)" style="font-size: 14px;margin-top: 10px;">查看更多</el-button>
    	</div>
    </div>

    js:

    //查看更多
    seeMore:function(index){
    	var my_card = document.getElementsByClassName("my_card")
    	var more_show = my_card[index].childNodes
    	console.log(my_card)
    	//先清除其他的查看更多样式
    	for(var i=0;i<my_card.length;i++){
    		var more_show_other = my_card[i].childNodes
    		for(var j=0;j<more_show_other.length;j++){
    			if(more_show_other[j].nodeType==1&&more_show_other[j].className=="more_show"){
    				more_show_other[j].style.display = "none"
    			}
    		}
    	}
    	//再打开当前的查看更多
    	for(var i=0;i<more_show.length;i++){
    		if(more_show[i].nodeType==1&&more_show[i].className=="more_show"){
    			 more_show[i].style.display = "block"
    		}
    	}
    },

    样式:

    /*卡片视图添加样式*/
    .my_card{
    	width: 98%;
    	font-size:16px;
    	border: 1px solid #EBEEF5;
    	box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
    	transition: .3s;
    	background-color: #fff;
    	color: #303133;
    	border-radius: 4px;
    	overflow: hidden;
    	padding: 20px;
    	box-sizing: border-box;
    }
    .my_card label{
    	display: block;
    	width: 40%;
    	height: 45px;
    	line-height: 45px;
    	float: left;
    }
    .my_card>div:first-child{
    	font-weight: 600;
    	border-bottom: 1px solid #eee;
    }
    .my_card>div:last-child{
    	font-weight: 600;
    	border-top: 1px solid #eee;
    }

    最终效果:

    展开全文
  • Vue实现点击查看更多

    千次阅读 2020-09-17 16:52:44
    template部分 <div class='container'> <div class="content display_flex flex-wrap_wrap"> <div class="content-item" v-for="(item, index) in list" :key="index">...ul class="display_flex...

    template部分

    <div class='container'>
        <div class="content display_flex flex-wrap_wrap">
            <div class="content-item" 
                 v-for="(item, index) in list" :key="index">
                <ul class="display_flex flex-direction_column"
                     v-show="isOpen || index < max">
                    <li class="label"><span>{{ item.label }}</span></li>
                    <li class="value"><span>{{ item.value }}</span></li>
                </ul>
            </div>
        </div>
        <button v-show="!isOpen && list.length > max" @click="isOpen = !isOpen">展开全部信息</button>
        <button v-show="isOpen && list.length > max" @click="isOpen = !isOpen">收起</button>
    </div>
    

    script部分

    export default {
        data () {
            return {
                max: 6, // 默认最多显示的个数;最大行数*每行显示的个数 Number 
                isOpen: false, // 是否展开全部信息的标识 Boolean 默认false
                list:[
                    {label: '初登日期', value: '2005-10-20'},
                    {label: '出厂日期', value: '2014-11'},
                    {label: '使用性质', value: '非营运'},
                    {label: '车辆注册地', value: '北京-北京市-昌平区'},
                    {label: '表显里程', value: '3.1万公里'},
                    {label: '排放标准', value: '国四'},
                    {label: '排量', value: '3.3'},
                    {label: '变速箱形式', value: 'AT'},
                    {label: '座位数', value: '5'}
                ]
            }
        }
    }
    
    展开全文
  • vue底部加载更多

    万次阅读 2017-12-10 10:41:22
    要实现的效果如下: class="newsList"> v-for="(items, index) in newsList"> class="date">{{showDay(index)}} class="list" > class="list-item" v-for="item in items">

    要实现的效果如下:



    <template>
      <div class="newsList">
        <div v-for="(items, index) in newsList">
          <div class="date">{{showDay(index)}}</div>
          <div class="list" >
            <ul>
              <li class="list-item" v-for="item in items">
                <span class="text">{{item.title}}</span>
                <img :src="attachImageUrl(item.images[0])" class="image"/>
              </li>
            </ul>
          </div>
        </div>
        <div class="infinite-scroll" v-show="loading">
          <svg class="loader-circular" viewBox="25 25 50 50">
            <circle class="loader-path" cx="50" cy="50" r="20" fill="none" stroke="rgb(53, 157, 218)" stroke-width="5"></circle>
          </svg>
          <span class="infinite-scroll-text">{{tips}}</span>
        </div>
      </div>
    </template>
    
    <script>
      import axios from 'axios';
    
      export default {
        data () {
          return {
            newsList: [],
            date: [],
            todayDate: '',
            REQUIRE: true,
            loading: false,
            tips: '努力加载中...'
          }
        },
        created () {
          // 获取今日新闻
          axios.get('http://zhihuapi.herokuapp.com/api/4/news/latest')
            .then( (res) => {
            this.newsList.push(res.data['stories'])
            this.date.push(res.data['date']);
            this.todayDate = res.data['date']
          })
        },
        mounted () {
          // 添加滚动事件,检测滚动到页面底部
          window.addEventListener('scroll', this.scrollBottom)
        },
        methods: {
          scrollBottom() {
            // 滚动到页面底部时,请求前一天的文章内容
            if (((window.screen.height + document.body.scrollTop) > (document.body.clientHeight)) && this.REQUIRE) {
              // 请求的数据未加载完成时,滚动到底部不再请求前一天的数据
              this.REQUIRE = false;
              this.loading = true;
              this.tips = '努力加载中...';
              axios.get('http://zhihuapi.herokuapp.com/api/4/news/before/' + this.todayDate).then((res) => {
                this.newsList.push(res.data['stories']);
              this.date.push(res.data['date']);
              this.todayDate = res.data['date'];
              // 请求的数据加载完成后,再次滚动到底部时,允许请求前一天数据
              this.$nextTick(() => {
                this.REQUIRE = true;
                this.loading = false;
              });
            }).catch(() => {
                this.tips = '连接失败,请稍后重试';
              // 请求失败时,将 REQUIRE 置为 true,滚动到底部时,再次请求
              this.REQUIRE = true;
            });
            }
          },
          showDay (index) {
            if (index === 0) {
              return '今日新闻'
            } else {
              return this.getToday(index)
            }
          },
          getToday (index) {
            let year = this.date[index].slice(0, 4);
            let month = this.date[index].slice(4, 6);
            let day = this.date[index].slice(6);
            let today = new Date(year + '/' + month + '/' + day);
            let week = ['日', '一', '二', '三', '四', '五', '六'];
            return month + '月' + day + '日' + ' 星期' + week[today.getDay()];
          },
          attachImageUrl (srcUrl) {
            if (srcUrl !== undefined) {
              return 'http://read.html5.qq.com/image?src=forum&q=5&r=0&imgflag=7&imageUrl=' + srcUrl.slice(0, 4) + srcUrl.slice(5);
            }
          }
        }
      }
    </script>

    展开全文
  • 笔记-VUE滚动加载更多数据

    千次阅读 2019-02-15 09:47:43
    VUE滚动加载更多数据 data() { return { loading: false, loadingMore: false,//loading 加载更多 isScroll: true,//是否可以滚动 list: [], } }, mounted() { document.addEventL...

    VUE滚动加载更多数据

    data() {
        return {
             loading: false,
             loadingMore: false,//loading 加载更多
             isScroll: true,//是否可以滚动
             pageIndex: 1,
             pageSize: 10,
             list: [],
         }
     },
    
    mounted() {
        document.addEventListener('scroll', this.scrollMoreData, false)
    },
    
    methods: {
    	scrollMoreData() {
    		const scrollTopHeight = document.documentElement.scrollTop || document.body.scrollTop //滚动高度
    		const clientHeight = document.documentElement.clientHeight || window.screen.availHeight //屏幕可用工作区高度
    		const offsetHeight = document.documentElement.offsetHeight || document.body.offsetHeight //网页可见区域高(包括边线的宽)
    		// console.log(scrollTopHeight, clientHeight, scrollTopHeight + clientHeight + 50, offsetHeight)
    		
    		if ((scrollTopHeight + clientHeight) + 50 >= offsetHeight && this.isScroll) {
    		    this.isScroll = false
    		    this.loadingMore = true
    		    let pageNo = this.pageIndex += 1
    		    api.Get('/list', {
    		        pageIndex: pageNo,
    		        pageSize: this.pageSize,
    		    }).then(res => {
    		        this.loadingMore = false
    		        if (res.data.list.length > 0) {
    		            this.isScroll = true
    		            this.list = [...this.list, ...res.data.list]
    		        } else {
    		            this.show = true
    		        }
    		    })
    		}
    		},
    	},
    },
    
    destroyed() {
        document.removeEventListener('scroll', this.scrollMoreData, false)
    }
    
    展开全文
  • vue.js 列表数据加载更多

    千次阅读 2017-09-05 16:13:37
     } else { // 没有更多的数据了  this.allLoaded = true  }  }  })  },  loadMore: function () {  // 加载更多数据  this.loadList()  // 在加载数据后需要对组件进行重新定位的操作 ...
  • 先看效果图!代码分别在下面展示 先看单个倒计时: ... 还有{{detailsListDetails.project_number4}}头未有人预约...更多技巧请查看vue专栏  https://blog.csdn.net/qq_42221334/column/info/27230/1  
  • 1.点击加载更多 <template> <divclass="list"> <h3>列表的懒加载</h3> <divv-for="(item,index)inlist":key="index"> <div>{{item.id}}</div> <...
  • 主要介绍了vue 点击展开显示更多(点击收起部分隐藏),文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
  • vue中实现滚动加载更多

    万次阅读 2017-06-09 14:11:29
    在以前的前端刀耕火种时代要实现滚动加载更多想要大家都是很快实现了,在vue会有一点麻烦,最近自己研究了一下,做了一个简单的demo,供大家参考: {{item.title}} import axios from
  • vue 列表滑动加载数据

    千次阅读 2017-09-25 11:35:09
    vue 列表滑动加载数据
  • vue监听滚动到底部加载更多

    千次阅读 2019-04-17 13:34:51
    整理之前做过的一个vue滚动到底部的加载显示更多功能,后台已经分好了页就剩前端渲染 主要参数pageSize 每页数量(这里默认10) pageNum 页数,能用代码说的就不吹泡泡了直接上代码: 一、html结构 <div class=...
  • 利用vue实现“显示更多”功能

    千次阅读 2018-05-04 00:36:11
    利用vue实现“显示更多”功能 当网页内容比较多时,将内容全部显示一方面会显得冗余,另一方面并不是每个人都喜欢看所有内容。因此,为了提高用户体验,一些网站便将内容显示一部分,然后使用“显示更多”功能来...
  • Vue 实现下拉加载更多

    千次阅读 2020-12-01 14:26:26
    熟悉Element-UI的开发者可能都会有这样的经历,它的无限滚动 InfiniteScroll 并不好用,下面介绍两种下拉加载的实现方法: 1. 使用el-table-infinite-scroll 插件 (1).... npm install --save el-table-infinite-...Vue
  • vue开发中实现加载更多升级版

    千次阅读 2018-02-27 14:49:09
    使用vue开发的时候,特别是写后台系统的时候,一个很平常的功能就是分页的一个实现改进,之前写了一个加载更多的,但是代码显得很多,这次刚好可以优化下:首先在methods中添加一个获取数据的方法,例如:上面代码...
  • vue 上拉加载更多数据 / 分页

    千次阅读 2019-02-11 17:22:20
    没有更多数据了" :show-loading="false" background-color="#fbf9fe"> js   export default { name: '', data () { return { list: [], now_item: '', current_index: 0, list_param: {page: ...
  • vue瀑布流组件滑动加载更多

    万次阅读 2017-07-18 17:56:19
    建议先看上一篇再来食用本文,如果直接想看源码文末就是~上一篇讲到在项目中使用上拉加载更多组件,但是由于实际项目开发中由于需求变更或者说在webview中上拉加载有些机型在上拉时候会把webview也一起上拉导致上拉...
  • 点击显示更多时候,查看全部 如下:以百度云的页面为例 直接上代码: 1.html部分: <div> <div style="background-color:#eef1f6; "> <div> <p v-for="(item, index) in showdetailList"&...
  • vue部分 <Unfold data="这里是文章测试标题,含标点一共二十个字。这里是文章测试标题,含标点一共二十个字。这里是文章测试标题,含标点一共二十个字。这里是文章测试标题,含标点一共二十个字。这里是文章测试...
  • 而且有一些是文本字段,就是说很多很多很多字可能还是废话放进表格,对放进表格,导致某一个列即便宽度还OK也要超大篇幅,导致其他列上下空白特别多,所以一般都需要一个更多的组件 <template> <div ...
  • vue下拉菜单选择输入框 @ tillhub / vue-search-filter (@tillhub/vue-search-filter) ... Vue搜索输入带有下拉列表,用于更多过滤器。 View Demo 查看演示 Download Source 下载源 安装 (Install) npm ...
  • vue 移动端实现上拉加载更多

    千次阅读 2019-05-07 18:20:16
    根据项目需求实现上拉加载更多~我用的是vue-infinite-loading 插件实现的。下面是安装流程和使用方法:有需要直接拿去用 第一步:安装 npm install vue-infinite-loading --save 第二步:在需要上拉加载的单...
  • vue实现数据超出4个时显示“查看更多”or“收起”功能 html里调用showList <div> <div v-for="item in showList" :key="item.name"> <span style="margin-left:10px;"> {{item.name}} &...
  • vue 实现点击按钮加载更多

    千次阅读 2019-06-16 20:00:51
    <script src="https://unpkg.com/vue"> export default { props: {}, data() { return { list: [ '111', '222', '333', '444', '555', '666' ], isShow: true, txt: '显示全部', num: 2 } }, ...
  • 上面是文章的内容,下面有个评论和点赞。要保证无论文章多长,下面的评论和点赞位置一直要在下面,...还有一种就是通过一个查看更多的按钮,点击了才会展开显示所有的内容,不然显示一个页面的。    标题  时间
  • 一、点击按钮后加载更多的数据显示 在 data 中,定义 pageIndex,默认为 1 ,默认展示第一页数据。定义 comments,默认为空数组,里面保存所有的评论数据,代码如下所示: data() { return { pageIndex: 1, ...
  • Vue列表滚动的过渡动画

    千次阅读 2019-07-14 09:53:01
    这里的重点是做列表的动画,banner轮播的网上资料很,请自行查找。 这个动画最重要的是在滚动中实时计算startIndex和endIndex,动画比较简单,就是scale和opacity的变化。向下滚动...
  • 1.需求:在PC端实现数据滚动加载效果 筛选vue中的组件再三 决定使用vue-data-loading 效果还是...2.简单的事例 官网中已有源码 需要的小伙伴 可以直接查看官网 在这里我主要说下我遇到的坑 我的列表页面如图所示 ...
  • vue实现滚动条加载更多数据

    千次阅读 2018-12-08 16:54:33
    原理: 1、参考线位置lineHeight:即判断滚动到何处触发事件;  2、页面卷入的高度scrollHeight;  3、浏览器窗口的高度windowHeight。 当页面首次登录的时候已经加载第一页数据,记录第一页数据参考线的高度...
  • vue简单实现滑动到底部加载更多

    万次阅读 2018-12-24 15:14:37
    没有更多数据了 script: import { Swipe, SwipeItem, Popup } from 'mint-ui' export default { data: () => ({ server: [], page: 1, clientHeight: 0, el: {}, isbottom: 0, show: true...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 126,007
精华内容 50,402
关键字:

vue列表查看更多

vue 订阅