vux, vue上拉加载更多
<template>
<mt-loadmore :distanceIndex="" :topDistance="" :bottomDistance='' :maxDistance="" :bottom-method="loadBottom" :bottom-all-loaded="bottomAllLoaded" ref="loadmore" :autoFill="false" :class="{meaasgeMoreMar: userMessage.un_read_count === 0, meaasgeMore: userMessage.un_read_count > 0}">
<div class="message_c">
<div class="message_con" v-for="(item,index) in appendMessage" :key="index" :class="{ noRead: item.is_read == 0}" @click="messageList(item,index)">
<div class="mes_con">
<h3 v-text="item.title"></h3>
<p><span v-text="item.role_name"></span>-<span v-text="item.name"></span></p>
</div>
<div class="mes_p" @click="messageStop">
<div class="messageText" v-html="item.message"></div>
</div>
</div>
</div>
<div slot="bottom" class="mint-loadmore-bottom">
<load-more tip="正在加载" v-show="loadingBottomShow"></load-more>
</div>
</mt-loadmore>
</template>
<script>
import { LoadMore, TransferDom } from 'vux'
import { Loadmore } from 'mint-ui'
import Vue from 'vue'
Vue.component(Loadmore.name, Loadmore)
export default {
name: 'UserMessage',
components: {
LoadMore
},
data () {
return {
userMessage: [],
appendMessage: [],
show: false,
page: ,
bottomAllLoaded: false,
meaasgeImg: false,
}
},
directives: {
TransferDom
},
methods: {
verify: function () {
let thisObj = this
this.$chaos.setTitle('邮件中心')
this.$chaos.verify(function () {
thisObj.uplode()
})
},
uplode () {
let thisObj = this
thisObj.$chaos.ajax({
data: {
role_id: thisObj.roleId,
page: thisObj.page
},
slient: true,
userinfo: true,
url: 'User/user_message',
callback: function (type, res) {
if (type !== 'success') {
return
}
if (res.status) {
thisObj.userMessage = res.info
thisObj.appendMessage = thisObj.appendMessage.concat(res.info.message_list)
if (thisObj.appendMessage.length === ) {
thisObj.meaasgeImg = true
} else {
thisObj.meaasgeImg = false
}
thisObj.loadingBottomShow = false
thisObj.page++
thisObj.$refs.loadmore.onBottomLoaded()
} else {
thisObj.$vux.toast.show({
text: res.msg,
type: 'text',
position: 'bottom'
})
}
}
})
},
loadBottom () {
this.uplode()
}
},
created: function () {
this.verify()
},
watch: {
'$route': 'verify'
}
}
</script> 可查看http://mint-ui.github.io/docs/#/en2/loadmore看详情
vux, vue上拉加载更多的更多相关文章
- vue 上拉加载更多
var _this=this; var goods_id = _this.$route.query.id; var isscroll = true; _this.$nextTick(() => ...
- vue mpvue 上拉加载更多示例代码
vue 上拉加载更多示例代码 可以比较简单的改为 mpvue , 去除滚动判断,直接放在 onReachBottom 周期即可. html <div id="app"> ...
- vue移动端上拉加载更多
LoadMore.vue <template> <div class="load-more-wrapper" @touchstart="touchSta ...
- vue实现网络图片瀑布流 + 下拉刷新 + 上拉加载更多
一.思路分析和效果图 用vue来实现一个瀑布流效果,加载网络图片,同时有下拉刷新和上拉加载更多功能效果.然后针对这几个效果的实现,捋下思路: 根据加载数据的顺序,依次追加标签展示效果: 选择哪种方式实 ...
- vue2.0 移动端,下拉刷新,上拉加载更多插件,修改版
在[实现丰盛]的插件基础修改[vue2.0 移动端,下拉刷新,上拉加载更多 插件], 1.修改加载到尾页面,返回顶部刷新数据,无法继续加重下一页 2.修改加载完成文字提示 原文链接:http://ww ...
- mui的上拉加载更多 下拉刷新 自己封装的demo
----------------------------------------------- 这是一个非常呆萌的程序妹子,深夜码的丑代码------------------------------- ...
- mui实现分页上拉加载更多 下拉刷新数据的简单实现 移动端下拉上拉
空下来把mui上拉加载更多,下拉刷新数据做了一个简单的实现,希望可以帮助到需要的朋友 demo项目的结构 <!DOCTYPE html> <html> <head> ...
- 原生js移动端touch事件实现上拉加载更多
大家都知道jQuery里没有touch事件,所以在移动端使用原生js实现上拉加载效果还是很不错的,闲话不多说,代码如下: //获取要操作的元素 var objSection = document.ge ...
- H5基于iScroll实现下拉刷新,上拉加载更多
前言 前一段有个手机端的项目需要用到下拉刷新和上拉加载更多的效果,脑海里第一反映就是微博那种效果,刚开始的理解有些偏差,以为下拉也是追加数据,上拉也是追加数据,后请教同事后发现其实下拉只是刷新最新数据 ...
随机推荐
- php高级开发参考地址
高级开发 : http://www.cnblogs.com/bananaplan/p/The-Right-Way-For-PHPer.html
- SpringBoot 超时设置
1.RestTemplate超时 设置配置HttpComponentsClientHttpRequestFactory中的RequestConfig属性 RestTemplateConfig: imp ...
- 160CrackMe练手 002
首先查壳无壳,输入伪码报错,根据报错od查找字符串,定位到错误代码附近,可以看到有个条件跳转,改掉就可以爆破,接下来分析下注册算法,我们周围看看,从最近几个call看,并没有我们输入的用户名在堆栈中出 ...
- IDEA 入门
IDEA初步使用 IntelliJ IDEA 使用教程(2019图文版) -- 从入门到上瘾 IntelliJ IDEA 设置代码提示或自动补全的快捷键 (Alt+/) IntelliJ IDEA 配 ...
- Torch 两个矩形框重叠面积的计算 (IoU between tow bounding box)
Torch 两个矩形框重叠面积的计算 (IoU between tow bounding box) function DecideOberlap(BBox_x1, BBox_y1, BBox_x2, ...
- Ubuntu关机时间过长,总是停在logo界面
有时候我们总能遇到ubuntu关机的时候卡住,无法关机,一查看发现是" a stop job is running..." 然后后面接着一串等待时间. 这时候我们需要修改一下sys ...
- 【Selenium2】【项目实战】
[public/login.py] from selenium import webdriverfrom selenium.webdriver.common.by import Byimport ti ...
- 详解JS中DOM 元素的 attribute 和 property 属性
一.'表亲戚':attribute和property 为什么称attribute和property为'表亲戚'呢?因为他们既有共同处,也有不同点. attribute 是 dom 元素在文档中作为 h ...
- 异步加载script,提高前端性能(defer和async属性的区别)
一.异步加载script的好处 为了加快首屏响应速度,前端会采用代码切割.按需加载等方式优化性能.异步加载script也是一种前端优化的手段. 就好比如果我的页面其中一个功能需要打开地图,但是地图的j ...
- 下载安装 Android sdk
下载地址: https://www.androiddevtools.cn/ 选择sdk 选择版本 将解压出的整个文件夹复制或者移动到 your sdk 路径/platforms文件夹,然后打开SDK ...