From 79c3a3e31aab4def2f60f7ad9dcc03aa4979780a Mon Sep 17 00:00:00 2001 From: xpz2018 <107107461@qq.com> Date: Mon, 28 Jun 2021 14:07:55 +0800 Subject: [PATCH] no message --- app.js | 2 +- assets/home/icon-vehicle.png | Bin 0 -> 3151 bytes components/virtual-list/index.js | 164 +++++++++++++++++++++++++++++ components/virtual-list/index.json | 7 ++ components/virtual-list/index.wxml | 20 ++++ components/virtual-list/index.wxss | 0 pages/home/index/index.wxml | 2 +- 7 files changed, 193 insertions(+), 2 deletions(-) create mode 100644 assets/home/icon-vehicle.png create mode 100644 components/virtual-list/index.js create mode 100644 components/virtual-list/index.json create mode 100644 components/virtual-list/index.wxml create mode 100644 components/virtual-list/index.wxss diff --git a/app.js b/app.js index 160b1cb..9b0c461 100644 --- a/app.js +++ b/app.js @@ -1,6 +1,6 @@ //app.js App({ - evn: 0, // 0: 开发版本；1：测试版本；2：生产版本 + evn: 1, // 0: 开发版本；1：测试版本；2：生产版本 tmplIds: ['AFoM5TOfsgERsfcetNSB0UlmEixnLF1ySXr54Bqno2M', 'lOQ8Gvyy_dTk68bYGpRVnVA0M7DsYYrV81Gd39GUPBA'], version: '2.2.0', xAppId: '503258978847953926', diff --git a/assets/home/icon-vehicle.png b/assets/home/icon-vehicle.png new file mode 100644 index 0000000000000000000000000000000000000000..2a73ba2fdd330f9a5b0773c20baf2c46c35bb26f GIT binary patch literal 3151 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 literal 0 HcmV?d00001 diff --git a/components/virtual-list/index.js b/components/virtual-list/index.js new file mode 100644 index 0000000..5c19781 --- /dev/null +++ b/components/virtual-list/index.js @@ -0,0 +1,164 @@ +const util = require('../../utils/util') +const math = require('../../utils/math') + +Component({ + /** + * 组件样式隔离 + */ + options: { + addGlobalClass: true, + multipleSlots: true // 支持多个slot + }, + properties: { + height: { + type: Number, + value: 800 + }, + threshold: { // 下拉刷新阈值，下拉距离超过该值触发刷新 + type: Number, + value: 30 + }, + loading: { + type: Boolean, + value: true, + observer(value) { + if(value){ + this.reset() + } + } + }, + finished: { + type: Boolean, + value: false + }, + text: { + type: String, + value: '到底啦～' + }, + size: { + type: Number, + value: 15 + }, + pageList: { + type: Array, + value: [], + observer(value) { + if (!Array.isArray(value)) { + return + } + this.setList(value[0]) + } + } + }, + lifetimes: { + ready: function() { + const query = wx.createSelectorQuery().in(this) + query.select('#scrollview').boundingClientRect().exec((res) => { + this.data.scrollH = res[0].height + }) + } + }, + /** + * 组件的初始数据 + */ + data: { + current: 1, + headerHeight: 0, + bottomHeight: 0, + // pageList: [], // 每一页数据 + visiblist: [], // visible: false,// 当前是否显示 + pageHeight: [], // 每一页高度 + scrollH: 0,// 滚动框高度 + requesting: false + }, + /** + * 组件的方法列表 + */ + methods: { + reset: function(){ + this.setData({ current: 1, loading: true, finished: false, headerHeight: 0, bottomHeight: 0, pageList: [], pageHeight: [] }) + }, + setList: function(listData){ + this.data.requesting = false + if (!Array.isArray(listData)) { + return + } + if (listData.length < this.data.size) { + this.data.finished = true + } + this.data.current = this.data.current + 1 + if (Array.isArray(listData) && listData.length > 0) { + let pageHeight = this.data.pageHeight, visiblist = this.data.visiblist; + let nowList = `pageList[${this.data.pageList.length - 1}]` + visiblist.push(true) + pageHeight.push({ + top: 0, // 顶部在scroll里的高度 + height: this.data.virtualHeight, // 高度 + bottom: this.data.virtualHeight, // 底部在scroll里的高度 + }) + this.data.pageHeight = pageHeight + this.setData({ [nowList]: listData, visiblist, finished: this.data.finished }) + console.log(this.data.pageList.length) + console.log(visiblist.length) + console.log(this.data.pageHeight.length) + this.initPageHeight(this.data.current - 2) + } + }, + // 初始化首页高度 + initPageHeight: function(index) { + const query = wx.createSelectorQuery().in(this) + query.select(`#listPageId${index}`).boundingClientRect().exec((res) => { + let pageHeight = this.data.pageHeight; + pageHeight[index] = { + top: index > 0 ? pageHeight[index - 1].bottom + 1 : 0, // 顶部在scroll里的高度 + height: res[0].height, + bottom: index > 0 ? math.plus(pageHeight[index - 1].bottom + 1, res[0].height) : res[0].height // 底部在scroll里的高度 + } + this.data.pageHeight = pageHeight + }) + }, + bindscroll: util.throttle(function (e) { + // 实现虚拟列表 + let pageList = this.data.pageList + let visiblist = this.data.visiblist + let headerHeight = this.data.headerHeight + let bottomHeight = this.data.bottomHeight + this.data.pageHeight.forEach((item, index) => { + // 手指上滑 + if (e.detail.deltaY < 0 && item.bottom < math.minus(e.detail.scrollTop, 10) && visiblist[index] && pageList[index + 2]) { + // 隐藏头部 + visiblist[index] = false; + headerHeight += item.height; + // 显示底部 + if (!visiblist[index + 2]) { + visiblist[index + 2] = true; + // console.log('index>>>' + index) + // console.log(pageList.length) + // console.log(visiblist.length) + // console.log(this.data.pageHeight.length) + bottomHeight -= this.data.pageHeight[index + 2].height + } + } + // 手指下滑 + if (e.detail.deltaY > 0 && item.top > math.plus(e.detail.scrollTop, math.plus(this.data.scrollH, 10)) && visiblist[index] == true && pageList[index - 2]) { + // 隐藏头部 + visiblist[index] = false; + bottomHeight += item.height; + if (!visiblist[index - 2]) { + // 显示底部 + visiblist[index - 2] = true; + headerHeight -= this.data.pageHeight[index - 2].height + } + } + }) + this.setData({ visiblist, headerHeight, bottomHeight }) + }, 100), + scrolltolower: function(){ + if (this.data.requesting || this.data.finished) { + return + } + this.data.requesting = true + this.triggerEvent('loadmore') + } + } +}) \ No newline at end of file diff --git a/components/virtual-list/index.json b/components/virtual-list/index.json new file mode 100644 index 0000000..d179519 --- /dev/null +++ b/components/virtual-list/index.json @@ -0,0 +1,7 @@ +{ + "component": true, + "usingComponents": { + "van-divider": "/components/divider/index", + "van-loading": "/components/loading/index" + } +} \ No newline at end of file diff --git a/components/virtual-list/index.wxml b/components/virtual-list/index.wxml new file mode 100644 index 0000000..1f12ee0 --- /dev/null +++ b/components/virtual-list/index.wxml @@ -0,0 +1,20 @@ + + + + + + + {{loading? '正在加载' : '暂无数据'}} + + + + + + + + + + + {{finished?'到底啦～':'加载中...'}} + + \ No newline at end of file diff --git a/components/virtual-list/index.wxss b/components/virtual-list/index.wxss new file mode 100644 index 0000000..e69de29 diff --git a/pages/home/index/index.wxml b/pages/home/index/index.wxml index e265080..c09fe64 100644 --- a/pages/home/index/index.wxml +++ b/pages/home/index/index.wxml @@ -46,7 +46,7 @@ - +