vant 中van-list的用法说明


Posted in Javascript onNovember 11, 2020

van-list里面的元素不能有float样式,否则会连续触发 load 事件

原代码

<template>
 <div class="about">
  <van-tabs v-model="active" sticky @change="getTypeDate">
   <van-tab v-for="(tab) in typeList" :title="tab.name" :key="tab.id">
    <div :style="{height: contentHeight}" class="pic-content">
     <van-list
      :finished="finished"
      :finished-text="finishedText"
      v-model="loading"
      :offset="10"
      :immediate-check="false"
      @load="getserviceList"
     >
     <!------------------------------------------------- 修改前代码 --------------------------------------------->
       /*<div
        class="pic-box"
        v-for="(serve) in serviceList"
        :key="serve.id"
        @click="router(serve)"
       >
        <div class="pic-item">
         <img
          v-if="serve.picturePath"
          :src="$BASE_PICTUREPATH_URL + serve.picturePath.split(',')[0]"
         >
        </div>
        <p>{{serve.name}}</p>
        <p class="price-red">¥{{serve.price}}</p>
       </div>*/
       <!------------------------------------------------- 修改前代码 --------------------------------------------->
     </van-list>
    </div>
   </van-tab>
  </van-tabs>
 </div>
</template>
<script>
import { Tab, Tabs, List, Cell, Row, Col } from "vant";
import { FetchServeType, FetchServeList } from "../apis/serve.js";

export default {
 data() {
  return {
   active: 0,
   typeList: [],
   serviceList: [],
   type: "",
   finishedText: "",
   finished: false,
   pageNum: 1,
   pageSize: 10,
   contentHeight: 0,
   loading: false
  };
 },
 mounted() {
  this.getOrderStyle();
  this.contentHeight = document.documentElement.clientHeight - 66 - 40 + "px";
 },
 methods: {
  async getOrderStyle() {
   let res = await FetchServeType();
   if (res.data && res.data.success) {
    this.typeList = res.data.data;
    this.type = res.data.data[0].name;
    this.getTypeDate();
   }
  },
  getTypeDate() {
   this.pageNum = 1;
   this.type = this.typeList[this.active].name;
   this.serviceList = [];
   this.finishedText = "";
   this.finished = false;
   this.getserviceList();
  },
  async getserviceList() {
   let toast = this.$toast.loading({
    mask: true,
    message: "加载中..."
   });
   const { type, pageNum, pageSize } = this;
   let params = {
    type,
    pageNum,
    pageSize
   };
   let res = await FetchServeList(params);
   this.loading = false;
   toast.close();
   if (res.data && res.data.success) {
    let list = (res.data.data && res.data.data.list) || [];
    if (pageNum > 1) {
     this.serviceList = [...this.serviceList, ...list];
    } else {
     this.serviceList = list;
    }
    // 如果当前页数 = 总页数,则已经没有数据
    if (res.data.data.pageNum === res.data.data.pages) {
     this.finished = true;
     this.finishedText = "- 没有更多了-";
    }
    // 如果总页数大于当前页码,页码+1
    if (res.data.data.pages > pageNum) {
     this.pageNum++;
    }
   }
   console.log("FetchServeList: ", this.serviceList);
  }
 }
};
</script>
<style lang="scss" scoped>
.pic-content {
 overflow-y: scroll;
 -webkit-overflow-scrolling: touch;
 .pic-box {
 /****************************修改前代码***************************/
  background-color: #fff;
  overflow: hidden;
  break-inside: avoid;
  box-sizing: border-box;
  margin-bottom: 0.7rem;
  padding: 0.8rem;
  width: 48%;
  height: 16rem;
  ~~float: left;~~ /**************不能有float样式*************/
  margin: 1%;
  border-radius: 4px;
   /****************************修改前代码***************************/
  p:nth-of-type(1) {
   padding: 0.8rem 0;
  }
  p:nth-of-type(2) {
   color: red;
  }
  .pic-item {
   height: 11rem;

   flex-direction: column;
   justify-content: center;
   overflow: hidden;
   img {
    width: 100%;
    height: auto;
    border-radius: 4px;
   }
  }
 }
}
</style>

// 修改后代码(注释部分为修改后代码)

<template>
 <div class="about">
  <van-tabs v-model="active" sticky @change="getTypeDate">
   <van-tab v-for="(tab) in typeList" :title="tab.name" :key="tab.id">
    <div :style="{height: contentHeight}" class="pic-content">
     <van-list
      :finished="finished"
      :finished-text="finishedText"
      v-model="loading"
      :offset="10"
      :immediate-check="false"
      @load="getserviceList"
     >
     <!------------------- 修改后代码 -------------------->
      /*<van-row>
       <van-col
        span="12"
        class="pic-box"
        v-for="(serve) in serviceList"
        :key="serve.id"
        @click="router(serve)"
       >
        <div class="pic-item">
         <img
          v-if="serve.picturePath"
          :src="$BASE_PICTUREPATH_URL + serve.picturePath.split(',')[0]"
         >
        </div>
        <p>{{serve.name}}</p>
        <p class="price-red">¥{{serve.price}}</p>
       </van-col>
      </van-row>*/
      <!------------------- 修改后代码 -------------------->
     </van-list>
    </div>
   </van-tab>
  </van-tabs>
 </div>
