diff --git a/app.wxss b/app.wxss index 18b4191..2c44ffe 100644 --- a/app.wxss +++ b/app.wxss @@ -1,10 +1,52 @@ /**app.wxss**/ -.container { - height: 100vh; - width: 100vw; - display: flex; - flex-direction: column; - align-items: center; - justify-content: flex-start; - box-sizing: border-box; +/**app.wxss**/ +page { + background-color: #f7f8fa; + font-size: 28rpx; + color: #333; + font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Helvetica, Arial, sans-serif; + line-height: 1.6; + height: 100vh; + display: flex; + flex-direction: column; } + +::-webkit-scrollbar { + display: none; + width: 0; + height: 0; + color: transparent; + } + +.container { + width: 100vw; + display: flex; + flex-direction: column; + align-items: center; + justify-content: flex-start; + box-sizing: border-box; +} + +.mt-10 { + margin-top: 10rpx; +} + +.mr-10 { + margin-right: 10rpx; +} + +.ml-10 { + margin-left: 10rpx; +} + +.mb-10 { + margin-bottom: 10rpx; +} + +.mg { + margin: 10rpx; +} + +.pd { + padding: 10rpx; +} \ No newline at end of file diff --git a/components/loadmore/loading-more.js b/components/loadmore/loading-more.js deleted file mode 100644 index b2eec0f..0000000 --- a/components/loadmore/loading-more.js +++ /dev/null @@ -1,30 +0,0 @@ -// components/loadmore/loading-more.js -Component({ - /** - * 组件的属性列表 - */ - properties: { - isShowloading: true, - loadingTxt: "加载中..." - }, - - /** - * 组件的初始数据 - */ - data: { - - }, - - /** - * 组件的方法列表 - */ - methods: { - - }, - observers: { - 'isShowloading,loadingTxt': function (ss, sss) { - console.log(ss) - console.log(sss) - } - } -}) \ No newline at end of file diff --git a/components/loadmore/loading-more.wxml b/components/loadmore/loading-more.wxml deleted file mode 100644 index f67005c..0000000 --- a/components/loadmore/loading-more.wxml +++ /dev/null @@ -1,5 +0,0 @@ - - - - {{loadingTxt}} - \ No newline at end of file diff --git a/components/loadmore/loading-more.wxss b/components/loadmore/loading-more.wxss deleted file mode 100644 index b29e480..0000000 --- a/components/loadmore/loading-more.wxss +++ /dev/null @@ -1,20 +0,0 @@ -/* components/loadmore/loading-more.wxss */ - -.loading-box { - width: 100%; - height: 80rpx; - display: flex; - flex-direction: row; - justify-content: center; - align-items: center; - font-size: 35rpx; -} - -.loading-box image { - width: 40rpx; - height: 40rpx; -} - -.loading-content { - margin-left: 20rpx; -} \ No newline at end of file diff --git a/components/tabs/index.js b/components/tabs/index.js new file mode 100644 index 0000000..a2e89df --- /dev/null +++ b/components/tabs/index.js @@ -0,0 +1,95 @@ +Component({ + options: { + addGlobalClass: true, + pureDataPattern: /^_/, + multipleSlots: true + }, + properties: { + tabs: { + type: Array, + value: [] + }, + tabClass: { + type: String, + value: '' + }, + swiperClass: { + type: String, + value: '' + }, + activeClass: { + type: String, + value: '' + }, + tabUnderlineColor: { + type: String, + value: '#07c160' + }, + tabActiveTextColor: { + type: String, + value: '#000000' + }, + tabInactiveTextColor: { + type: String, + value: '#000000' + }, + tabBackgroundColor: { + type: String, + value: '#ffffff' + }, + activeTab: { + type: Number, + value: 0 + }, + swipeable: { + type: Boolean, + value: true + }, + animation: { + type: Boolean, + value: true + }, + duration: { + type: Number, + value: 500 + } + }, + data: { + currentView: 0 + }, + observers: { + activeTab: function activeTab(_activeTab) { + var len = this.data.tabs.length; + if (len === 0) return; + var currentView = _activeTab - 1; + if (currentView < 0) currentView = 0; + if (currentView > len - 1) currentView = len - 1; + this.setData({ + currentView: currentView + }); + } + }, + lifetimes: { + created: function created() {} + }, + methods: { + handleTabClick: function handleTabClick(e) { + var index = e.currentTarget.dataset.index; + this.setData({ + activeTab: index + }); + this.triggerEvent('tabclick', { + index: index + }); + }, + handleSwiperChange: function handleSwiperChange(e) { + var index = e.detail.current; + this.setData({ + activeTab: index + }); + this.triggerEvent('change', { + index: index + }); + } + } +}); \ No newline at end of file diff --git a/components/loadmore/loading-more.json b/components/tabs/index.json similarity index 92% rename from components/loadmore/loading-more.json rename to components/tabs/index.json index 7e37c03..b18bd46 100644 --- a/components/loadmore/loading-more.json +++ b/components/tabs/index.json @@ -1,4 +1,4 @@ -{ - "component": true, - "usingComponents": {} +{ + "component": true, + "usingComponents": {} } \ No newline at end of file diff --git a/components/tabs/index.wxml b/components/tabs/index.wxml new file mode 100644 index 0000000..50f2ef0 --- /dev/null +++ b/components/tabs/index.wxml @@ -0,0 +1,20 @@ + + + + + + + + {{item.title}} + + + + + + + + \ No newline at end of file diff --git a/components/tabs/index.wxss b/components/tabs/index.wxss new file mode 100644 index 0000000..1d298cf --- /dev/null +++ b/components/tabs/index.wxss @@ -0,0 +1,24 @@ +.weui-tabs { + width: 100% +} + +.weui-tabs-bar__wrp { + width: 100%; + background: #fff +} + +.weui-tabs-bar__content { + width: 100%; + white-space: nowrap +} + +.weui-tabs-bar__item { + display: inline-block +} + +.weui-tabs-bar__title { + display: inline-block; + border-bottom-width: 2px; + border-bottom-style: solid; + border-bottom-color: transparent +} \ No newline at end of file diff --git a/package-lock.json b/package-lock.json new file mode 100644 index 0000000..0202143 --- /dev/null +++ b/package-lock.json @@ -0,0 +1,15 @@ +{ + "name": "gov_propagandize", + "version": "1.0.0", + "lockfileVersion": 3, + "requires": true, + "packages": { + "": { + "name": "gov_propagandize", + "version": "1.0.0", + "license": "ISC", + "dependencies": { + } + } + } +} diff --git a/package.json b/package.json new file mode 100644 index 0000000..cef1933 --- /dev/null +++ b/package.json @@ -0,0 +1,16 @@ +{ + "dependencies": { + "@miniprogram-component-plus/tabs": "^1.0.0", + "@vant/weapp": "^1.11.7" + }, + "name": "gov_propagandize", + "version": "1.0.0", + "main": "app.js", + "scripts": { + "test": "echo \"Error: no test specified\" && exit 1" + }, + "keywords": [], + "author": "", + "license": "ISC", + "description": "" +} diff --git a/pages/index/index.js b/pages/index/index.js index a167428..deb267c 100644 --- a/pages/index/index.js +++ b/pages/index/index.js @@ -12,12 +12,105 @@ Page({ hasUserInfo: false, canIUseGetUserProfile: wx.canIUse('getUserProfile'), canIUseNicknameComp: wx.canIUse('input.type.nickname'), + triggered: false, + list: [], + isLoading: false, + count: 1, + hasMore: true, + isFixed: false, + opacity: 1, + tabs: [{ + title: '测试1' + }, { + title: '测试2' + }, { + title: '测试3' + }, { + title: '测试4' + }, { + title: '测试5' + }, { + title: '测试6' + }, { + title: '测试7' + }, { + title: '测试8' + }, { + title: '测试9' + }, { + title: '测试10' + }], + activeTab: 0 }, - onLoad() { - console.log(wx.getUserProfile) + onLoad(e) { + for (var i = 0; i < 80; i++) { + this.data.list.push(`ssss==${i}`) + } + this.setData({ + list: this.data.list + }) }, - getUserPhoneNumber(e) { - console.log(e.detail) + doRefresh() { + var _self = this; + console.log('刷新中...') + setTimeout(() => { + var tempList = []; + for (var i = 0; i < 30; i++) { + tempList.push("ssss") + } + _self.setData({ + list: tempList, + hasMore: true, + triggered: false + }) + }, 3000); + }, + onPageScroll(e) { + console.log(e) + if (e.scrollTop < 10) { + this.setData({ + opacity: 1 + }) + } else { + this.setData({ + opacity: e.scrollTop / 100 + }) + } + if (e.scrollTop >= 130) { + this.setData({ + isFixed: true + }) + } else { + this.setData({ + isFixed: false + }) + } + }, + doLoadMore() { + var _self = this; + if (_self.data.isLoading || !_self.data.hasMore) { + return + } + console.log('触底了') + _self.setData({ + isLoading: true + }) + setTimeout(() => { + var tempList = [] + for (let i = 0; i < 20; i++) { + tempList.push(`新添加==${i}`) + } + var c = ++_self.data.count + console.log(`页面=${c}`) + _self.setData({ + count: c, + hasMore: c < 3 + }) + _self.setData({ + list: _self.data.list.concat(tempList), + isLoading: false + }) + }, 3000); }, bindViewTap() { AuthService.login({ @@ -65,4 +158,22 @@ Page({ } }) }, + onTabClick(e) { + const index = e.detail.index + this.setData({ + activeTab: index + }) + }, + + onChange(e) { + const index = e.detail.index + this.setData({ + activeTab: index + }) + }, + handleClick(e) { + wx.navigateTo({ + url: './webview', + }) + } }) \ No newline at end of file diff --git a/pages/index/index.json b/pages/index/index.json index fcb1cdc..24c6dd4 100644 --- a/pages/index/index.json +++ b/pages/index/index.json @@ -1,5 +1,6 @@ { "usingComponents": { - "mp-icon": "weui-miniprogram/icon/icon" + "mp-loading": "weui-miniprogram/loading/loading", + "mp-tabs": "/components/tabs/index" } } \ No newline at end of file diff --git a/pages/index/index.wxml b/pages/index/index.wxml index 6fcc468..f75e352 100644 --- a/pages/index/index.wxml +++ b/pages/index/index.wxml @@ -1,9 +1,18 @@ - + + + + - - - - + + + + + + {{item}} + + + + \ No newline at end of file diff --git a/pages/index/index.wxss b/pages/index/index.wxss index 8a18a97..93aaa9b 100644 --- a/pages/index/index.wxss +++ b/pages/index/index.wxss @@ -1,65 +1,123 @@ /**index.wxss**/ -page { - height: 100vh; - display: flex; - flex-direction: column; -} .scrollarea { - flex: 1; - overflow-y: hidden; - height: 100vh; - width: 100vw; - overflow: hidden; + flex: 1; + overflow-y: hidden; + height: 100vh; + width: 100vw; + overflow: hidden; +} + +.scrollX { + width: 100vw; + padding-bottom: 10rpx; +} + +.tab-box { + display: flex; + flex-direction: row; + white-space: nowrap; +} + +.tab-item { + display: flex; + flex-direction: row; + font-size: 32rpx; + padding: 18rpx; +} + +.tabs-box view { + margin: 20rpx; + font-size: 16px; + border-bottom-width: 10rpx; + border-bottom-color: khaki; + border-bottom-style: solid; } .userinfo { - display: flex; - flex-direction: column; - align-items: center; - color: #aaa; - width: 80%; + display: flex; + flex-direction: column; + align-items: center; + color: #aaa; + width: 80%; } .userinfo-avatar { - overflow: hidden; - width: 128rpx; - height: 128rpx; - margin: 20rpx; - border-radius: 50%; + overflow: hidden; + width: 128rpx; + height: 128rpx; + margin: 20rpx; + border-radius: 50%; } .usermotto { - margin-top: 200px; + margin-top: 200px; } .avatar-wrapper { - padding: 0; - width: 56px !important; - border-radius: 8px; - margin-top: 40px; - margin-bottom: 40px; + padding: 0; + width: 56px !important; + border-radius: 8px; + margin-top: 40px; + margin-bottom: 40px; } .avatar { - display: block; - width: 56px; - height: 56px; + display: block; + width: 56px; + height: 56px; } .nickname-wrapper { - display: flex; - width: 100%; - padding: 16px; - box-sizing: border-box; - border-top: .5px solid rgba(0, 0, 0, 0.1); - border-bottom: .5px solid rgba(0, 0, 0, 0.1); - color: black; + display: flex; + width: 100%; + padding: 16px; + box-sizing: border-box; + border-top: .5px solid rgba(0, 0, 0, 0.1); + border-bottom: .5px solid rgba(0, 0, 0, 0.1); + color: black; } .nickname-label { - width: 105px; + width: 105px; } .nickname-input { - flex: 1; + flex: 1; } + +.item-title { + height: 300rpx; + width: 100vw; + background-color: aquamarine; + display: flex; + flex-direction: row; + position: relative; +} + +.item-box { + width: 100rpx; + height: 100rpx; + background-color: wheat; +} + +.item-box1 { + width: 100rpx; + height: 100rpx; + position: relative; + left: 30rpx; + top: 30rpx; + background-color: violet; +} + +.fixed-title { + position: fixed; + top: 0; + left: 0; + height: 300rpx; + z-index: 99; + width: 100vw; + background-color: aquamarine; + display: flex; + flex-direction: row; + -webkit-overflow-scrolling: auto; +} \ No newline at end of file diff --git a/project.config.json b/project.config.json index 55325de..2264bce 100644 --- a/project.config.json +++ b/project.config.json @@ -17,7 +17,8 @@ "ignore": [], "disablePlugins": [], "outputPath": "" - } + }, + "ignoreUploadUnusedFiles": true }, "condition": {}, "editorSetting": {