北京装饰网站建设,济南网站建设山东聚搜网见效快,网站建设推销话术,营销型网站建设论文方法一#xff1a;
z-paging 的组件库#xff1a;
show-loading-more-no-more-viewfalse
该属性控制是否显示 加载更多 或 没有更多 的提示。如果设为 false#xff0c;则不会显示这些提示。如果设为 true#xff0c;当数据加载完毕… 方法一
z-paging 的组件库
show-loading-more-no-more-viewfalse
该属性控制是否显示 加载更多 或 没有更多 的提示。如果设为 false则不会显示这些提示。如果设为 true当数据加载完毕后会显示 没有更多 的提示。默认情况下分页组件会显示这两个状态你可以根据需求设置为 false。
fixedtrue
该属性用于设置分页组件是否固定在页面的底部。如果设为 true分页组件会固定在页面底部不会随着页面滚动而移动。
onRefreshonRefresh
这是 z-paging 提供的事件表示触发了刷新操作。当用户下拉刷新时会触发 onRefresh 方法。在 onRefresh 方法中你通常需要重置数据并重新加载数据列表。 安装npm install z-paging templateview classhome-pagez-paging refpaging v-modeldataList :show-loading-more-no-more-viewfalse :fixedtrueonRefreshonRefresh bg-color#ffffff queryqueryListview classtop-box slottopcustom :mode1 title backgroundtransparent :hiddenBtntrue/custom/viewview classlist-box!-- 上拉刷新下拉加载的数据 --list-item v-for(item, index) in dataList :keyindex :infoitem/list-item/viewqq-footer slotempty :showtrue :emptyText暂无数据/qq-footer/z-paging/view
/template
scriptexport default {name: homepage,data() {return {dataList: [],};},onShow() {this.$store.dispatch(refresh)},methods: {onRefresh() {// 告知z-paging下拉刷新结束这样才可以开始下一次的下拉刷新setTimeout(() {// 1.5秒之后停止刷新动画// this.$refs.paging.complete();// this.$refs.paging.reload()}, 1500)},queryList(pageNumber, pageSize) {this.request({url: /url/url,method: get,data: {pageNumber,pageSize}}).then(res {if (res.status 200) {this.$refs.paging.complete(res.data);}}).catch(err {this.$refs.paging.complete(false);})},}}
/script方法二
templateviewindexNoteList :is_nullis_null :addEventHandelfalse refreshNoteListrefreshNoteList showIsOpen:listnoteList/indexNoteList/view
/template
scriptimport NOTE from /utils/note.js;export default {data() {return {is_null: false,// 是否没有更多数据noteList: [],page: 1,pageSize: 10,}},onLoad() {this.getNoteListnew(this.page); //动态列表},//上拉触底onReachBottom() {this.getNoteListnew(this.page);},//监听用户下拉刷新onPullDownRefresh() {setTimeout(() {uni.stopPullDownRefresh();}, 200);this.init();},methods: {init() {this.setData({page: 1,// 重置为第一页noteList: [],// 清空列表is_null: false,// 重置没有更多数据的状态})this.getNoteListnew();// 重新加载数据},getNoteListnew(page 1) {if (this.is_null) return // 如果没有更多数据就停止请求if (page ! 1 this.is_null true) return;// 如果不是第一页且没有更多数据则停止请求let formData {pageNumber: page,pageSize: this.pageSize,}this.request({url: /url/url,data: formData,method: get}).then(res {if (!this.rsuccess(res)) return;let arr NOTE.filter(res.data, page 1 ? [] : this.noteList); // 过滤数据arr NOTE.handelList(arr);// 处理数据// 如果是第一页直接替换数据否则追加数据if (page 1) {this.noteList arr;} else {this.noteList this.noteList.concat(arr);}// 判断是否还有更多数据if (arr.length this.pageSize) {this.is_null true;} else {this.is_null false;}this.page page 1; // 更新当前页码});},}}
/script/utils/note.js //处理图片时间等export function handelList(arr []) {arr.forEach(v {v handelNote(v);})return arr;}//查重export function filter(arr [], oldArr []) {let ids oldArr.map(v v.id);return arr.filter(v !ids.includes(v.id));}//处理单条数据export function handelNote(info) {//处理图片if (String(info.noteImg).trim()) {info.noteImg String(info.noteImg).trim().split(,).filter(v v);} else {info.noteImg [];}if (String(info.tranNoteImgUrl).trim()) {info.tranNoteImgUrl String(info.tranNoteImgUrl).trim().split(,).filter(v v);} else {info.tranNoteImgUrl [];}//处理时间if (!info.createTime) {info.time 未知;} else {info.time getTimeStr(info.createTime);}return info;}//处理时间export function getTimeStr(t) {let NewTime new Date().getTime();if (NewTime - t 1000 * 60 * 2) {return 刚刚;}if (NewTime - t 1000 * 60 * 6) {return ${parseInt((NewTime-t)/60000)}分钟前;}return dateFormat(mm-dd HH:MM, new Date(t));}//更新dom数组export function refreshNoteList(E, page) {if (E.type update) {page.noteList.some((v, i) {if (v.id E.info.id) {page.$set(page.noteList, i, JSON.parse(JSON.stringify(E.info)));return true;}return false;});return;}if (E.type delete) {page.noteList.some((v, i) {if (v.id E.info.id) {page.noteList.splice(i, 1);return true;}return false;});}if (E.type add) {page.noteList.unshift(E.info);}}export function dateFormat(fmt, date) {let ret;let opt {Y: date.getFullYear().toString(), // 年m: (date.getMonth() 1).toString(), // 月d: date.getDate().toString(), // 日H: date.getHours().toString(), // 时M: date.getMinutes().toString(), // 分S: date.getSeconds().toString() // 秒// 有其他格式化字符需求可以继续添加必须转化成字符串};for (let k in opt) {ret new RegExp(( k )).exec(fmt);if (ret) {fmt fmt.replace(ret[1], (ret[1].length 1) ? (opt[k]) : (opt[k].padStart(ret[1].length,0)))};};return fmt;}export function getFormatText(v, unit 万) {if (!v) v 0;v Number(v);if (v 10000) {return v;}return ${Number(Number(v / 10000).toFixed(1))}${unit};}export default {handelList,filter,handelNote,refreshNoteList,}