</template>
<script>
import { Tab, Tabs, List, Cell, Row, Col } from "vant";
import { FetchServeType, FetchServeList } from "../apis/serve.js";

export default {
 data() {
  return {
   active: 0,
   typeList: [],
   serviceList: [],
   type: "",
   finishedText: "",
   finished: false,
   pageNum: 1,
   pageSize: 10,
   contentHeight: 0,
   loading: false
  };
 },
 mounted() {
  this.getOrderStyle();
  this.contentHeight = document.documentElement.clientHeight - 66 - 40 + "px";
 },
 methods: {
  async getOrderStyle() {
   let res = await FetchServeType();
   if (res.data && res.data.success) {
    this.typeList = res.data.data;
    this.type = res.data.data[0].name;
    this.getTypeDate();
   }
  },
  getTypeDate() {
   this.pageNum = 1;
   this.type = this.typeList[this.active].name;
   this.serviceList = [];
   this.finishedText = "";
   this.finished = false;
   this.getserviceList();
  },
  async getserviceList() {
   let toast = this.$toast.loading({
    mask: true,
    message: "加载中..."
   });
   const { type, pageNum, pageSize } = this;
   let params = {
    type,
    pageNum,
    pageSize
   };
   let res = await FetchServeList(params);
   this.loading = false;
   toast.close();
   if (res.data && res.data.success) {
    let list = (res.data.data && res.data.data.list) || [];
    if (pageNum > 1) {
     this.serviceList = [...this.serviceList, ...list];
    } else {
     this.serviceList = list;
    }
    // 如果当前页数 = 总页数,则已经没有数据
    if (res.data.data.pageNum === res.data.data.pages) {
     this.finished = true;
     this.finishedText = "- 没有更多了-";
    }
    // 如果总页数大于当前页码,页码+1
    if (res.data.data.pages > pageNum) {
     this.pageNum++;
    }
   }
   console.log("FetchServeList: ", this.serviceList);
  }
 }
};
</script>
<style lang="scss" scoped>
.pic-content {
 overflow-y: scroll;
 -webkit-overflow-scrolling: touch;
 .pic-box {
 /************************ 修改后代码**************************/
  background-color: #fff;
  overflow: hidden;
  box-sizing: border-box;
  margin-bottom: 0.7rem;
  padding: 0.8rem;
  height: 16rem;
  border-radius: 4px;
  /************************ 修改后代码************************ **/
  p:nth-of-type(1) {
   padding: 0.8rem 0;
  }
  p:nth-of-type(2) {
   color: red;
  }
  .pic-item {
   height: 11rem;

   flex-direction: column;
   justify-content: center;
   overflow: hidden;
   img {
    width: 100%;
    height: auto;
    border-radius: 4px;
   }
  }
 }
}
</style>

补充知识:vant里 List 组件可以与 PullRefresh 组件结合使用的一个小提示与小坑坑

小提示

List 组件可以与 PullRefresh 组件结合使用,可以实现列表下拉刷新的效果,但是当下拉刷新后更新的数据展示在页面上不能撑满 List 列表中的内容的时候,他并不会主动触发列表刷新,以至于来填满列表。

可以给list组件添加ref属性,然后在下拉刷新后,在下拉刷新的事件里手动调用this.$refs.listRef(你的list的ref名称).check()来触发列表加载后续的数据

// list组件
<van-list
  v-model="loading"
  ref="listRef" // 1. 绑定ref
  :finished="finished"
  finished-text="没有更多了"
  :error.sync="error"
  error-text="请求失败,点击重新加载"
  @load="onLoad"
>
// 下拉刷新的事件
onRefresh() {
 ...刷新成功后
 // 2.手动去让下拉刷新后,去执行list列表的load事件
 this.$refs.listRef.check()
}

小坑坑

如果你把List 组件可以与 PullRefresh 组件结合使用封装成一个组件,然后在父组件中使用的时候,需要给封装的这个组件传list组件的v-model的值来控制list是否处于加载状态。

