tabs

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;
 }

components/loadmore/loading-more.js

@@ -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)
-        }
-    }
-})

components/loadmore/loading-more.wxml

@@ -1,5 +0,0 @@
-<!--components/loadmore/loading-more.wxml-->
-<view class="loading-box">
-    <image src="/images/loading.gif" wx:if="{{isShowloading}}"></image>
-    <view class="loading-content">{{loadingTxt}}</view>
-</view>

components/loadmore/loading-more.wxss

@@ -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;
-}

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
+            });
+        }
+    }
+});

components/tabs/index.wxml

@@ -0,0 +1,20 @@
+<view class="weui-tabs">
+    <view class="weui-tabs-bar__wrp">
+        <scroll-view scroll-x scroll-into-view="item_{{currentView}}" scroll-with-animation="{{animation}}">
+            <view class="weui-tabs-bar__content">
+                <block wx:for="{{tabs}}" wx:key="title">
+                    <view id="item_{{index}}" class="weui-tabs-bar__item" style="background-color: {{tabBackgroundColor}}; color: {{activeTab === index ? tabActiveTextColor : tabInactiveTextColor}};" bindtap="handleTabClick" data-index="{{index}}">
+                        <view class="weui-tabs-bar__title {{tabClass}} {{activeTab === index ? activeClass : ''}}" style="border-bottom-color: {{activeTab === index ? tabUnderlineColor : 'transparent'}}">
+                            <text class="">{{item.title}}</text>
+                        </view>
+                    </view>
+                </block>
+            </view>
+        </scroll-view>
+    </view>
+    <!-- <swiper class="{{swiperClass}}" current="{{activeTab}}" duration="{{duration}}" bindchange="handleSwiperChange">
+        <swiper-item wx:for="{{tabs}}" wx:key="title">
+            <slot name="tab-content-{{index}}"></slot>
+        </swiper-item>
+    </swiper> -->
+</view>

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
+}

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": {
+      }
+    }
+  }
+}

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": ""
+}

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',
+        })
+    }
 })

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"
     }
 }

pages/index/index.wxml

@@ -1,9 +1,18 @@
 <!--index.wxml-->
-<scroll-view class="scrollarea" scroll-y type="list">
+<mp-tabs tabs="{{tabs}}" activeTab="{{activeTab}}" tab-class="tab-item">
+
+</mp-tabs>
+<scroll-view class="scrollarea" scroll-y type="list" refresher-enabled="false" refresher-triggered="{{triggered}}" bindrefresherrefresh="doRefresh" bindscrolltolower="doLoadMore" lower-threshold="60">
     <view class="container">
-        <image src="{{userInfo.avatarUrl}}" style="width: 100rpx;height: 100rpx;"></image>
-        <mp-icon type="outline" icon="shop" color="black" size="{{25}}"> </mp-icon>
-        <button type="default" bind:tap="getUserProfile">获取信息</button>
-        <button open-type="getPhoneNumber" bind:tap="getUserPhoneNumber">获取电话</button>
+        <view class="{{isFixed? 'fixed-title':'item-title'}}">
+            <view class="item-box"></view>
+            <view class="item-box1"></view>
+        </view>
+        <block wx:for="{{list}}" wx:key="index">
+            <text style="margin-bottom: 10rpx;">{{item}}</text>
+        </block>
+        <block wx:if="{{hasMore && isLoading}}">
+            <mp-loading show="{{isLoading}}" type="dot-gray" style="width: 100vw;height:40rpx"></mp-loading>
+        </block>
     </view>
 </scroll-view>

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;
 }

project.config.json

@@ -17,7 +17,8 @@
       "ignore": [],
       "disablePlugins": [],
       "outputPath": ""
-    }
+    },
+    "ignoreUploadUnusedFiles": true
   },
   "condition": {},
   "editorSetting": {