VUE组件示例说明

<!--
* @Author: xxx.xx
* @Date: 2021-07-20 14:33:41
* @LastEditors: xxx.xx
* @LastEditTime: 2021-07-20 18:22:37
* @PageTitle: 上拉加载组件
* @Description: 描述...
* @FilePath: /wxapp-view/components/loadmore.vue
-->
<template>
 <view class="c-moreload">
   <u-loadmore
     color="#9f9f9f"
     :status="status"
     :load-text="loadText"
     @loadmore="loadMore"
   />
 </view>
</template>

<script>
export default {
 name: 'CLoadmore',
 props: {
   // 展示类型
   status: {
     type: String,
     default: 'loadmore'
   }
 },
 data () {
   return {
     loadText: {
       loadmore: '点击或上拉加载更多',
       loading: '玩命加载中',
       nomore: '我也是有底线的'
     }
   }
 },
 methods: {
   /**
    * @Author: xxx.xx
    * @description: 点击更多，通知父组件
    */ 
   loadMore () {
     this.$emit('loadMore')
   },
   /**
    * @Author: xxx.xx
    * @description: 获取value值
    * @param {*} name
    * @param {*} val
    * @return {*}
    */ 
   test (name, val) {
   }
 }
}
</script>

<style scoped lang="scss">
.c-moreload {
 padding: 0px 0px 10px 0px
}
</style>

props

参数	说明	类型	可选值	默认值
color	字体颜色	String	#606266	-
status	组件状态	String	loadmore	loading / nomore
load-text	可见示例自定义	Object	-	-

Events

事件名称	说明	回调参数
loadmore	status为loadmore时，点击组件会发出此事件	—