然后在父组件传 v-moel=“loading” 或者 :is-loading.sync=“loading” 传给子组件让他来控制子组件的list的v-model的控制load加载状态,按理说v-model 默认是 value 属性和 input 事件的组合,但是list组件的文件默认修改了,把传过去的value用 model: { prop: ‘loading' }修改了,所以我们在子组件接收的时候不能用value 要用loading

此图为vant的源码

vant 中van-list的用法说明

// 父组件 给子组件传list的v-model的值
:is-loading.sync="loading"
// 或写成
v-model="loading"

// 子组件 list组件
// 子组件不能用value接收 
// :value="isLoading"
// 应该写成loading
:loading="isLoading"

以上这篇vant 中van-list的用法说明就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Jquery公告滚动+AJAX后台得到数据
Apr 14 Javascript
浅谈Javascript鼠标和滚轮事件
Jun 27 Javascript
jquery插件jSignature实现手动签名
May 04 Javascript
HTML5游戏引擎LTweenLite实现的超帅动画效果(附demo源码下载)
Jan 26 Javascript
个人网站留言页面(前端jQuery编写、后台php读写MySQL)
May 03 Javascript
深入浅析JavaScript中的arguments对象(强力推荐)
Jun 03 Javascript
AngularJS基础 ng-src 指令简单示例
Aug 03 Javascript
分享javascript、jquery实用代码段
Oct 20 Javascript
js原生实现FastClick事件的实例
Nov 20 Javascript
使用vue中的v-for遍历二维数组的方法
Mar 07 Javascript
webpack-url-loader 解决项目中图片打包路径问题
Feb 15 Javascript
JS获取当前时间的年月日时分秒及时间的格式化的方法
Dec 18 Javascript
让Vue响应Map或Set的变化操作
Nov 11 #Javascript
vue项目中使用rem,在入口文件添加内容操作
Nov 11 #Javascript
VUE前端从后台请求过来的数据进行转换数据结构操作
Nov 11 #Javascript
Vue 防止短时间内连续点击后多次触发请求的操作
Nov 11 #Javascript
Vue 401配合Vuex防止多次弹框的案例
Nov 11 #Javascript
VUE-ElementUI 自定义Loading图操作
Nov 11 #Javascript
在elementui中Notification组件添加点击事件实例
Nov 11 #Javascript
You might like
php 实现进制转换(二进制、八进制、十六进制)互相转换实现代码
2010/10/22 PHP
基于empty函数的输出详解
2013/06/17 PHP
PHP按行读取、处理较大CSV文件的代码实例
2014/04/09 PHP
YII路径的用法总结
2014/07/09 PHP
android上传图片到PHP的过程详解
2015/08/03 PHP
phpStudy访问速度慢和启动失败的解决办法
2015/11/19 PHP
CodeIgniter配置之database.php用法实例分析
2016/01/20 PHP
示例详解Laravel的注册重构
2016/08/14 PHP
php使用json_decode后数字对象转换成了科学计数法的解决方法
2017/02/20 PHP
PHP使用zlib扩展实现GZIP压缩输出的方法详解
2018/04/09 PHP
Smarty模板变量与调节器实例详解
2019/07/20 PHP
PHP过滤器 filter_has_var() 函数用法实例分析
2020/04/23 PHP
javascript实现日历控件(年月日关闭按钮)
2012/12/12 Javascript
js delete 用法(删除对象属性及变量)
2014/08/24 Javascript
jquery移动节点实例
2015/01/14 Javascript
浅谈JS继承_寄生式继承 &amp; 寄生组合式继承
2016/08/16 Javascript
Bootstrap如何创建表单
2016/10/21 Javascript
node.js缺少mysql模块运行报错的解决方法
2016/11/13 Javascript
js实现HashTable(哈希表)的实例分析
2016/11/21 Javascript
js 作用域和变量详解
2017/02/16 Javascript
vue实现tab切换外加样式切换方法
2018/03/16 Javascript
在Python中操作字典之setdefault()方法的使用
2015/05/21 Python
Python sys.argv用法实例
2015/05/28 Python
bpython 功能强大的Python shell
2016/02/16 Python
python rsync服务器之间文件夹同步脚本
2019/08/29 Python
美国儿童玩具、装扮和玩偶商店:Magic Cabin
2018/09/02 全球购物
Hotels.com英国:全球领先的酒店住宿提供商
2019/01/24 全球购物
阿联酋彩妆品牌:OUD MILANO
2019/10/06 全球购物
abstract class和interface有什么区别?
2012/01/03 面试题
2019年.net常见面试问题
2012/02/12 面试题
工程管理专业个人求职信范文
2013/12/07 职场文书
幼儿园中班新学期寄语
2014/01/18 职场文书
关于逃课的检讨书
2014/01/23 职场文书
2015年售票员工作总结
2015/04/29 职场文书
windows11怎么查看wifi密码? win11查看wifi密码的技巧
2021/11/21 数码科技
图文详解nginx日志切割的实现
2022/01/18 Servers